<template>
  <JeepayWrapper>
    <view class="page-wrapper">
      <!-- 顶部自定义导航栏 -->
      <JHeaderTitle title="云打印详情" :bgColor="header.bgColor" color="#fff" imgUrl="/static/iconImg/left-white.svg" />

      <JEquiCode
        bgImg="/static/equipmentImg/big-print.svg"
        icon="/static/equipmentImg/print-white.svg"
        :qrcAlias="params.deviceName"
        :qrcId="params.deviceNo"
        @editInfo="editInfo"
      />

      <!-- 信息板块 -->
      <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="params.deviceName" pd="15rpx 40rpx" />

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

        <JInput name="设备厂商" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="providerObj[params.provider]" pd="15rpx 40rpx" />

        <JInput name="打印联数" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="data.printNum" pd="15rpx 40rpx" />

        <JInput name="打印参数" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="data.printState" 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">
            {{ params.state ? '启用' : '禁用' }}
            <switch :checked="params.state" style="margin-left: 20rpx; transform: scale(1.2)" color="#BF80FF" @change="switchChange" />
          </view>
        </JInput>
      </JMainCard>
      <view class="title">绑定/划拨信息</view>
      <!-- 绑定商户 未绑定商户状态 -->
      <JMainCard wrapPd="30rpx 50rpx" bgColor="rgba(0,0,0,0.2)" pd="0" v-if="!params.bindState && params.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="params.isSelf && !params.bindState">
        <JInput icon="/static/iconImg/icon-assign.svg" @tap="selectedAgent.open()" :isBorder="true" name="划拨至代理" textColor="#fff" size="33rpx" :img="true" />
      </JMainCard>
      <template v-if="!params.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="params.agentName" pd="15rpx 40rpx" />

          <JInput name="代理商号" textColor="rgba(255, 255,255, 0.6)" :isBorder="true" size="30rpx" :right="params.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="params.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="params.mchName" pd="15rpx 40rpx" />

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

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

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

          <JInput bgColor="rgba(0,0,0,0.2)" icon="/static/equipmentImg/bind.svg" @tap="unbound" :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>

      <!-- 更改绑定状态对话框 -->
      <jeepayConfirm ref="switchStatePopup" />
      <!-- 更改状态对话框 -->
      <jeepayConfirm ref="switchState" />
      <!-- 商户选择弹窗 -->
      <JDeletedTips ref="refTakeBack" @confirm="takeBack" />
      <JDeletedTips ref="refAgain" @confirm="selectedAgent.open()" />
      <SelectedAgent ref="selectedAgent" @confirm="again" />
    </view>
  </JeepayWrapper>
</template>

<script setup>
import { onLoad, onBackPress, onPageScroll, onShow } from '@dcloudio/uni-app'
import providerObj from '@/util/providerObj.js'
import { ref, reactive, toRaw, nextTick } from 'vue'
import { $updateDeviceDetail, $bindDevice, $getDeviceDetail, $getMerList, $getMchStoreList, $getMchAppList, $getQRcodeList, $allotORtakeBack } from '@/http/apiManager.js'

import JPopup from '@/components/newComponents/JPopup/JPopup.vue'
import jeepayConfirm from '@/components/jeepayConfirm/jeepayConfirm.vue'
import JEquiCode from '@/components/newComponents/JEquipment/JEquiCode.vue' // 设备信息
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle.vue' // 导航栏
import JEquipmentCode from '@/components/newComponents/JEquipment/JEquipmentCode.vue' // 设备信息
import JMainCard from '@/components/newComponents/JMainCard/JMainCard.vue' // 卡片
import JInput from '@/components/newComponents/JInput/JInput.vue'
import JLine from '@/components/newComponents/JLine/JLine.vue'
import JScroll from '@/components/newComponents/JScroll/JScroll.vue'
import JButton from '@/components/newComponents/JButton/JButton.vue'
import JPreview from '@/components/newComponents/JPreview/JPreview.vue'
import SelectedAgent from './components/SelectedAgent.vue'
import JDeletedTips from '@/components/newComponents/JDeletedTips/JDeletedTips'

const data = reactive({
  printState: '', // 打印参数 1. 仅打印 2. 仅播报 3.打印并播报
  printNum: '', // 打印联数
  deviceType: '', //设备类型 云打印=2
  state: false,
  deviceNo: '',
  arrowImage: '../../static/img/arrow-right-gray.svg',
  radioShow: false, //控制绑定结果的显示
  cardList: [],
  bindCard: false, //绑定到码牌还是门店
})
const params = ref({}) // 传参对象
const switchStatePopup = ref()
const searchMch = ref()
const searchStore = ref()
const searchApp = ref()
const switchState = ref()
const refTakeBack = ref(null)
const refAgain = ref(null)
const selectedAgent = ref(null)
onLoad((options) => {
  data.deviceType = options.deviceType
  data.deviceNo = options.deviceId
})

onShow(() => {
  nextTick(() => {
    getDetails()
  })
})
const getDetails = () => {
  $getDeviceDetail(data.deviceNo).then(({ bizData }) => {
    params.value = bizData
    params.value.bizConfigParams = JSON.parse(bizData.bizConfigParams)

    data.state = bizData.state
    data.printNum = params.value.bizConfigParams.printNum
    // 打印参数 1. 仅打印 2. 仅播报 3.打印并播报
    switch (params.value.bizConfigParams.printMode) {
      case 1:
        data.printState = '仅打印'
        break
      case 2:
        data.printState = '仅播报'
        break
      case 3:
        data.printState = '播报并打印'
        break
      default:
        null
    }
  })
}
// 切换状态
function switchChange(e, item) {
  params.value.state = Number(e.detail.value)
  switchState.value.comfirmOpen(
    () => {
      $updateDeviceDetail(params.value.deviceId, { state: params.value.state })
    },
    undefined,
    () => {
      params.value.state = Number(!e.detail.value)
    }
  )
}

// 跳转至绑定页
const bindMch = () => {
  uni.navigateTo({ url: './publicBind?id=' + params.value.deviceId + '&tag=device&title=云打印机绑定' })
}

// 跳转至编辑信息
const editInfo = () => {
  uni.navigateTo({
    url: './editPrint?id=' + params.value.deviceId,
  })
}

// 解绑函数 打开提示弹窗
function unbound() {
  switchStatePopup.value.comfirmOpen(
    () => {
      $updateDeviceDetail(params.value.deviceId, { bindState: 0 }).then(({ bizData }) => {
        uni.showToast({
          icon: 'none',
          title: '解绑成功',
        })
        uni.navigateBack({
          delta: 1,
        })
      })
    },
    '解绑后商户将无法使用该设备!',
    () => {}
  )
}
const takeBack = () => {
  const data = {
    agentNo: params.value.agentNo,
    allotDeviceIds: params.value.deviceId,
    allotOrRecover: 'recover',
    allotType: 'select',
  }
  $allotORtakeBack(data).then((res) => {
    uni.showToast({ title: '收回成功', icon: 'success' })
    getDetails()
  })
}
// 重新划拨
const again = (e) => {
  const data = {
    agentNo: e.text,
    allotDeviceIds: params.value.deviceId,
    allotOrRecover: 'allot',
    allotType: 'select',
  }
  $allotORtakeBack(data).then((res) => {
    uni.showToast({ title: '划拨成功', icon: 'success' })
    getDetails()
    selectedAgent.value.close()
  })
}
// 监听页面滚动 用于给自定义导航栏换背景色
const header = reactive({ bgColor: 'transparent' })
onPageScroll((data) => {
  if (data.scrollTop > 20) {
    header.bgColor = '$primaryColor'
  } else {
    header.bgColor = 'transparent'
  }
})
</script>

<style scoped lang="scss">
.page-wrapper {
  min-height: 100vh;
  background: $primaryColor;
}
.title {
  margin-top: 20rpx;
  font-size: 33rpx;
  font-weight: 500;
  text-align: center;
  color: #fff;
}
</style>
