<script setup lang="ts">
import { reactive, ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import router from '@/router/router'
import dayjs from 'dayjs'
import { useChildStore } from '@/store/child'
import { useDeviceStore } from '@/store/device'
const OSS_URL = import.meta.env.VITE_OSS_HOST
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
const empty = `${OSS_URL}/empty.png`

const nav_child = 1
const nav_device = 2
// 导航
const activeNav = ref({
  title: '我的孩子',
  type: nav_child,
})

const navList = reactive([
  {
    title: '我的孩子',
    type: nav_child,
  },
  {
    title: '我的设备',
    type: nav_device,
  },
])
// 孩子
const childStore = useChildStore()
const { getChildren } = childStore
const { children } = storeToRefs(childStore)
// 设备
const deviceStore = useDeviceStore()
const { getDevices } = deviceStore
const { devices } = storeToRefs(deviceStore)

const noData = computed(() => {
  return (
    (activeNav.value.type === nav_child && children.value.length === 0) ||
    (activeNav.value.type === nav_device && devices.value.length === 0)
  )
})

function switchNav(i: any) {
  activeNav.value = i
  loadData()
}

const loadData = () => {
  if (activeNav.value.type === nav_child) {
    getChildren()
  } else {
    getDevices()
  }
}
// 进入详情
function handleDetailPage(type: number, obj: any) {
  let details = encodeURIComponent(JSON.stringify(obj))
  switch (type) {
    case 1:
      router.navigateTo({
        path: `/pages/mine/details/childrenDetails`,
        query: { details },
      })
      break
    case 2:
      router.navigateTo({
        path: `/pages/mine/details/deviceDetails`,
        query: { details },
      })
      break
  }
}
// 绑定
function handleBindDevice() {
  router.navigateTo('/pages/home/bindDevice/index')
}

// const toMySupervisionService = child => {
//   router.navigateTo({
//     path: `/pages/parents/mySupervisionService/index`,
//     query: { id: child.childId },
//   })
// }

onShow(() => {
  loadData()
})
</script>

<template>
  <view class="about_mine">
    <view class="container">
      <view class="navigate">
        <text
          v-for="(i, idx) in navList"
          :key="idx"
          :class="{ navigate_item: true, active: activeNav.type === i.type }"
          @click="switchNav(i)"
          >{{ i.title }}</text
        >
      </view>
      <scroll-view scroll-y class="scroll-container">
        <view v-if="noData" class="empty_box">
          <image :src="empty" mode="" class="empty"></image>
          <view class="tip">您还没有绑定任何数据，快去扫码绑定吧～</view>
          <button class="btn" @click="handleBindDevice">扫码绑定</button>
        </view>

        <view v-else class="content">
          <!-- 我的孩子 -->
          <template v-if="activeNav.type === nav_child">
            <view
              v-for="(i, idx) in children"
              :key="idx"
              class="children"
              @click="handleDetailPage(activeNav.type, i)"
            >
              <image
                :src="i?.child?.avatar || defaultAvatar"
                mode=""
                class="children_avatar"
              ></image>
              <view class="children-info">
                <view class="name_vip">
                  <text class="name">{{ i.child?.name }}</text>
                  <image
                    v-if="i.child?.currentLevel"
                    :src="`${OSS_URL}/iconfont/VIP/VIP_${i.child?.currentLevel}.png`"
                    class="vip"
                  />
                </view>
                <view class="time">
                  有效期至：{{
                    i.child?.vipEndTime ? dayjs(i.child?.vipEndTime).format('YYYY.MM.DD') : '-'
                  }}
                </view>
              </view>
            </view>
          </template>
          <!-- 我的设备 -->
          <template v-else>
            <view
              v-for="(i, idx) in devices"
              :key="idx"
              class="equipment"
              @click="handleDetailPage(activeNav.type, i)"
            >
              序列号：<text class="serial">{{ i.simSerialNumber }}</text>
            </view>
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.about_mine {
  .container {
    margin-top: 20px;
  }

  .scroll-container {
    margin-top: 30rpx;
  }
  .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>
