<template>
  <view class="about_mine">
    <z-paging
      ref="paging"
      v-model="dataList"
      :paging-style="{ margin: isAdmin ? '562rpx 30rpx 0 30rpx' : '386rpx 30rpx 0 30rpx' }"
      :style="{
        height: isAdmin
          ? `calc(100% - 532rpx - 120rpx - 52rpx)`
          : `calc(100% - 356rpx - 120rpx - 52rpx)`,
      }"
      @query="queryList"
    >
      <template #top>
        <view class="navigate">
          <text
            v-for="(i, idx) in navList"
            :key="idx"
            :class="{ navigate_item: true, active: activeNav.type === i.type }"
            @click="swicthNav(i)"
            >{{ i.title }}</text
          >
        </view>
      </template>
      <template v-slot:empty>
        <view class="empty_box">
          <image :src="empty" mode="" class="empty"></image>
          <view class="tip">您还没有绑定任何数据，快去扫码绑定吧～</view>
          <button class="btn" @click="handleBindDevice">扫码绑定</button>
        </view>
      </template>
      <view class="content">
        <!-- 我的孩子 -->
        <template v-if="activeNav.type === 1">
          <view
            v-for="(i, idx) in dataList"
            :key="idx"
            class="children"
            @click="handleDetialPage(activeNav.type, i)"
          >
            <image
              :src="i?.childAvatar ? i?.childAvatar : defaultAvatar"
              mode=""
              class="children_avatar"
            ></image>
            <view class="children-info">
              <view class="name_vip">
                <text class="name">{{ i.childName }}</text>
                <image
                  v-if="i.currentLevel"
                  :src="`${OSS_URL}/iconfont/VIP/VIP_${i.currentLevel}.png`"
                  class="vip"
                />
              </view>
              <view class="time">
                有效期至：{{ i.vipEndTime ? dayjs(i.vipEndTime).format('YYYY.MM.DD') : '-' }}
              </view>
            </view>
            <view v-if="i.havePurchasedInspector" class="service">
              <wd-button class="btn" :round="false" @click.stop="toMySupervisionService(i)"
                >督学服务</wd-button
              >
            </view>
          </view>
        </template>
        <!-- 我的设备 -->
        <template v-else>
          <view
            v-for="(i, idx) in dataList"
            :key="idx"
            class="equipment"
            @click="handleDetialPage(activeNav.type, i)"
          >
            序列号：<text class="serial">{{ i.simSerialNumber }}</text>
          </view>
        </template>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getParentBindChildApi, getParentBindDeviceApi } from '@/api';
import { user } from '@/store';
import { storeToRefs } from 'pinia';
import { getCache } from '@/utils';
import type { ChildrenType, DeviceType } from './interface';
import dayjs from 'dayjs';
const { userInfo } = storeToRefs(user());
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`;
const empty = `${OSS_URL}/empty.png`;
const isAdmin = ref(false);
// 导航
const activeNav = ref({
  title: '我的孩子',
  type: 1,
});

const navList = reactive([
  {
    title: '我的孩子',
    type: 1,
  },
  {
    title: '我的设备',
    type: 2,
  },
]);
const dataList = ref<any[]>([]);
const paging = ref(null);

function swicthNav(i) {
  paging.value.reload(true);
  activeNav.value = i;
}

const queryList = (pageNo: number, pageSize: number) => {
  if (activeNav.value.type === 1) {
    getParentBindChildApi({ parentId: userInfo.value.id, current: pageNo, size: pageSize })
      .then(res => {
        paging.value.complete(res.data.rows);
      })
      .catch(res => {
        paging.value.complete(false);
      });
  } else {
    getParentBindDeviceApi({ parentId: userInfo.value.id, current: pageNo, size: pageSize })
      .then(res => {
        paging.value.complete(res.data.rows);
      })
      .catch(res => {
        paging.value.complete(false);
      });
  }
};
// 进入详情
function handleDetialPage(type: number, obj: any) {
  let details = encodeURIComponent(JSON.stringify(obj));
  switch (type) {
    case 1:
      uni.navigateTo({ url: `/pages/mine/details/childrenDetails?details=${details}` });
      break;
    case 2:
      uni.navigateTo({ url: `/pages/mine/details/deviceDetails?details=${details}` });
      break;
  }
}
// 绑定
function handleBindDevice() {
  uni.navigateTo({
    url: '/pages/home/bindDevice/index',
  });
}

const toMySupervisionService = child => {
  uni.navigateTo({
    url: `/pages/parents/mySupervisionService/index?id=${child.childId}`,
  });
};

onShow(() => {
  if (paging.value) {
    paging.value.refresh();
  }
});
onMounted(() => {
  isAdmin.value = getCache('userAdmin');
});
</script>

<style lang="scss" scoped>
.about_mine {
  // .paging_box {
  //   height: calc(100vh - 532rpx - 120rpx - 52rpx);
  // }
  :deep(.zp-empty-view-center) {
    display: block;
  }
  .empty_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 692rpx;
    height: 602rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .empty {
      width: 300rpx;
      height: 300rpx;
    }

    .tip {
      margin: 30rpx 0 50rpx 0;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 42rpx;
    }

    .btn {
      width: 440rpx;
      height: 90rpx;
      line-height: 90rpx;
      background-color: #615dff;
      color: #fff;
      font-size: 30rpx;
      font-weight: 500;
      border-radius: 20rpx;
    }
  }
  .navigate {
    display: flex;

    &_item {
      margin-right: 50rpx;
      padding-bottom: 8rpx;
      color: rgba(169, 170, 181, 1);
      font-size: 28rpx;
      line-height: 48rpx;
    }

    .active {
      position: relative;
      font-weight: 500;
      font-size: 32rpx;
      color: rgba(51, 51, 51, 1);

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        content: '';
        display: block;
        width: 30rpx;
        height: 8rpx;
        background-color: rgba(97, 93, 255, 1);
        border-radius: 8rpx;
      }
    }
  }

  .content {
    .children {
      display: flex;
      align-items: center;
      padding: 30rpx;
      margin-bottom: 30rpx;
      border-radius: 20rpx;
      background-color: #fff;
      .children-info {
        flex: 1 0;
      }
      &_avatar {
        margin-right: 20rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }

      .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);
      }
      .service {
        .btn {
          width: 158rpx;
          height: 60rpx;
          border-radius: 10rpx;
          background-color: #615dff;
        }
      }
    }

    .equipment {
      margin-bottom: 30rpx;
      padding: 30rpx;
      border-radius: 20rpx;
      color: rgba(102, 102, 102, 1);
      font-size: 28rpx;
      background-color: #fff;

      .serial {
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}
</style>
