<template>
  <view class="page-wrapper global-wrapper">
    <JHeaderTitle title="刷脸设备详情" bgColor="transparent" color="#fff" imgUrl="/static/iconImg/left-white.svg" />
    <image src="/pageWork/static/images/face-bg.svg" class="bg-image" mode="scaleToFill" />
    <view class="expand-header">
      <image src="/pageWork/static/images/icon-face-white.svg" mode="scaleToFill" />
      <view class="expand-title">{{ vdata.deviceName }}</view>
      <view class="expand-phone">{{ vdata.deviceId }}</view>
    </view>
    <!-- 信息板块 -->
    <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="25rpx 0">
      <JInput name="设备名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.deviceName" pd="15rpx 40rpx" />

      <JInput name="设备号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.deviceId" pd="15rpx 40rpx" />

      <JInput
        name="设备厂商"
        textColor="rgba(255, 255,255, 0.6)"
        :isBorder="true"
        size="30rpx"
        :right="vdata.provider == 'wxpayQWPro' ? '青蛙刷脸Pro' : '蜻蜓F4'"
        pd="15rpx 40rpx"
      />

      <JInput name="设备状态" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx">
        <view style="color: #fff; maggin-right: 16rpx; font-size: 30rpx" class="dis-wrapper">
          {{ vdata.state ? '启用' : '禁用' }}
          <switch :checked="vdata.state" style="margin-left: 20rpx; transform: scale(1.2)" color="#BF80FF" @change="stateChange" />
        </view>
      </JInput>
    </JMainCard>
    <view class="title">绑定/划拨信息</view>
    <!-- 绑定商户 未绑定商户状态 -->
    <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.2)" pd="0" v-if="!vdata.bindState && vdata.isSelf">
      <JInput icon="/pageWork/static/images/bindMch.svg" @tap="bindMch" :isBorder="true" name="绑定至商户" textColor="#fff" size="33rpx" :img="true" />
    </JMainCard>
    <JMainCard wrapPd="0 50rpx" bgColor="rgba(0,0,0,0.2)" pd="0" v-if="vdata.isSelf && !vdata.bindState">
      <JInput icon="/static/iconImg/icon-assign.svg" @tap="selectedAgent.open()" :isBorder="true" name="划拨至代理" textColor="#fff" size="33rpx" :img="true" />
    </JMainCard>
    <template v-if="!vdata.isSelf">
      <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="0">
        <JInput name="代理商名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.agentName" pd="15rpx 40rpx" />

        <JInput name="代理商号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.agentNo" pd="15rpx 40rpx" />

        <JInput
          bgColor="rgba(0,0,0,0.2)"
          icon="/static/iconImg/icon-takeBack.svg"
          @tap="refTakeBack.open('收回后代理商将无法使用该设备！')"
          :isBorder="true"
          name="收回"
          textColor="#fff"
          size="33rpx"
          :img="true"
        />

        <JInput
          bgColor="rgba(0,0,0,0.2)"
          icon="/static/iconImg/icon-assign.svg"
          @tap="refAgain.open('确认重新划拨吗？')"
          name="重新划拨"
          borderBg="#7737fe"
          textColor="#fff"
          size="33rpx"
          :img="true"
        />
      </JMainCard>
    </template>
    <template v-if="vdata.bindState">
      <view class="bind-title">绑定信息</view>
      <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.1)" pd="0">
        <JInput name="商户" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.mchName" pd="15rpx 40rpx" />

        <JInput name="用户号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="vdata.mchNo" pd="15rpx 40rpx" />

        <JInput name="门店" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.storeName" />

        <JInput name="门店ID" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.storeId" />

        <JInput name="应用名称" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.appName" />

        <JInput name="AppID" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" pd="15rpx 40rpx" :right="vdata.appId" />

        <JInput
          bgColor="rgba(0,0,0,0.2)"
          icon="/static/equipmentImg/bind.svg"
          @tap="switchStatePopup.open('解绑后商户将无法使用该设备！')"
          :isBorder="true"
          name="解绑"
          textColor="#fff"
          size="33rpx"
          :img="true"
        />

        <JInput bgColor="rgba(0,0,0,0.2)" icon="/static/equipmentImg/bind-again.svg" @tap="bindMch" name="重新绑定" borderBg="#7737fe" textColor="#fff" size="33rpx" :img="true" />
      </JMainCard>
    </template>
  </view>
  <jeepayConfirm ref="refConfirm" />
  <JDeletedTips ref="switchStatePopup" @confirm="unbound" />
  <SelectedAgent ref="selectedAgent" @confirm="again" />
  <JDeletedTips ref="refTakeBack" @confirm="takeBack" />
  <JDeletedTips ref="refAgain" @confirm="selectedAgent.open()" />
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, reactive, nextTick } from 'vue'
import { $faceDetails, $unBind, $allotORtakeBack, $updateFace, $updateDeviceDetail } from '@/http/apiManager'
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
import JInput from '@/components/newComponents/JInput/JInput'
import JMainCard from '@/components/newComponents/JMainCard/JMainCard.vue' // 卡片
import JDeletedTips from '@/components/newComponents/JDeletedTips/JDeletedTips'
import SelectedAgent from '../deviceManagement/components/SelectedAgent.vue'
const refConfirm = ref(null)
const switchStatePopup = ref(null)
const selectedAgent = ref(null)
const refTakeBack = ref(null)
const refAgain = ref(null)
const vdata = reactive({})
let id = undefined //设备Id
onLoad((options) => {
  id = options.deviceId
})
onShow(() => {
  if (id) {
    getDetails()
  }
})
const getDetails = () => {
  $faceDetails(id).then(({ bizData }) => {
    if (!bizData.isSelf) bizData.isSelf = false
    Object.assign(vdata, bizData)
  })
}
// 切换状态
const stateChange = (e) => {
  vdata.state = Number(e.detail.value)
  refConfirm.value.comfirmOpen(
    () => {
      $updateFace(vdata).then((res) => {
        uni.showToast({
          title: '修改成功',
          icon: 'success|none',
          mask: true,
        })
      })
    },
    '确认修改状态吗？',
    () => {
      vdata.state = Number(!e.detail.value)
    }
  )
}

// 跳转至绑定页
const bindMch = () => {
  uni.navigateTo({ url: '../deviceManagement/publicBind?id=' + vdata.deviceId + '&tag=pos&title=刷脸设备绑定' })
}

// 解绑函数 打开提示弹窗
function unbound() {
  $updateDeviceDetail(vdata.deviceId, { bindState: 0 }).then(({ bizData }) => {
    uni.showToast({
      icon: 'none',
      title: '解绑成功',
    })
    uni.navigateBack()
  })
}
// 重新划拨
const again = (e) => {
  const data = {
    agentNo: e.text,
    allotDeviceIds: vdata.deviceId,
    allotOrRecover: 'allot',
    allotType: 'select',
  }
  $allotORtakeBack(data).then((res) => {
    nextTick(() => {
      getDetails()
    })
    uni.showToast({ title: '划拨成功', icon: 'success' })
    selectedAgent.value.close()
  })
}
// 收回划拨设备
const takeBack = () => {
  const data = {
    agentNo: vdata.agentNo,
    allotDeviceIds: vdata.deviceId,
    allotOrRecover: 'recover',
    allotType: 'select',
  }
  $allotORtakeBack(data).then((res) => {
    getDetails()
    uni.showToast({ title: '收回成功', icon: 'success' })
  })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  position: relative;
  background-color: $primaryColor;
  .bg-image {
    position: absolute;
    top: -40rpx;
    right: 0;
    width: 100%;
    height: 650rpx;
  }
  .expand-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50rpx;
    image {
      width: 93rpx;
      height: 93rpx;
    }
    .expand-title {
      width: 500rpx;
      margin: 20rpx auto 0;
      word-break: break-all;
      text-align: center;
      font-size: 33rpx;
      font-weight: 700;
      color: #fff;
    }

    .expand-phone {
      margin: 30rpx 0;
      color: rgba(255, 255, 255, 0.6);
      font-size: 25rpx;
    }
    .expand-edit {
      position: relative;
      z-index: 30;
      padding: 20rpx 41rpx;
      font-size: 28rpx;
      color: $primaryColor;
      image {
        width: 26.25rpx;
        height: 26.25rpx;
      }
    }
  }
}

.title {
  margin-top: 20rpx;
  font-size: 33rpx;
  font-weight: 500;
  text-align: center;
  color: #fff;
}
</style>
