<template>
  <view class="mine">
    <!-- 用户信息 -->
    <view class="userContainer">
      <u-avatar :src="avatarImg" size="60"></u-avatar>
      <view class="userData">
        <text class="phone">{{
          !isLoginStatus
            ? "未登录用户"
            : maskPhoneNumber(Session.get("userPhone"))
        }}</text>
        <!-- <view class="setUserData">
          编辑我的个人资料
          <u-icon size="12" name="arrow-right"></u-icon>
        </view> -->
      </view>
    </view>

    <!-- 订阅模块 旧UI版本 -->
    <!-- <view class="subscribeContainer">
      <view class="subTitle">我的订阅</view>

      <u-grid :border="false" col="5">
        <u-grid-item v-for="(listItem, listIndex) in state.list" :key="listIndex">
          <view class="gridImg">
            <image :src="listItem.imgurl" class="img"></image>
          </view>
          <text class="gridText">{{ listItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view> -->

    <!-- 其他功能区 -->
    <view class="otherContainer" v-if="isLoginStatus">
      <u-cell-group :border="false">
        <u-cell
          title="已订阅栏目"
          :icon="vip"
          isLink
          :iconStyle="{ width: '46rpx', height: '32rpx', marginRight: '14rpx' }"
          :titleStyle="{
            fontSize: '32rpx',
            color: '#333333',
          }"
          @click="handleClick(-1)"
        >
        </u-cell>
        <u-cell
          title="我的收藏"
          :icon="star"
          isLink
          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }"
          :titleStyle="{
            fontSize: '32rpx',
            color: '#333333',
          }"
          @click="handleClick(0)"
        >
        </u-cell>
        <u-cell
          title="我喜欢的"
          :icon="like"
          isLink
          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }"
          :titleStyle="{
            fontSize: '32rpx',
            color: '#333333',
          }"
          @click="handleClick(1)"
        >
        </u-cell>
        <!-- title="浏览记录" :icon="time" :border="false"  -->
        <u-cell
          :icon="time"
          isLink
          :iconStyle="{ width: '40rpx', height: '40rpx', marginRight: '20rpx' }"
          :titleStyle="{
            fontSize: '32rpx',
            color: '#333333',
          }"
          @click="handleClick(2)"
        >
          <template #title>
            <view class="recordText">
              <text style="font-size: 32rpx">浏览记录</text>
              <view class="tips">保存近3个月的浏览记录</view>
            </view>
          </template>
        </u-cell>
      </u-cell-group>
    </view>

    <!-- 未登录的状态 -->
    <view v-else class="notLogin">
      <view class="notLoginImg"></view>
      <view class="notLoginText">登录后查看内容哦~</view>
    </view>

    <!-- 退出登录的按钮 -->
    <view class="loginOut" :class="!isLoginStatus && 'loginBtn'">
      <u-button type="danger" size="large" @click="loginBtnStatus">{{
        !isLoginStatus ? "点击登录" : "退出登录"
      }}</u-button>
    </view>

    <!-- 登录弹框 -->
    <LoginPopup
      :show="LoginShow"
      @handlePopupClose="handlePopupClose"
      @handlePopupSuccessCallback="handlePopupSuccessCallback"
      @handlePopupErrorCallback="handlePopupErrorCallback"
    />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
import { Session } from "@/utils/storage";
import LoginPopup from "@/components/loginPopup/index.vue";
import avatarImg from "@/assets/images/avatar.png";
import column from "@/assets/images/column.png";
import article from "@/assets/images/article.png";
import balance from "@/assets/images/balance.png";
import star from "@/assets/images/star.png";
import like from "@/assets/images/like.png";
import time from "@/assets/images/time.png";
import vip from "@/assets/images/vip.png";
import { useShareStore } from "@/stores/shareStore";
const stores = useShareStore();
const curPages = getCurrentPages();

const isLoginStatus = ref(false);
// login 弹框是否显示
const LoginShow = ref(false);

onMounted(() => {
  if (Session.get("token")) {
    isLoginStatus.value = true;
  }
});

// 将手机号的中间四位用 * 代替
const maskPhoneNumber = (phoneNumber: string) => {
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
};

// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};

// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
  isLoginStatus.value = true;
};

// 登录失败之后的回调
const handlePopupErrorCallback = () => {
  console.log("登录失败");
};

// 登录状态按钮
const loginBtnStatus = () => {
  if (isLoginStatus.value) {
    // 登录状态，点击就是退出登录
    loginOut();
  } else {
    LoginShow.value = true;
  }
};

// 退出登录，回到登录页面
const loginOut = () => {
  uni.showToast({
    title: "退出登录",
    icon: "none",
    duration: 1500,
  });
  // 清除 cookie
  Session.clear();
  uni.removeStorageSync("subStatus");
  uni.removeStorageSync("tabValue");
  uni.reLaunch({
    url: "/pages/login/index",
  });
};

const handleClick = (val: number) => {
  if (val === -1) {
    uni.navigateTo({
      url: "/pages/subscribed/index",
    });
  } else {
    uni.navigateTo({
      url: `/pages/bookmark/index?tabs=${val}`,
    });
  }
};

const wxShare = () => {
  let link = stores.redirectUrl;
  let path = curPages[curPages.length - 1].route;
  let query = encodeURIComponent(
    JSON.stringify({
      tabIndex: 2,
    })
  );
  link += `?path=${path}`;
  const shareData = {
    title: `中证参考`,
    desc: "天下事 秒知道",
    link: link,
    imgUrl: "https://cankao.cs.com.cn/static/share-default.jpg",
  };
  console.log("output >>>>> shareData", shareData);

  stores.initWxConfig(shareData);
};

onShow(() => {
  wxShare();
});

onPullDownRefresh(() => {
  uni.stopPullDownRefresh();
});
</script>

<style lang="scss" scoped>
.mine {
  min-height: calc(100vh - 130rpx);
  background-color: #f5f5f5;
  // position: relative;
  position: relative;
  font-family: "SourceHanSansCN-Medium";
  // 个人信息
  .userContainer {
    background-color: #fff;
    box-sizing: border-box;
    padding: 90rpx 45rpx 45rpx 45rpx;
    display: flex;

    .userData {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 216rpx;
      margin-left: 40rpx;
      .phone {
        // font-size: 32rpx;
        font-size: var(--h1-font-size);
      }
      .setUserData {
        display: flex;
        align-items: center;
        // font-size: 24rpx;
        font-size: var(--h4-font-size);
        color: rgba(51, 51, 51, 0.6);
      }
    }
  }
  // 订阅模块
  .subscribeContainer {
    background-color: #fff;
    margin: 30rpx 20rpx;
    padding: 21rpx 36rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    .subTitle {
      // font-size: 32rpx;
      font-size: var(--h1-font-size);
      color: #333;
      margin-bottom: 30rpx;
      font-weight: bold;
    }
    ::v-deep {
      .u-grid-item {
        margin-right: 30rpx;
      }
    }
    .gridImg {
      width: 96rpx;
      height: 96rpx;
      border-radius: 16rpx;
      background-color: #fff0d5;
      margin-bottom: 15rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 64rpx;
        height: 64rpx;
      }
    }
    .gridText {
      // font-size: 24rpx;
      font-size: var(--h4-font-size);
      color: #333;
    }
  }
  // 其他功能区
  .otherContainer {
    background-color: #fff;
    margin: 30rpx 20rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    .recordText {
      display: flex;
      align-items: center;
      .tips {
        // font-size: 24rpx;
        font-size: var(--h4-font-size);
        color: rgba(51, 51, 51, 0.6);
        padding-left: 21rpx;
        font-family: "SourceHanSansCN-Regular";
      }
    }
  }

  .notLogin {
    margin: 120rpx auto 21rpx auto;
    box-sizing: border-box;
    // background-color: red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: "SourceHanSansCN-Regular";
    position: absolute;
    bottom: 500rpx;
    left: 50%;
    transform: translateX(-50%);
    .notLoginImg {
      width: 278rpx;
      height: 220rpx;
      // border: 1px solid;
      background-image: url(@/assets/images/notLogin.png);
      background-size: cover;
    }
    .notLoginText {
      width: 100%;
      text-align: center;
      // font-size: 32rpx;
      font-size: var(--h1-font-size);
      color: #afafaf;
      margin-top: 21rpx;
    }
  }

  // 退出登录
  .loginOut {
    width: 600rpx;
    height: 100rpx;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 20rpx;
    border: 4rpx solid #e7303f;
    // font-size: 32rpx;
    font-size: var(--h1-font-size);
    color: #e7303f;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 240rpx;
    left: 50%;
    transform: translateX(-50%);
    font-family: "SourceHanSansCN-Regular";
    &.loginBtn {
      width: 256rpx;
      height: 100rpx;
      border-radius: 70rpx;
      color: #fff;
      background-color: #e7303f;
      bottom: 390rpx;
    }
  }
}
</style>
