<template>
  <view class="patriarch_card">
    <view class="info" @click="handlePrefectInfo">
      <image
        :src="userInfo.avatarUrl ? userInfo.avatarUrl : defaultAvatar"
        mode=""
        class="header"
      ></image>
      <text class="name">{{ userInfo.nickName }}</text>
      <text class="identity">家长</text>
    </view>
    <view class="function">
      <template v-for="i in list" :key="i.title">
        <view v-if="i.show" class="function_item" @click="handleJump(i)">
          <view class="photo_box">
            <image :src="i.photo" mode="" class="photo"></image>
            <text v-if="i.title === '绑定申请' && getCache('applyBindMsg')" class="unread"></text>
          </view>
          <text class="title">{{ i.title }}</text>
        </view>
      </template>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { user } from '@/store';
import { storeToRefs } from 'pinia';
import { getCache } from '@/utils';

const { userInfo } = storeToRefs(user());

const OSS_URL = import.meta.env.VITE_OSS_HOST;
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`;
const list = ref([
  {
    title: '扫码绑定',
    photo: `${OSS_URL}/urm/my_scan_binding.png`,
    show: true,
    url: '/pages/home/bindDevice/index',
  },
  {
    title: '绑定申请',
    photo: `${OSS_URL}/urm/my_binding_apply.png`,
    show: false,
    url: '/pages/mine/bindApply/index',
  },
  {
    title: '电子保修卡',
    photo: `${OSS_URL}/urm/my_warranty.png`,
    show: true,
    url: '/pages/mine/warranty/index',
  },
  // {
  //     title: '使用攻略',
  //     photo: `${OSS_URL}/urm/my_use_guideline.png`,
  //     show: true,
  //     url: '',
  // },
  {
    title: '任务管理',
    photo: `${OSS_URL}/urm/my_task_manage.png`,
    show: true,
    url: '/pages/mine/taskManage/index',
  },
  {
    title: '奖励管理',
    photo: `${OSS_URL}/urm/my_award_manage.png`,
    show: true,
    url: '/pages/mine/awardManage/index',
  },
]);
function handleJump(i: AnyObject) {
  uni.navigateTo({
    url: i.url,
  });
}
// 完善信息
function handlePrefectInfo() {
  uni.navigateTo({
    url: `/pages/mine/prefectInformation/index?type=1`,
  });
}

onMounted(() => {
  list.value[1].show = getCache('userAdmin');
});
</script>

<style lang="scss" scoped>
.patriarch_card {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .info {
    display: flex;
    align-items: center;

    .header {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }

    .name {
      display: inline-block;
      margin: 0 10rpx 0 20rpx;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 48rpx;
      color: rgba(51, 51, 51, 1);
    }

    .identity {
      display: inline-block;
      padding: 0 10rpx 0 10rpx;
      background-color: rgba(93, 185, 255, 1);
      border-radius: 6rpx;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #fff;
    }
  }

  .function {
    padding: 0 5rpx;
    display: flex;
    flex-wrap: wrap;

    .function_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 30rpx 28rpx 0 0;
      width: 130rpx;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .photo_box {
        position: relative;
        display: block;
        width: 80rpx;
        height: 80rpx;

        .photo {
          width: 80rpx;
          height: 80rpx;
        }

        .unread {
          display: block;
          position: absolute;
          right: 0;
          top: 0;
          width: 16rpx;
          height: 16rpx;
          background-color: rgba(255, 40, 40, 1);
          border-radius: 50%;
        }
      }

      .title {
        display: block;
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: rgba(102, 102, 102, 1);
        line-height: 36rpx;
      }
    }
  }
}
</style>
