<template>
  <view class="container">
    <view>
      <view
        class="list-cell b-b m-t"
        hover-class="cell-hover"
        :hover-stay-time="50"
        @click="navTo($config('zhuCeUrl'))"
      >
        <text class="cell-tit">{{ $config("zhuCeText") }}</text>
        <text class="cell-more iconfont icon-arrow" />
      </view>
      <view
        class="list-cell b-b"
        hover-class="cell-hover"
        :hover-stay-time="50"
        @click="navTo($config('yinSiUrl'))"
      >
        <text class="cell-tit">{{ $config("yinSiText") }}</text>
        <text class="cell-more iconfont icon-arrow" />
      </view>
      <!-- 个性化推荐管理 -->
      <view
        class="list-cell b-b "
        hover-class="cell-hover"
        :hover-stay-time="50"
        @click="navTo($config('tuiJianUrl'))"
      >
        <text class="cell-tit">{{ $config("tuiJianText") }}</text>
        <text class="cell-more iconfont icon-arrow" />
      </view>
      <view
        v-if="$config('yxm') && childrenPersonalInfoProtect"
        class="list-cell b-b"
        hover-class="cell-hover"
        :hover-stay-time="50"
        @click="navTo(childrenPersonalInfoProtect)"
      >
        <text class="cell-tit">羊小咩儿童个人信息保护规则</text>
        <text class="cell-more iconfont icon-arrow" />
      </view>
      <!-- 个性化推荐管理 -->
    </view>
    <view
      class="list-cell b-b mt24"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="open('login-popup')"
    >
      <text class="cell-tit ">切换账户</text>
      <!-- <text class="cell-more iconfont icon-arrow"></text> -->
    </view>
    <view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50" @click="logout()">
      <text class="cell-tit ">注销账户</text>
      <text class="cell-more iconfont logout-txt">注销后无法恢复,请谨慎操作</text>
    </view>
    <login-popup ref="login-popup" type="center" title="用户授权登录" />

    <view class="list-exit" @click="exit()">退出登录</view>
    <!-- 注销账户确认提示 -->
    <!-- <uni-popup ref="subscribeDialog" type="dialog">
      <uni-popup-dialog
        :subscribe-message="true"
        type="input"
        :show-title="false"
        content="您确定注销当前账户吗？"
        message=""
        :duration="2000"
        :before-close="true"
        confirm-txt="确定"
        @confirm="logoutEn"
      />
    </uni-popup> -->
  </view>
</template>

<script>
import authApi from "@/api/address.api";
import loginPopup from "@/components/loginPopup";
// import uniPopup from "@/components/uni-popup/uni-popup";
// import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog";
import { getContract } from "@/api/home.api";
export default {
  components: {
    loginPopup
    // uniPopup,
    // uniPopupDialog
  },
  async onLoad() {
    const [res] = await getContract();
    this.childrenPersonalInfoProtect = res.childrenPersonalInfoProtect || "";
  },
  data() {
    return {
      childrenPersonalInfoProtect: ""
    };
  },
  methods: {
    open(ref) {
      this.$refs[ref].open();
    },
    close(ref) {
      this.$refs[ref].close();
    },
    navTo(jumpUrl) {
      // this.$api.msg(`跳转到${url}`);
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(jumpUrl))}`
      });
    },
    //注销登录
    logout() {
      uni.redirectTo({
        url: `/subPackages/common/set/logout`
      });
    },
    exit() {
      const that = this;
      uni.showModal({
        title: "离开",
        content: "是否确认退出羊小咩？",
        cancelText: "取消",
        confirmText: "确定",
        confirmColor: "#ec1500",
        success: res => {
          if (res.confirm) {
            that.exitLogin();
          }
        }
      });
    },
    async exitLogin() {
      console.log("执行");
      await authApi.logoutUser();
      uni.$emit("logout", true);
      uni.clearStorage();
      uni.switchTab({
        url: "/pages/user/user"
      });
    }
    // async logoutEn() {
    //   const [data] = await authApi.logout();
    //   console.log(data)
    //   uni.$emit("logout", true);
    //   uni.clearStorage()
    //   uni.switchTab({
    //     url: "/pages/index/index"
    //   });
    // },
    // //退出登录
    // switchAccount() {
    //   this.$refs["login-popup"].open();
    // }
  }
};
</script>

<style lang="scss">
.switch-account {
  color: #ec1500 !important;
}
page {
  background: $page-color-base;
}
.list-cell {
  display: flex;
  align-items: baseline;
  padding: 20rpx $page-row-spacing;
  line-height: 60rpx;
  position: relative;
  background: #fff;
  justify-content: center;
  &.log-out-btn {
    margin-top: 40rpx;
    .cell-tit {
      color: $uni-color-primary;
      text-align: center;
      margin-right: 0;
    }
  }
  &.cell-hover {
    background: #fafafa;
  }
  &.b-b:after {
    left: 30rpx;
  }
  &.m-t {
    margin-top: 16rpx;
  }
  .cell-more {
    align-self: baseline;
    font-size: $font-lg;
    color: $font-color-light;
    margin-left: 10rpx;
  }
  .cell-tit {
    flex: 1;
    font-size: $font-base + 2rpx;
    color: $font-color-dark;
    margin-right: 10rpx;
  }
  .cell-tip {
    font-size: $font-base;
    color: $font-color-light;
  }
  switch {
    transform: translateX(16rpx) scale(0.84);
  }
  .logout-txt {
    color: #ee0a24;
    font-size: 24rpx;
  }
}
.list-exit {
  text-align: center;
  background-color: #fff;
  font-size: 30rpx;
  color: #303030;
  padding: 24rpx 0;
  margin-top: 24rpx;
  font-weight: 400;
}
.mt24 {
  margin-top: 24rpx;
}
</style>
