<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    :title="vdata.isAdd ? '新增二维码' : '修改二维码' "
    width="40%"
    @close="onClose"
  >
    <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.saveObject" :rules="saveRule">
      <a-row v-if="vdata.isAdd">
        <a-form-item label="批次号" name="batchId">
          <a-input-number v-model:value="vdata.saveObject.batchId" style="width:70%; margin-right: 20px;" /> 
          <a-button type="primary" size="small" @click="resetBatchId">今天</a-button>
          <p class="jeepay-tip-text">( 数字格式， 二维码编号的前缀， 建议采用： YYMMDD+次数表示 )</p>
        </a-form-item>
      </a-row>

      <a-row v-if="vdata.isAdd">
        <a-form-item label="创建数量" name="addNum">
          <a-input-number v-model:value="vdata.saveObject.addNum" />
        </a-form-item>
      </a-row>

      <a-row v-if="vdata.isAdd">
        <a-form-item label="选择模板" name="qrcShellId">
          <a-select v-model:value="vdata.saveObject.qrcShellId" placeholder="选择模板" style="width: 200px;">
            <a-select-option value="">无</a-select-option>
            <template v-for="item in vdata.qrcShellList" :key="item.sid">
              <a-select-option :value="item.sid">{{ item.shellAlias }} <img :src="item.shellImgViewUrl" style="width: 20px"> </a-select-option>
            </template>
          </a-select>
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item label="状态" name="qrcState">
          <a-radio-group v-model:value="vdata.saveObject.qrcState">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item label="固定金额" name="fixedFlag">
          <a-radio-group v-model:value="vdata.saveObject.fixedFlag">
            <a-radio :value="0">任意金额</a-radio>
            <a-radio :value="1">固定金额</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item v-if="vdata.saveObject.fixedFlag" label="" name="fixedPayAmount">
          <a-input-number v-model:value="vdata.saveObject.fixedPayAmount" :precision="2" style="width: 130px" /> 元
        </a-form-item>
      </a-row>

      <a-row>
        <a-form-item v-if="vdata.isAdd" label="选择页面类型" name="entryPage">
          谨慎选择， 一经填写不可变更。
          <a-radio-group v-model:value="vdata.saveObject.entryPage">
            <a-radio :value="'default'">默认(未指定，取决于二维码是否绑定到微信侧)</a-radio>
            <a-radio :value="'h5'">固定H5页面</a-radio>
            <a-radio :value="'lite'">固定小程序页面</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>
      
      <a-row>
        <a-form-item label="支付宝支付方式(仅H5呈现时生效)" name="alipayWayCode">
          <a-radio-group v-model:value="vdata.saveObject.alipayWayCode">
            <a-radio :value="'ALI_JSAPI'">ALI_JSAPI</a-radio>
            <a-radio :value="'ALI_WAP'">ALI_WAP</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>

import {API_URL_MCH_QR_CODE_LIST, API_URL_QRC_SHELL_LIST, req} from '@/api/manage'
import {defineProps, reactive, ref, getCurrentInstance} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import {formatDate} from '@/utils/util'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


// 定义组件参数
const props = defineProps({
  callbackFunc: {type: Function, default: () => {}}
})

// 定义ref对象
const infoFormModel = ref()

const saveRule = {
  addNum: [ruleGenerator.requiredInput('创建数量', 'number'), { type: 'number', max: 500, min: 1, message: '数量请介于1-100之间' }],
  batchId:[ruleGenerator.requiredInput('批次号', 'number'), { type: 'number', min: 1, message: '请输入正确的批次号' }],
  appId: [{ required: true, message: '请选择应用', trigger: 'blur' }],
  fixedPayAmount: [{ required: true, message: '请输入固定金额', trigger: 'blur', type: 'number', min: 0.01 }],
}


const vdata : any = reactive({

  btnLoading: false,
  isAdd: true, // 新增 or 修改页面标志
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
  saveObject: {}, // 数据对象
  qrcShellList: []

})


// 弹层打开事件
function show(recordId, mchNo) {

  // 查询全部模板信息
  req.list(API_URL_QRC_SHELL_LIST, {pageSize: -1}).then((res) => {
    vdata.qrcShellList = res.records
  })


  vdata.isAdd = !recordId
  vdata.saveObject = {addNum: 1, qrcState: 1, fixedFlag: 0, entryPage: 'default', alipayWayCode: 'ALI_JSAPI' } // 重置清空
  resetBatchId()

  // 重置表单验证规则
  if (infoFormModel.value) {
    infoFormModel.value.resetFields()
  }

  // 修改弹层
  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.recordId = recordId
    req.getById(API_URL_MCH_QR_CODE_LIST, recordId).then(res => {
      vdata.saveObject = res
      vdata.saveObject.fixedPayAmount = vdata.saveObject.fixedPayAmount / 100
      vdata.visible = true
    })
  } else {
    vdata.visible = true // 立马展示弹层信息
  }
}

// 点击 【保存】按钮的事件
function handleOkFunc(){

  vdata.btnLoading = true
  infoFormModel.value.validate().then(() => {

    if(vdata.isAdd){

      req.add(API_URL_MCH_QR_CODE_LIST, vdata.saveObject).then( res => reqSuccessFunc() ).finally(() => vdata.btnLoading = false)

    }else{

      req.updateById(API_URL_MCH_QR_CODE_LIST, vdata.recordId, vdata.saveObject).then( res => reqSuccessFunc() ).finally(() => vdata.btnLoading = false)
    }
  })

}

// 接口请求成功的处理函数
function reqSuccessFunc(){
  $infoBox.message.success( vdata.isAdd ? '新增成功' : '更新成功')
  vdata.visible = false
  props.callbackFunc() // 刷新列表
}


function onClose() {
  vdata.visible = false
}

function resetBatchId(){
  vdata.saveObject.batchId = parseInt(formatDate('YYMMDD00'))
}


defineExpose({show})
</script>
