<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useRelation1, maskPhone } from '@/hooks'
import type { ChildrenType, DeviceType } from '../interface'
import Empty from '@/components/Empty/index.vue'
import {
  getParentBindChildApi,
  getParentBindDeviceApi,
  childUnBoundParentApi,
  parentUnBoundDeviceApi,
} from '@/api'
import CustomPopup from '@/components/CustomPopup/index.vue'
const props = withDefaults(
  defineProps<{
    type?: number // 1-孩子账号 2-设备
    top?: number // 顶部距离
  }>(),
  {
    type: 1,
    top: 0,
  },
)
const OSS_URL = import.meta.env.VITE_OSS_HOST
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`
const showCustomPopup = ref(false)
const unbind = ref<ChildrenType | DeviceType>()
const dataList = ref<(ChildrenType & DeviceType)[]>([])

const detailInfo = ref<ChildrenType & DeviceType>()

const loadData = () => {
  if (props.type === 1) {
    getParentBindChildApi({ childId: detailInfo.value.child?.id, current: 1, size: 1000 })
      .then(res => {
        dataList.value = res.rows || []
      })
      .catch(res => {
        dataList.value = []
      })
  } else {
    getParentBindDeviceApi({
      simSerialNumber: detailInfo.value.simSerialNumber,
      current: 1,
      size: 1000,
    })
      .then(res => {
        dataList.value = res.rows || []
      })
      .catch(res => {
        dataList.value = []
      })
  }
}
// 解绑
function handleUnbind(i: ChildrenType | DeviceType) {
  showCustomPopup.value = true
  unbind.value = i
}
async function handleConfirmPopup() {
  uni.showLoading({
    title: '解绑中...',
    mask: true,
  })
  if (props.type === 1) {
    await childUnBoundParentApi({
      parentId: (unbind.value as any).parentId,
      childId: detailInfo.value.child?.id,
    })
  } else {
    await parentUnBoundDeviceApi({
      parentId: (unbind.value as any).parentId,
      simSerialNumber: detailInfo.value.simSerialNumber,
    })
  }
  uni.hideLoading()
  loadData()
  showCustomPopup.value = false
}
onLoad(option => {
  detailInfo.value = JSON.parse(decodeURIComponent(option.details))
  loadData()
})
</script>

<template>
  <view class="patriarch_list">
    <view class="container" :style="{ margin: `${top}rpx 0 0 0` }">
      <view class="title">绑定家长</view>
      <view class="scroll-container">
        <view v-if="dataList.length === 0" class="empty_box">
          <Empty content="暂无绑定家长数据哦～" />
        </view>
        <view v-else class="content">
          <view v-for="(i, idx) in dataList" :key="idx" class="patriarch">
            <view class="left">
              <image
                :src="i.parent?.avatar || defaultAvatar"
                mode=""
                class="patriarch_avatar"
              ></image>
              <view>
                <view class="header">
                  <view class="name">{{ i.parent.name }}</view>
                  <view class="tag">
                    <text v-if="i.adminFlag === 1" class="tag_item manager">管理员</text>
                    <text class="tag_item relation">{{
                      useRelation1[i.identityType as keyof typeof useRelation1]
                    }}</text>
                  </view>
                </view>
                <view class="phone"> {{ maskPhone(i.parent.phone) }} </view>
              </view>
            </view>
            <view class="right"
              ><button class="unbind_btn" @click="handleUnbind(i as any)">解绑</button></view
            >
          </view>
        </view>
      </view>
    </view>
    <CustomPopup
      v-model="showCustomPopup"
      titleText="温馨提示"
      @handleConfirmBtn="handleConfirmPopup"
    >
      <view class="popup_box">
        <text v-if="type === 1" class="tip">
          确认解绑该账号？解绑后该家长<br />无法查看孩子的学情报告等数据
        </text>
        <text v-else class="tip"> 确认解绑该账号？解绑后该家长<br />无法查看该设备的情况</text>
      </view>
    </CustomPopup>
  </view>
</template>

<style lang="scss" scoped>
.patriarch_list {
  .container {
    display: flex;
    flex-direction: column;
  }

  .scroll-container {
    margin-top: 20rpx;
  }

  .empty_box {
    .empty {
      margin-top: 0 !important;
    }
  }
  .popup_box {
    margin: 50rpx 0;
    display: flex;
    justify-content: center;
    .tip {
      display: block;
      margin: auto;
      text-align: left;
    }
  }
  .title {
    margin: 0 0 10rpx 30rpx;
    font-size: 30rpx;
    color: #333;
    font-weight: 400;
    line-height: 45rpx;
  }
  .patriarch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .left {
      display: flex;
      align-items: center;
      .patriarch_avatar {
        margin-right: 20rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }

      .header {
        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;
        }
        .tag {
          display: flex;
          align-items: center;

          &_item {
            display: inline-block;
            margin-left: 10rpx;
            border-radius: 6rpx;
            padding: 0 8rpx;
            color: #ffffff;
            font-size: 22rpx;
            line-height: 30rpx;
            font-weight: 400;
          }
          .manager {
            background-color: #46b4c1;
          }
          .relation {
            background-color: #ffbe70;
          }
        }
      }
      .phone {
        font-size: 26rpx;
        line-height: 39rpx;
        color: #666666;
      }
    }
  }

  .unbind_btn {
    width: 106rpx;
    height: 60upx;
    background-color: #efefff;
    color: #615dff;
    border-radius: 10rpx;
    font-size: 26rpx;
    font-weight: 500;
    white-space: nowrap;
  }
}
</style>
