<template>
  <view class="patriarch_list">
    <z-paging
      ref="paging"
      v-model="dataList"
      :paging-style="{ margin: `${top}rpx 30rpx 0 30rpx` }"
      @query="queryList"
    >
      <template #top>
        <view class="title">绑定家长</view>
      </template>
      <template v-slot:empty>
        <view class="empty_box">
          <Empty content="暂无绑定家长数据哦～" />
        </view>
      </template>
      <view v-for="(i, idx) in dataList" :key="idx" class="patriarch">
        <view class="left">
          <image
            :src="i.parentAvatar ? i.parentAvatar : defaultAvatar"
            mode=""
            class="patriarch_avatar"
          ></image>
          <view>
            <view class="header">
              <view class="name">{{ i.parentName }}</view>
              <view class="tag">
                <text v-if="i.adminFlag === 1" class="tag_item manager">管理员</text>
                <text class="tag_item relation">{{ useRelation1[i.identityType] }}</text>
              </view>
            </view>
            <view class="phone"> {{ maskPhone(i.parentPhone) }} </view>
          </view>
        </view>
        <view class="right"><button class="unbind_btn" @click="handleUnbind(i)">解绑</button></view>
      </view>
    </z-paging>
    <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>
<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: 445,
  },
);
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 paging = ref(null);

const detailInfo = ref<ChildrenType | DeviceType>();

const queryList = (pageNo: number, pageSize: number) => {
  if (props.type === 1) {
    getParentBindChildApi({ childId: detailInfo.value.childId, current: pageNo, size: pageSize })
      .then(res => {
        paging.value.complete(res.data.rows);
      })
      .catch(res => {
        paging.value.complete(false);
      });
  } else {
    getParentBindDeviceApi({
      simSerialNumber: detailInfo.value.simSerialNumber,
      current: pageNo,
      size: pageSize,
    })
      .then(res => {
        paging.value.complete(res.data.rows);
      })
      .catch(res => {
        paging.value.complete(false);
      });
  }
};
// 解绑
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.parentId,
      childId: detailInfo.value.childId,
    });
  } else {
    await parentUnBoundDeviceApi({
      parentId: unbind.value.parentId,
      simSerialNumber: detailInfo.value.simSerialNumber,
    });
  }
  uni.hideLoading();
  paging.value.reload();
  showCustomPopup.value = false;
}
onLoad(option => {
  detailInfo.value = JSON.parse(decodeURIComponent(option.details));
});
</script>
<style lang="scss" scoped>
.patriarch_list {
  .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 0;
    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>
