<template>
  <view class="page">
    <BackBar title="绑定申请" />
    <Empty v-if="bindApplyList?.length === 0" content="暂无申请数据哦~" />
    <template v-else>
      <swiper :current="current" class="swiper_box" disable-touch>
        <swiper-item v-for="(item, index) in bindApplyList" :key="index">
          <view class="userInfo">
            <image
              :src="item?.initiatingUserAvatar || defaultAvatar"
              mode=""
              class="avatar"
            ></image>
            <view class="nikename">{{ item?.initiatingUserName }}</view>
            <view class="phone">({{ item?.initiatingUserPhone }})</view>
          </view>
          <view v-if="item?.bindType === 1" class="binding">
            <view class="binding_title"> 申请绑定孩子账号 </view>
            <view class="binding_info">
              <view class="title">亲子关系</view>
              <view class="relationship">
                <view class="user">
                  <image
                    :src="item?.childUserAvatar || defaultAvatar"
                    mode="scaleToFill"
                    class="avatar"
                  />
                  <text class="accountNumber">{{ item?.childUserName }}</text>
                </view>
                <image
                  class="gling"
                  :src="`${OSS_URL}/urm/bindDevice/gling.png`"
                  mode="scaleToFill"
                />
                <template v-for="i in useRelation" :key="i.id">
                  <view v-if="item?.identityType && i.id === item?.identityType" class="user">
                    <image :src="i.icon" mode="scaleToFill" class="avatar" />
                    <text class="accountNumber">{{ i.name }}</text>
                  </view>
                </template>
              </view>
            </view>
          </view>
          <view v-if="item?.bindType === 0" class="binding">
            <view class="binding_title"> 申请绑定设备 </view>
            <view class="binding_info">
              <view class="title">设备信息</view>
              <view class="equipment">
                序列号：
                <text class="equipment_serial">
                  {{ item?.simSerialNumber }}
                </text>
              </view>
            </view>
          </view>
          <view class="btn">
            <button class="single btn_save" @click="subFun(true, item.id)">同意</button>
            <button class="single btn_quit" @click="subFun(false, item.id)">拒绝</button>
          </view>
          <view
            class="switch"
            :style="{ 'padding-top': item?.bindType === 0 ? '152rpx' : '20rpx' }"
          >
            <image
              :src="
                current === 0
                  ? `${OSS_URL}/iconfont/disabled_page_icon.png`
                  : `${OSS_URL}/iconfont/pre_page_icon.png`
              "
              mode="scaleToFill"
              class="switch_btn"
              @click="switchPage('pre')"
            />
            <image
              :src="
                current === bindApplyList.length - 1
                  ? `${OSS_URL}/iconfont/disabled_page_icon.png`
                  : `${OSS_URL}/iconfont/pre_page_icon.png`
              "
              mode="scaleToFill"
              class="switch_btn rotate"
              @click="switchPage('next')"
            />
          </view>
        </swiper-item>
      </swiper>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { BindApplyItemType } from '../interface';
import { adminApproval } from '@/api';

import { maskPhone, useRelation, debounce } from '@/hooks';
import Empty from '@/components/Empty/index.vue';
import { bindApplyStore } from '@/store';
import { storeToRefs } from 'pinia';

const { bindApplyList } = storeToRefs(bindApplyStore());
const { getApplyBindInfoList } = bindApplyStore();
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const defaultAvatar = `${OSS_URL}/urm/default_avatar.png`;
const current = ref(0);

const showData = ref<BindApplyItemType>();

async function handleBtnFn(e: boolean, id: string) {
  adminApproval({
    approvalFlag: e,
    id: id,
  }).then(async res => {
    uni.showToast({
      title: '提交成功！',
      icon: 'none',
      mask: true,
    });
    await getApplyBindInfoList();
    if (current.value >= bindApplyList.value.length) {
      current.value = bindApplyList.value.length > 0 ? bindApplyList.value.length - 1 : 0;
    }
    showData.value = bindApplyList.value.length > 0 ? bindApplyList.value[current.value - 1] : {};
  });
}
const subFun = debounce(handleBtnFn, 500);
function switchPage(type) {
  switch (type) {
    case 'pre':
      if (current.value > 0) {
        current.value -= 1;
        showData.value = bindApplyList.value[current.value];
      }
      break;
    case 'next':
      if (current.value < bindApplyList.value.length - 1) {
        current.value += 1;
        showData.value = bindApplyList.value[current.value];
      }
      break;
  }
}

onMounted(async () => {
  await getApplyBindInfoList();

  showData.value = bindApplyList.value.length > 0 ? bindApplyList.value[0] : {};
});
</script>

<style lang="scss" scoped>
.page {
  padding: 0 30rpx 30rpx 30rpx;
  // padding: 30rpx;
  .swiper_box {
    height: 100vh;
  }
  .userInfo {
    margin-top: 20rpx;
    text-align: center;

    .avatar {
      margin: 30rpx 0 0 0;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .nikename {
      margin: 20rpx 0 10rpx 0;
      font-size: 30rpx;
      line-height: 32rpx;
      color: rgba(51, 51, 51, 1);
    }

    .phone {
      font-size: 28rpx;
      line-height: 32rpx;
      color: rgba(169, 170, 181, 1);
    }
  }

  .binding {
    margin: 30rpx 0 100rpx;

    &_title {
      text-align: center;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-size: 32rpx;
      line-height: 32rpx;
    }

    &_info {
      margin-top: 50rpx;
      padding: 30rpx 69rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .title {
        margin-bottom: 30rpx;
        text-align: center;
        color: rgba(51, 51, 51, 1);
        font-weight: 500;
        font-size: 30rpx;
        line-height: 45rpx;
      }

      .equipment {
        color: rgba(134, 134, 134, 1);
        font-size: 28rpx;
        line-height: 60rpx;
        margin-left: -39rpx;

        &_serial {
          color: rgba(51, 51, 51, 1);
        }
      }
      .relationship {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .user {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 30upx;

          .avatar {
            width: 100rpx;
            height: 100rpx;
          }
          .accountNumber {
            margin-top: 20upx;
            font-size: 30upx;
            color: rgba(102, 102, 102, 1);
            max-width: 182rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }

        .gling {
          width: 40upx;
          height: 8upx;
        }
      }
    }
  }

  .btn {
    .single {
      margin: 0 0 40rpx 0;
      width: 690rpx;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 30rpx;
      border-radius: 20rpx;

      &::after {
        border: none;
      }
    }

    &_save {
      background-color: rgba(97, 93, 255, 1);
      color: #fff;
    }

    &_quit {
      background-color: rgba(239, 239, 255, 1);
      color: rgba(97, 93, 255, 1);
    }
  }
  .switch {
    display: flex;
    justify-content: center;

    &_btn {
      width: 80rpx;
      height: 80rpx;
      &:first-child {
        margin-right: 100rpx;
      }
    }
    .rotate {
      transform: rotate(180deg);
    }
  }
}
</style>
