<template>
  <view>
    <JHeaderTitle title="编辑信息" bgColor="transparent" />

    <JMainCard pd="0" wrapPd="30rpx">
      <JInput name="设备名称" :isBorder="true" v-model:value="vdata.deviceName" place="请输入设备名称" />
    </JMainCard>

    <JMainCard pd="0" wrapPd="0 30rpx 40rpx 30rpx">
      <JInput name="打印联数" :isBorder="true" type="number" v-model:value="printNum" place="请输入打印联数" />
    </JMainCard>

    <JMainCard pd="0" wrapPd="0 30rpx 40rpx 30rpx">
      <JInput name="打印参数" :isBorder="true" :img="true">
        <view @tap="change">{{ printModeText[vdata.bizConfigParams?.printMode] || "请选择" }}</view>
      </JInput>
    </JMainCard>

    <JPopup ref="JPopupRef">
      <JMainCard pd="0 0 30rpx 0" wrapPd="30rpx">
        <JLine
          iconOn="/pageWork/static/images/no-fixed-on.svg"
          iconClose="/pageWork/static/images/no-fixed-close.svg"
          name="仅打印"
          :isBorder="true"
          :isSelect="printMode == 1"
          @tap="changeAmount('仅打印', 1)"
        />
        <JLine
          iconOn="/static/equipmentImg/fixed-on.svg"
          iconClose="/pageWork/static/images/fixed-close.svg"
          name="仅播报"
          :isSelect="printMode == 2"
          @tap="changeAmount('仅播报', 2)"
        />

        <JLine
          iconOn="/static/equipmentImg/fixed-on.svg"
          iconClose="/pageWork/static/images/fixed-close.svg"
          name="打印并播报"
          :isSelect="printMode == 3"
          @tap="changeAmount('播报并打印', 3)"
        />
      </JMainCard>

      <JButton pd="0 30rpx 50rpx 30rpx" bottom="50rpx" color="#303030" bgColor="rgba(255,255,255,0.8)" pdTop="0"
        >取消</JButton
      >
    </JPopup>

    <JButton pd="30rpx" @HandleTouch="preservation">保存</JButton>
  </view>
</template>

<script setup>
import { $upDateQRcodeList, $getDeviceDetail, $updateDeviceDetail } from "@/http/apiManager.js"
import { onLoad } from "@dcloudio/uni-app"
import { ref, reactive, toRaw, computed } from "vue"
import JInput from "@/components/newComponents/JInput/JInput.vue"
import JMainCard from "@/components/newComponents/JMainCard/JMainCard.vue"
import JPopup from "@/components/newComponents/JPopup/JPopup.vue"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" // 导航栏
import JLine from "@/components/newComponents/JLine/JLine.vue"
import JButton from "@/components/newComponents/JButton/JButton.vue"

const vdata = reactive({})
const printMode = ref("") // 打印参数
const printNum = ref("") // 打印联数

onLoad((option) => {
  $getDeviceDetail(option.id).then(({ bizData }) => {
    bizData.deviceName ? null : (bizData.deviceName = "未命名")
    bizData.bizConfigParams = JSON.parse(bizData.bizConfigParams)
    Object.assign(vdata, bizData)

    printNum.value = vdata.bizConfigParams.printNum
    printMode.value = vdata.bizConfigParams.printMode
    // 切换打印参数
    // switch (vdata.bizConfigParams.printMode) {
    //   case 1:
    //     printMode.value = "仅打印"
    //     break
    //   case 2:
    //     printMode.value = "仅播报"
    //     break
    //   case 3:
    //     printMode.value = "播报并打印"
    //     break
    //   default:
    //     null
    // }
  })
})
const printModeText = reactive(["", "仅打印", "仅播报", "播报并打印"])
const JPopupRef = ref(null) // 弹窗组件

// 切换金额
const change = () => JPopupRef.value.open()

// 选择金额
const changeAmount = (data, num) => {
  printMode.value = num
  vdata.bizConfigParams.printMode = num
  JPopupRef.value.close()
}

// 保存
const preservation = () => {
  // 校验 1.设备名称不为空 2.打印联数不为空，并且是数字
  if (!vdata.deviceName) {
    return uni.showToast({ title: "请输入设备名称", icon: "none" })
  }
  if (!printNum.value) {
    return uni.showToast({ title: "请输入打印联数", icon: "none" })
  }
  if (!/^[0-9]*$/.test(printNum.value)) {
    return uni.showToast({ title: "打印联数必须是数字", icon: "none" })
  }

  vdata.bizConfigParams = {
    printMode: printMode.value,
    printNum: printNum.value,
  }
  const params = {}
  params.deviceName = vdata.deviceName
  params.printNum = printNum.value
  params.bizConfigParams = vdata.bizConfigParams
  $updateDeviceDetail(vdata.deviceId, params).then(({ bizData }) => {
    uni.showToast({ icon: "none", title: "保存成功" })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  })
}
</script>

<style lang="scss">
page {
  background: #f2f2f2;
}
.tiptext {
  margin: 10rpx 30rpx 0;
  border-radius: 10rpx;
  background: #f2f2f2;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 27rpx;
  line-height: 46rpx;
}
</style>
