<template>
  <view>
    <BackBar title="申请绑定" />
    <view class="tip">
      <text class="title">
        {{
          parameterData.type === 1
            ? '请向管理员申请绑定设备'
            : parameterData.type === 2
            ? '请向管理员申请绑定孩子账号'
            : '请向设备管理员和家长管理员申请绑定'
        }}
      </text>
    </view>
    <view
      class="userInfo_box"
      :style="{ 'justify-content': parameterData.type === 3 ? 'space-between' : 'center' }"
    >
      <view v-if="parameterData.type === 1 || parameterData.type === 3" class="userInfo">
        <image
          class="headIcon"
          :src="deviceManager.adminUserAvatar ? deviceManager.adminUserAvatar : defaultAvatar"
          mode="scaleToFill"
        />
        <text class="name">{{ deviceManager.adminUserName || '--' }}</text>
        <text class="info">({{ deviceManager.mark }})</text>
      </view>
      <view v-if="parameterData.type === 2 || parameterData.type === 3" class="userInfo">
        <image
          class="headIcon"
          :src="parentManager.adminUserAvatar ? parentManager.adminUserAvatar : defaultAvatar"
          mode="scaleToFill"
        />
        <text class="name">{{ parentManager.adminUserName || '--' }}</text>
        <text class="info">({{ parentManager.mark }})</text>
      </view>
    </view>

    <view class="reminder">
      <text class="reminderText">温馨提示：</text>
      <text class="cont">
        {{
          parameterData.type === 1
            ? '您需要向管理员发出申请，管理员通过后，才能共同关联设备'
            : parameterData.type === 2
            ? '您需要向管理员发出申请，管理员通过后，才能共同管理孩子的学习情况。'
            : '您需要向设备管理员和家长管理员发出申请，他们通过后，您才能管理设备和学生。'
        }}
      </text>
    </view>

    <view :class="{ sub: true, unSub: !successApply, waiting: successApply }" @click="subFun">
      <text v-if="successApply"> 等待申请通过… </text>
      <text v-else>
        {{
          parameterData.type === 1
            ? '申请绑定设备'
            : parameterData.type === 2
            ? '申请绑定孩子账号'
            : '同时申请绑定'
        }}</text
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import { parentBindApply, adminInfo } from '@/api'
import router from '@/router/router'
import { debounce } from '@/hooks'
const OSS_URL = import.meta.env.VITE_OSS_HOST
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
const successApply = ref(false)
// 参数暂存
const parameterData = reactive({
  simSerialNumber: '', // 设备序列号
  childUserId: '', // 孩子账号
  identityType: 0,
  type: 1, // type :1为绑定设备   2为绑定孩子
})
const deviceManager = ref({
  adminUserAvatar: '',
  adminUserName: '',
  mark: '设备管理员',
})
const parentManager = ref({
  adminUserAvatar: '',
  adminUserName: '',
  mark: '家长管理员',
})

function applyFn() {
  let obj
  if (parameterData.childUserId && parameterData.simSerialNumber) {
    obj = {
      childDto: {
        childId: parameterData.childUserId,
        identityType: parameterData.identityType,
      },
      deviceDto: {
        simSerialNumber: parameterData.simSerialNumber,
        identityType: parameterData.identityType,
      },
    }
  } else if (parameterData.childUserId) {
    obj = {
      childDto: {
        childId: parameterData.childUserId,
        identityType: parameterData.identityType,
      },
    }
  } else if (parameterData.simSerialNumber) {
    obj = {
      deviceDto: {
        simSerialNumber: parameterData.simSerialNumber,
        identityType: parameterData.identityType,
      },
    }
  }
  if (successApply.value) return
  parentBindApply(obj)
    .then(res => {
      uni.showToast({ title: '提交成功,请等待管理员审核', icon: 'none' })
      successApply.value = true
      setTimeout(() => {
        router.navigateTo('/pages/home/index')
      }, 800)
    })
    .catch(err => {
      successApply.value = false
      console.log(err)
    })
}
const subFun = debounce(applyFn, 600)
async function getAdminInfoFun() {
  if (parameterData.type === 1) {
    // 设备
    await adminInfo({
      simSerialNumber: parameterData.simSerialNumber,
    }).then(res => {
      deviceManager.value.adminUserAvatar = res.data.adminUserAvatar
      deviceManager.value.adminUserName = res.data.adminUserName
    })
  } else if (parameterData.type === 2) {
    // 孩子
    await adminInfo({
      childUserId: parameterData.childUserId,
    }).then(res => {
      parentManager.value.adminUserAvatar = res.data.adminUserAvatar
      parentManager.value.adminUserName = res.data.adminUserName
    })
  } else {
    // 两者
    await adminInfo({
      childUserId: parameterData.childUserId,
    }).then(res => {
      parentManager.value.adminUserAvatar = res.data.adminUserAvatar
      parentManager.value.adminUserName = res.data.adminUserName
    })
    await adminInfo({
      simSerialNumber: parameterData.simSerialNumber,
    }).then(res => {
      deviceManager.value.adminUserAvatar = res.data.adminUserAvatar
      deviceManager.value.adminUserName = res.data.adminUserName
    })
  }
}

onLoad(option => {
  let datas = JSON.parse(option.parameter)
  parameterData.childUserId = datas.childUserId
  parameterData.simSerialNumber = datas.simSerialNumber
  parameterData.identityType = datas.identityType
  parameterData.type = datas.type
  getAdminInfoFun() // 设备当前管理员信息
})
</script>

<style lang="scss" scoped>
.tip {
  display: flex;
  justify-content: center;
  color: rgba(51, 51, 51, 1);
  width: 100%;
  text-align: center;
  margin-top: 50upx;
  font-weight: 500;
  font-size: 34rpx;

  .title {
    max-width: 442rpx;
  }
}
.userInfo_box {
  margin: auto;
  display: flex;
  // justify-content: space-between;
  max-width: 418rpx;

  .userInfo {
    max-width: 182rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .headIcon {
      width: 120upx;
      height: 120upx;
      margin-top: 50upx;
      border-radius: 50%;
    }
    .name {
      font-size: 32upx;
      color: rgba(51, 51, 51, 1);
      margin-top: 20upx;

      max-width: 182rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .info {
      margin-top: 10upx;
      font-size: 28upx;
      color: rgba(169, 170, 181, 1);
    }
  }
}

.reminder {
  width: 690upx;
  margin-left: 30upx;
  border-radius: 20upx;
  background-color: #fff;
  padding: 30upx 40upx;
  box-sizing: border-box;
  margin-top: 50upx;
  display: flex;
  flex-direction: column;

  .reminderText {
    font-size: 30upx;
    color: rgba(51, 51, 51, 1);
  }
  .cont {
    font-size: 30upx;
    color: rgba(102, 102, 102, 1);
    margin-top: 20upx;
  }
}

.sub {
  width: 690upx;
  height: 90upx;
  border-radius: 20upx;

  font-size: 30upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 120upx;

  margin-left: 30upx;
}
.unSub {
  color: #fff;
  background-color: rgba(97, 93, 255, 1);
}
.waiting {
  color: rgba(169, 170, 181, 0.76);
  background: rgba(226, 226, 231, 1);
}
</style>
