<template>
  <mj-page class="teacher-content">
    <view v-if="equipmentList.length === 0" class="binding" @click="bindDevice">
      <image class="scan" :src="scanQr" mode=""></image>扫码绑定设备
    </view>
    <view v-else class="my_equipment">
      <view class="header">
        <text>我的设备</text>
        <image
          v-if="equipmentList.length > 1"
          :src="arrow"
          mode=""
          :class="{ arrow_icon: true, rotate: showAllDevice }"
          @click="showAllDevice = !showAllDevice"
        ></image>
      </view>
      <view v-if="!showAllDevice" class="equipment_item">
        <view class="equipment_item_right">
          <view class="avatar">
            <image
              :src="
                showEquipment?.curDeviceUserAvatar
                  ? showEquipment?.curDeviceUserAvatar
                  : defaultAvatar
              "
              mode=""
            ></image>
          </view>
          <view class="right">
            <text class="nickname">{{
              showEquipment?.curDeviceUserName ? showEquipment?.curDeviceUserName : '未登录账号'
            }}</text>
            <text class="number">序列号：{{ showEquipment?.simSerialNumber }}</text>
          </view>
        </view>
      </view>
      <template v-else>
        <view
          v-for="(i, idx) in equipmentList"
          :key="idx"
          class="equipment_item"
          @click="chooseEquipment(i)"
        >
          <view class="equipment_item_right">
            <view class="avatar">
              <image
                :src="i?.curDeviceUserAvatar ? i?.curDeviceUserAvatar : defaultAvatar"
                mode=""
              ></image>
            </view>
            <view class="right">
              <text class="nickname">{{
                i?.curDeviceUserName ? i?.curDeviceUserName : '未登录账号'
              }}</text>
              <text class="number">序列号：{{ i?.simSerialNumber }}</text>
            </view>
          </view>
          <view class="equipment_item_left">
            <image :src="i.id === showEquipment.id ? checked : unchecked" mode=""></image>
          </view> </view
      ></template>

      <view class="binding" @click="bindDevice">
        <image class="scan" :src="scanQr" mode=""></image>扫码绑定设备
      </view>
    </view>
    <view class="home_function">
      <template v-for="(i, idx) in functionList" :key="idx">
        <view class="item" @click="change(i)">
          <image class="item_bg" :src="i.developing ? i.developingBg : i.bg" mode=""></image>
        </view>
      </template>
    </view>
    <TabBar :selectedIndex="0" />
  </mj-page>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getParentBindDeviceApi, parentDeviceCurrentLoginApi } from '@/api'
import TabBar from '@/components/Tabbar/index.vue'
import { user } from '@/store'
import { storeToRefs } from 'pinia'
import hud from '@/utils/hud'
import router from '@/router/router'

const { userInfo } = storeToRefs(user())
const OSS_URL = import.meta.env.VITE_OSS_HOST
const scanQr = `${OSS_URL}/iconfont/scan_qr.png`
const arrow = `${OSS_URL}/iconfont/down_arrow.png`
const checked = `${OSS_URL}/iconfont/checked.png`
const unchecked = `${OSS_URL}/iconfont/unchecked.png`
const showAllDevice = ref(false)
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`

const functionList = reactive([
  {
    name: '一键锁屏',
    bg: `${OSS_URL}/urm/home_lock_screen.png`,
    developingBg: '',
    developing: false,
    type: 0,
  },
  {
    name: '桌面预览',
    bg: `${OSS_URL}/urm/home_desktop_preview.png`,
    developingBg: '',
    developing: false,
    type: 1,
  },
  {
    name: '时间管控',
    bg: `${OSS_URL}/urm/home_time_control.png`,
    developingBg: '',
    developing: false,
    type: 2,
  },
  {
    name: '视频通话',
    bg: `${OSS_URL}/urm/home_video_call.png`,
    developingBg: `${OSS_URL}/urm/home_video_developing.png`,
    developing: true,
    type: 3,
  },
])
const equipmentList = ref([])
const showEquipment = ref()

// 选择设备
function chooseEquipment(i) {
  showEquipment.value = i
}

function bindDevice() {
  router.navigateTo('/pages/home/bindDevice/index')
}

// 底部点击
function change(i: any) {
  if (equipmentList.value.length === 0) {
    // uni.showToast({
    //   title: '扫码绑定设备',
    //   icon: 'none',
    //   duration: 2000,
    // });
    router.navigateTo('/pages/home/bindDevice/index')
    return
  }
  if (i.developing) return
  switch (i.type) {
    case 0:
      // 一键锁屏
      router.navigateTo({
        path: '/pages/home/LockScreen/index',
        query: {
          simSerialNumber: showEquipment.value.simSerialNumber,
        },
      })
      break
    case 1:
      // 桌面预览
      router.navigateTo({
        path: '/pages/home/DesktopPreview/index',
        query: {
          simSerialNumber: showEquipment.value.simSerialNumber,
        },
      })
      break
    case 2:
      // 时间管控
      router.navigateTo({
        path: '/pages/home/TimeManagement/index',
        query: {
          simSerialNumber: showEquipment.value.simSerialNumber,
        },
      })
      break
    case 3:
      // 视频通话
      console.log('视频通话')
      break
  }
}
// 我的设备
async function getParentBindDevice() {
  equipmentList.value = []
  hud.load({
    task: async () => {
      const data = await getParentBindDeviceApi({ parentId: userInfo.value.id, size: -1 })
      for (let i in data.rows) {
        const _r = await parentDeviceCurrentLoginApi(data.rows[i].id)
        equipmentList.value.push({
          ...data.rows[i],
          curDeviceUserName: _r.curDeviceUserName,
          curDeviceUserAvatar: _r.curDeviceUserAvatar,
        })
      }
      showEquipment.value = data.rows?.length > 0 ? equipmentList.value[0] : {}
    },
  })
}
onMounted(async () => {
  getParentBindDevice()
})
</script>

<style scoped lang="scss">
.teacher-content {
  padding: 30rpx 30rpx 120rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .binding {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    border-radius: 20rpx;
    border: 2px dashed rgba(97, 93, 255, 1);
    color: rgba(97, 93, 255, 1);
    font-size: 34rpx;
    font-weight: 500;
    line-height: 52rpx;

    .scan {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }

  .my_equipment {
    background-color: #fff;
    padding: 0 30rpx;
    border-radius: 20rpx;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0;

      .arrow_icon {
        width: 36rpx;
        height: 36rpx;
      }
      .rotate {
        transform: rotate(180deg);
      }
    }

    .equipment_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-top: 1rpx solid rgba(238, 238, 238, 1);

      &_right {
        display: flex;

        .avatar {
          width: 100rpx;
          height: 100rpx;
          margin-right: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          .nickname {
            display: block;
            margin-bottom: 10rpx;
            font-size: 30rpx;
            line-height: 45rpx;
            font-weight: 500;
            max-width: 210rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .number {
            display: block;
            color: rgba(169, 170, 181, 1);
            font-weight: 400;
            font-size: 28rpx;
            line-height: 42rpx;
          }
        }
      }

      &_left {
        width: 30rpx;
        height: 30rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .binding {
      height: 100rpx !important;
      border-radius: 0;
      border: none;
      border-top: 1rpx solid rgba(238, 238, 238, 1);
      font-size: 30rpx;
      line-height: 36rpx;

      .scan {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }

  .home_function {
    display: flex;
    flex-wrap: wrap;

    margin-top: 40rpx;

    .item {
      height: 220rpx;
      width: 330rpx;
      margin: 0 30rpx 30rpx 0;

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

      &_bg {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
