<template>
  <view class="page">
    <BackBar title="设备详情" />
    <view class="equipment">
      <view class="left">
        序列号：<text class="serial">{{ detailInfo.simSerialNumber }}</text>
      </view>
      <view class="right">
        <button class="invite_btn" @click="clickShareBtn">分享设备</button>
      </view>
    </view>
    <view class="current_login">
      <view class="title">当前登录</view>
      <view class="children">
        <image
          :src="
            currentLogin?.curDeviceUserAvatar ? currentLogin?.curDeviceUserAvatar : defaultAvatar
          "
          mode=""
          class="children_avatar"
        ></image>
        <view>
          <view class="name_vip">
            <text class="name">{{
              currentLogin?.curDeviceUserName ? currentLogin?.curDeviceUserName : '未登录账号'
            }}</text>
            <image
              v-if="currentLogin?.currentLevel"
              :src="`${OSS_URL}/iconfont/VIP/VIP_${currentLogin?.currentLevel}.png`"
              class="vip"
            />
          </view>
          <view v-if="currentLogin?.vipEndTime" class="time">
            有效期至：{{ dayjs(currentLogin?.vipEndTime).format('YYYY.MM.DD') }}
          </view>
        </view>
      </view>
    </view>
    <bindPatriarch :type="2" :top="519" />
    <!-- 指示蒙层 -->
    <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 { onMounted, ref } from 'vue';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';

import type { DeviceType, CurrentLoginAccountType } from '../interface';

import bindPatriarch from './bindPatriarch.vue';
import { parentDeviceCurrentLoginApi, parentBindInviteApi } from '@/api';
import { user, shareConfigStore } from '@/store';
import { storeToRefs } from 'pinia';
import dayjs from 'dayjs';

const { initWeixinShareConfig } = shareConfigStore();
const { appId } = storeToRefs(shareConfigStore());
const { userInfo } = storeToRefs(user());
const showMaskTip = ref(false);
const detailInfo = ref<DeviceType>();
const currentLogin = ref<CurrentLoginAccountType>();
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`;
// 当前登录
async function deviceCurrentLogin() {
  const { data } = await parentDeviceCurrentLoginApi(detailInfo.value.id);
  currentLogin.value = data;
}
async function share() {
  const { data } = await parentBindInviteApi({ bindId: detailInfo.value.id, bindType: 0 });
  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: 0 });
  // uni.navigateTo({
  //   url: `/pages/mine/inviteBind/index?id=${data.id}`,
  // });
}

onMounted(() => {
  deviceCurrentLogin();
  share();
});
onLoad(option => {
  detailInfo.value = JSON.parse(decodeURIComponent(option.details));
});
</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;
    }
  }
  .equipment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    padding: 30rpx;
    border-radius: 20rpx;
    font-size: 30rpx;
    background-color: #fff;
    .left {
      color: #333;
      font-weight: 500;
      .serial {
        font-weight: 400;
        color: #666;
      }
    }
  }
  .current_login {
    .title {
      margin: 40rpx 0 10rpx 0;
      font-size: 30rpx;
      color: #333;
      font-weight: 400;
      line-height: 45rpx;
    }
    .children {
      display: flex;
      align-items: center;
      padding: 30rpx;
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;

      &_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>
