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

    <JMainCard pd="0" wrapPd="30rpx">
      <JInput name="码牌名称" :isBorder="true" v-model:value="vdata.qrcAlias" place="默认为未命名" />
    </JMainCard>

    <JMainCard pd="0" wrapPd="0 30rpx 40rpx 30rpx">
      <JInput name="收款金额" :isBorder="true">
        <view @tap="choice">{{ vdata.fixedFlag == 1 ? "自定义金额" : "任意金额" }}</view>
      </JInput>

      <JInput
        type="digit"
        v-if="vdata.fixedFlag == 1"
        name="自定义金额"
        :img="false"
        place="请输入自定义金额"
        v-model:value="vdata.fixedPayAmount"
      />
    </JMainCard>

    <JPopup ref="JPopupRef">
      <JMainCard pd="0 0 30rpx 0" wrapPd="0 30rpx">
        <JLine
          iconOn="/pageWork/static/images/no-fixed-on.svg"
          iconClose="/pageWork/static/images/no-fixed-close.svg"
          name="任意金额"
          :isBorder="true"
          :isSelect="vdata.fixedFlag != 1"
          @tap="changeAmount(0)"
        />
        <JLine
          iconOn="/static/equipmentImg/fixed-on.svg"
          iconClose="/pageWork/static/images/fixed-close.svg"
          name="自定义金额"
          :isSelect="vdata.fixedFlag == 1"
          @tap="changeAmount(1)"
        />
        <view class="tiptext"> 选择任意金额将不限制码牌收款金额，选择自定义金额，可指定该码牌收款固定金额。 </view>
      </JMainCard>

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

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

<script setup>
import { $upDateQRcodeList, $getQRcodeDetail } from "@/http/apiManager.js"
import { onLoad } from "@dcloudio/uni-app"
import { ref, reactive, toRaw } from "vue"
import valid from "@/hooks/validate"
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({})

onLoad((option) => {
  $getQRcodeDetail(option.id).then(({ bizData }) => {
    bizData.qrcAlias ? null : (bizData.qrcAlias = "未命名")
    bizData.fixedPayAmount = bizData.fixedPayAmount / 100
    Object.assign(vdata, bizData)
  })
})

const JPopupRef = ref(null) // 弹窗组件

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

// 选择金额
const changeAmount = (data) => {
  vdata.fixedFlag = data
  JPopupRef.value.close()
}

// 保存
const preservation = () => {
  let data = JSON.parse(JSON.stringify(toRaw(vdata)))
  // data.fixedPayAmount *= 100 // 金额元转分
  // 校验 1，默认名称为空则默认为 未命名  2. 自定义金额状态，金额不能为0
  if (!data.qrcAlias) {
    data.qrcAlias = "未命名"
  }
  if (!valid.takeMoney(data.fixedPayAmount)) {
    return uni.showToast({
      title: "请输入正确金额正数两位小数",
      icon: "none",
    })
  }
  if (data.fixedFlag == 1 && data.fixedPayAmount <= 0) {
    return uni.showToast({
      title: "自定义金额不能小于等于0",
      icon: "none",
    })
  }

  $upDateQRcodeList(data.qrcId, data).then(({ bizData }) => {
    uni.showToast({ icon: "none", title: "保存成功" })
    uni.navigateBack()
  })
}
</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>
