<template>
    <JeepayBackground :bgColorStyle="{ height: '706rpx' }">
      <JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="刷脸设备详情" backCtrl="back" />
  
      <JeepayTableListItem
        viewClass="list-item-by-detail"
        logo="/pageDevice/static/devIconImg/icon-face-white.svg"
        :title="vdata.deviceName"
        :subtitle="vdata.deviceNo"
        :moreBtnList="list"
      />
  
      <view class="create-time">
        <view class="time-title">设备厂商</view>
        <view class="dev-info">{{ vdata.provider == 'wxpayQWPro' ? '青蛙刷脸Pro' : '蜻蜓F4' }}</view>
      </view>
      <view class="create-time" style="border: none; padding-top: 0">
        <view class="time-title">创建时间</view>
        <view class="time-info">{{ vdata.createdAt }}</view>
      </view>
      <JeepayCard editText="编辑信息" @editTap="toEdit">
        <JeepayDescview>
          <JeepayDescviewItem title="设备编号" :desc="vdata.deviceParams?.deviceNo" />
          <JeepayDescviewItem title="设备名称" :desc="vdata.deviceName" />
          <JeepayDescviewItem title="绑定门店" :desc="vdata.storeName" />
          <JeepayDescviewItem title="绑定应用" :desc="vdata.appName" />
        </JeepayDescview>
      </JeepayCard>
      <JDetailsSwitch title="设备状态" subTitle="状态禁用后，该设备将无法使用">
        <template #titleRight>
          <JeepayStateSwitch v-model:state="vdata.state" :showSwitchType="true" :updateStateFunc="confirmSwitch" />
        </template>
      </JDetailsSwitch>
      <JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
      <JeepayPopupConfirm ref="tips" />
    </JeepayBackground>
  </template>
  
  <script setup>
  import { nextTick, reactive, ref } from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import infoBox from '@/commons/utils/infoBox.js'
  import { reqLoad, API_URL_SYS_DEVICE_LIST, API_URL_SYS_CODE_LIST, $speakTest, $deviceUnbind } from '@/http/apiManager.js'
  import datamap from '@/commons/utils/datamap.js'
  import emit from '@/commons/utils/emit.js'
  import go from '@/commons/utils/go.js'
  // 监听 更新事件
  onUnload(() => uni.$off(emit.ENAME_REF_FACE_DETAIL))
  uni.$on(emit.ENAME_REF_FACE_DETAIL, function (data) {
    getDetails(vdata.deviceId)
  })
  
  onLoad((options) => {
    getDetails(options.deviceId)
  })
  const more = ref(null)
  const tips = ref(null)
  const popupDialog = ref(null)

  const vdata = reactive({
  
  })
  
  const list = reactive([
    { label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: confirm },
  ])
  function confirm() {
    more.value.close()
    tips.value
      .open('确认解除绑定吗？', { confirmColor: '#FF5B4C' })
      .then((res) => {
        $deviceUnbind(vdata.deviceId).then((res) => {
          infoBox.showSuccessToast('解绑成功').then(() => {
            go.back(1, emit.ENAME_REF_QRC_LIST)
          })
        })
      })
      .catch((err) => {
        console.log(err);
        more.value.open('remove')
      })
  }
  const typeList = [
    { label: '门店所有订单', value: 0 },
    { label: '来自受支持码牌的订单', value: 1 },
  ]
  const getDetails = (params) => {
    reqLoad.getById(API_URL_SYS_DEVICE_LIST, params).then(({ bizData }) => {
      Object.assign(vdata, bizData)
  
      vdata.deviceParams = JSON.parse(vdata.deviceParams || '{}')
    })
  }
  // 修改设备状态
  const confirmSwitch = (bol) => {
    return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { state: bol }).then((res) => {
      emit.refPageAndSearchEmit(emit.ENAME_REF_SPEAKER_LIST)
    })
  }
  
  // 去编辑页面
  const toEdit = () => {
    go.to('PAGES_APP_FACE_EDIT', { devId: vdata.deviceId })
  }
  </script>
  
  <style lang="scss" scoped>
  .create-time {
    display: flex;
    justify-content: space-between;
    margin: 0 75rpx;
    padding: 50rpx 0;
    font-size: 30rpx;
    border-top: 1rpx solid rgba(255, 255, 255, 0.2);
    .time-title {
      color: rgba(255, 255, 255, 0.7);
    }
    .time-info {
      color: #fff;
    }
  }
  .store-info {
    padding: 0.1rpx;
    margin: 0 35rpx;
    background-color: #fff;
    border-radius: $J-b-r32;
    overflow: hidden;
  }
  .default-img {
    width: 50rpx;
    height: 50rpx;
  }
  
  .dev-info {
    padding: 3rpx 15rpx;
    border-radius: 6rpx;
    background: rgba(255, 255, 255, 0.15);
    font-size: 26rpx;
    color: #fff;
  }
  .selected-qrcId {
    width: 40rpx;
    height: 40rpx;
    transform: rotate(90deg);
  }
  </style>
  