<template>
  <view class="page">
    <BackBar title="账号详情" />
    <view class="children">
      <view class="left">
        <image :src="detailInfo.childAvatar" mode="" class="children_avatar"></image>
        <view>
          <view class="name_vip">
            <text class="name">{{ detailInfo.childName }}</text>
            <image
              v-if="detailInfo.currentLevel"
              :src="`${OSS_URL}/iconfont/VIP/VIP_${detailInfo.currentLevel}.png`"
              class="vip"
            />
          </view>
          <view class="time"> 有效期至：{{ dayjs(OSS_URL.vipEndTime).format('YYYY.MM.DD') }} </view>
        </view>
      </view>
      <view class="right">
        <button class="invite_btn" @click="clickShareBtn">邀请绑定</button>
      </view>
    </view>
    <bindPatriarch :type="1" :top="304" />
    <!-- 指示蒙层 -->
    <view v-if="showMaskTip" class="mask" @click="showMaskTip = false">
      <image :src="`${OSS_URL}/urm/invite_arrow.png`" mode="scaleToFill" class="invite_arrow" />
      <text class="word">点击右上角分享给好友哦～</text>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import bindPatriarch from './bindPatriarch.vue';
import type { ChildrenType } from '../interface';
import { user, shareConfigStore } from '@/store';
import { storeToRefs } from 'pinia';
import { parentBindInviteApi } from '@/api';
import { onMounted } from 'vue';
const { initWeixinShareConfig } = shareConfigStore();
const { appId } = storeToRefs(shareConfigStore());
const { userInfo } = storeToRefs(user());
const detailInfo = ref<ChildrenType>({});
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const showMaskTip = ref(false); // 指示蒙层
async function share() {
  const { data } = await parentBindInviteApi({ bindId: detailInfo.value.id, bindType: 1 });
  const options = {
    title: `[${userInfo.value.nickName}]邀请您一起绑定学小乐学习机`, // 分享的标题
    desc: '快来管理孩子的学习情况',
    link: `${import.meta.env.VITE_HOST}/#/pages/mine/inviteBind/index?id=${data.id}`, // 分享的链接
    imgUrl: `${OSS_URL}/urm/invite_bg.png`, // 分享的图片链接
  };
  await initWeixinShareConfig(options);
}
async function clickShareBtn() {
  //  指示用户点击右上角
  if (!appId.value) {
    uni.showToast({
      title: '请稍后再试～',
      icon: 'none',
      mask: true,
    });
    return;
  }
  showMaskTip.value = true;
  // 开发测试使用
  // const { data } = await parentBindInviteApi({ bindId: detailInfo.value.id, bindType: 1 });
  // uni.navigateTo({
  //   url: `/pages/mine/inviteBind/index?id=${data.id}`,
  // });
}

onLoad(option => {
  detailInfo.value = JSON.parse(decodeURIComponent(option.details));
});
onMounted(async () => {
  share();
});
</script>
<style lang="scss" scoped>
.page {
  // padding: 30rpx;
  padding: 0 30rpx 30rpx 30rpx;
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    background: rgba(0, 0, 0, 0.5);
    // backdrop-filter: blur(4px);
    color: #fff;
    .invite_arrow {
      position: absolute;
      top: 0;
      right: 50rpx;
      width: 130rpx;
      height: 195rpx;
    }
    .word {
      display: block;
      position: absolute;
      top: 200rpx;
      right: 80rpx;
    }
  }
  .children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .left {
      display: flex;
      align-items: center;
      .children_avatar {
        margin-right: 20rpx;
        width: 100rpx;
        height: 100rpx;
      }

      .name_vip {
        display: flex;
        align-items: center;
        margin-bottom: 5rpx;

        .name {
          display: inline-block;
          max-width: 210rpx;
          font-weight: 500;
          font-size: 30rpx;
          line-height: 45rpx;
          color: $font-color;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .vip {
          margin-left: 10rpx;
          width: 85rpx;
          height: 32rpx;
        }
      }
      .time {
        font-size: 26rpx;
        line-height: 39rpx;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  .invite_btn {
    width: 158rpx;
    height: 60upx;
    background-color: #615dff;
    color: #fff;
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: 500;
    white-space: nowrap;
  }
}
</style>
