<template>
    <a-drawer
        v-model:visible="vdata.isShow"
        :title=" vdata.isAdd ? '新增分账模版' : '修改分账模版' "
        :confirmLoading="vdata.confirmLoading"
        @ok="handleOkFunc"
        @close="onClose"
        width="50%"
    >
    <a-form ref="infoFormModel" layout="vertical" :model="vdata.saveObject" :label-col="{span: 6}" :wrapper-col="{span: 15}" :rules="vdata.rules">
      <a-form-item label="分账模版名称：" name="name">
        <a-input v-model:value="vdata.saveObject.name" placeholder="请输入分账模版名称" />
      </a-form-item>
      <a-form-item label="支付通道：" name="ifCode">
          <a-select v-model:value="vdata.saveObject.ifCode" placeholder="支付通道" @change="getIfCode">
            <a-select-option  v-for="item in vdata.payDefines" :key="item.ifCode" :value="item.ifCode"   :disabled="item.ifCode != 'yspay' && item.ifCode != 'dgpay'">{{ item.ifName }}</a-select-option>
          </a-select>
      </a-form-item>
      <a-form-item label="分账模式：" name="divisionMode" >
        <div style="display: grid;">
          <a-radio-group v-model:value="vdata.saveObject.divisionMode">
            <a-radio  v-for="item in vdata.modeList" :key="item.value" :value="item.value" >
              {{ item.name }}
            </a-radio>
          </a-radio-group>
          <span class="jeepay-tip-text" v-if="vdata.saveObject.divisionMode == 0">({{ vdata.saveObject.ifCode === 'yspay'?'默认分账比例为30%，最高可申请至100%':vdata.saveObject.ifCode === 'dgpay'?'分账比例最高为30%':'' }})</span>
        </div>
      </a-form-item>

      <a-form-item label="最小支付金额：" name="minAmount" v-if="vdata.saveObject.divisionMode == 1">
        <a-input v-model:value="vdata.saveObject.minAmount" placeholder="请输入最小支付金额" :precision="2" :min="0"/>
      </a-form-item>
      <a-form-item label="分账金额：" name="divisionAmount" v-if="vdata.saveObject.divisionMode == 1">
        <a-input v-model:value="vdata.saveObject.divisionAmount" placeholder="请输入分账金额" :precision="2" :min="0"/>
      </a-form-item>

      <a-form-item label="分账类型：" name="divisionType">
        <div style="display: grid;">
        <a-radio-group v-model:value="vdata.saveObject.divisionType">
          <a-radio  v-for="item in vdata.typeList" :key="item.value" :value="item.value" :disabled="item.value ==3 && vdata.saveObject.ifCode == 'dgpay'" >
            {{ item.name }}
<!--            <a-tooltip v-if="item.value == 1" title="订单产生后立马发起分账指令，资金D1结算">-->
<!--              <question-circle-outlined style="font-size: 16px;"/>-->
<!--            </a-tooltip>-->
<!--           <a-tooltip v-if="item.value == 2"   :title="vdata.saveObject.ifCode === 'yspay'?'订单产生后90天内都可以发起分账指令，资金D1结算，如90天内未发起分账指令，资金于第二个工作日自动结算至收款商户的结算银行卡':vdata.saveObject.ifCode === 'dgpay'?'订单产生后180天内都可以发起分账指令，资金D1结算，如180天内未发起分账指令，资金于第二个工作日自动结算至收款商户的结算银行卡':''">-->
<!--              <question-circle-outlined style="font-size: 16px; "/>-->
<!--            </a-tooltip>-->
<!--            <a-tooltip v-if="item.value == 3 && vdata.saveObject.ifCode === 'yspay'"   :title="vdata.saveObject.ifCode === 'yspay'?'订单产生后立马发起分账指令，资金D0结算':''">-->
<!--              <question-circle-outlined style="font-size: 16px; "/>-->
<!--            </a-tooltip>-->
          </a-radio>
        </a-radio-group>
        <span class="jeepay-tip-text" v-if="vdata.saveObject.divisionType == 0">(订单产生后立马发起分账指令，资金D1结算)</span>
        <span class="jeepay-tip-text"  v-if="vdata.saveObject.divisionType == 1">({{ vdata.saveObject.ifCode === 'yspay'?'订单产生后90天内都可以发起分账指令，资金D1结算，如90天内未发起分账指令，资金于第二个工作日自动结算至收款商户的结算银行卡':vdata.saveObject.ifCode === 'dgpay'?'订单产生后180天内都可以发起分账指令，资金D1结算，如180天内未发起分账指令，资金于第二个工作日自动结算至收款商户的结算银行卡':'' }})</span>
        <span class="jeepay-tip-text"  v-if="vdata.saveObject.divisionType == 2 && vdata.saveObject.ifCode === 'yspay'">({{ vdata.saveObject.ifCode === 'yspay'?'订单产生后立马发起分账指令，资金D0结算':'' }})</span>
        </div>
      </a-form-item>
      <a-form-item label="指定设备" name="isSpecify">
        <a-radio-group v-model:value="vdata.saveObject.isSpecify">
          <a-radio :value="0">全部设备</a-radio>
          <a-radio :value="1">指定设备</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-row v-if="vdata.saveObject.isSpecify == 1" justify="space-between" type="flex">
        <a-col v-if="vdata.saveObject.deviceInfo && vdata.saveObject.deviceInfo.length > 0" :span="24">
          <a-form-item label="设备码牌ID">
            <a-textarea v-model:value="vdata.saveObject.deviceInfo" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="24" >
          <a-form-item>
            <a-button type="primary" @click="showQrcSelectModel">{{ vdata.isAdd ? '选择绑定设备' : '重新绑定设备' }}</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
      <div class="drawer-btn-center">
        <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false"><close-outlined /> 取消</a-button>
        <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOkFunc"><check-outlined /> 保存</a-button>
      </div>
    <!-- 选择码牌组件 -->
<!--    <JeepayModelQrcList ref="jeepayModelQrcListRef" @selectFinishFunc="selectQrcFinishFunc" />-->
      <JeepayModelAccountsQrcList ref="jeepayModelQrcListRef" @selectFinishFunc="selectQrcFinishFunc" />
  </a-drawer>
</template>

<script lang="ts" setup>
import {
  API_MCH_PAY_DEFINES,
  API_URL_DIVISION_RECEIVER_GROUP,
  API_URL_DIVISION_TEMPLATE_ADD,
  API_URL_DIVISION_TEMPLATE_EDIT,
  req
} from '@/api/manage'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
import { message } from 'ant-design-vue'
import {getCurrentInstance, reactive, ref} from 'vue'
import ReceiverGroupAdd from './ReceiverGroupAdd.vue'

const jeepayModelQrcListRef = ref()
 const  props = defineProps({
    callbackFunc: { type: Function,default:null }
  })

    const infoFormModel = ref()
    const vdata = reactive ({
      modeList:[
        {name:"按比例分账",value:0},
        {name:"按金额分账",value:1},
      ],
      typeList:[
        {name:"实时分账",value:0},
        {name:"延时分账",value:1},
        {name:"秒到分账",value:2},
      ],
      payDefines: [] as any,
      confirmLoading: false, // 显示确定按钮loading图标
      isAdd: true, // 新增 or 修改页面标识
      isShow: false, // 是否显示弹层/抽屉
      saveObject: { autoDivisionFlag: 0,ifCode:"" } as any, // 数据对象
      recordId: null, // 更新对象ID
      rules: {
        name: [{ required: true, message: '请输入组名称', trigger: 'blur' }],
        ifCode: [{ required: true, message: '请选择所属渠道', trigger: 'blur' }],
        divisionMode: [{ required: true, message: '请输入分账模式', trigger: 'blur' }],
        divisionType: [{ required: true, message: '请输入分账类型', trigger: 'blur' }],
        divisionAmount: [{ required: true, message: '请输入分账金额', trigger: 'blur' }],
        minAmount: [{ required: true, message: '请输入最小支付金额', trigger: 'blur' }],
        isSpecify: [{ required: true, message: '请指定指定设备', trigger: 'blur' }],
        deviceInfo: [{ required: true, message: '请选择设备信息', trigger: 'blur' }]
      }
    })
function onClose(){
  vdata.isShow = false
}
 defineExpose({show})
  function  show (record) { // 弹层打开事件
      vdata.isAdd = !record
      vdata.saveObject = { autoDivisionFlag: 0 } // 数据清空
      vdata.confirmLoading = false // 关闭loading

      if (infoFormModel.value !== undefined) {
        infoFormModel.value.resetFields()
      }

      payFefines()
      if (!vdata.isAdd) { // 修改信息 延迟展示弹层
        vdata.recordId = record.id
        vdata.saveObject = record
        if(record.divisionMode == 1){
          vdata.saveObject.divisionAmount = (record.divisionAmount/ 100).toFixed(2)
          vdata.saveObject.minAmount = (record.minAmount/ 100).toFixed(2)
        }
        console.log(vdata.saveObject,'saveObjectsaveObjectsaveObjectsaveObjectsaveObject')
        vdata.isShow = true
      } else {
        vdata.isShow = true // 立马展示弹层信息
      }
    }
    function getType(e){
        console.log(vdata.saveObject.type,'vdata.saveObject.type')
    }
function  payFefines() {
  req.list(API_MCH_PAY_DEFINES,{ 'pageSize': -1 }).then(res => {
    vdata.payDefines = res
  })
}

function getIfCode(){
  console.log(vdata.saveObject.ifCode,'saveObjectsaveObjectsaveObject')
}
  function  handleOkFunc() { // 点击【确认】按钮事件
     infoFormModel.value.validate().then(valid=>{
        vdata.confirmLoading = true // 显示loading

          if (vdata.isAdd) {
            req.add(API_URL_DIVISION_TEMPLATE_ADD, vdata.saveObject).then(res => {
              message.success('添加成功')
              vdata.isShow = false
              props.callbackFunc() // 刷新列表
            }).catch(res => { vdata.confirmLoading = false })
          } else {
            req.updateById(API_URL_DIVISION_TEMPLATE_EDIT, vdata.recordId, vdata.saveObject).then(res => {
              message.success('修改成功')
              vdata.isShow = false
              props.callbackFunc() // 刷新列表
            }).catch(res => { vdata.confirmLoading = false })
          }
     })
    }
function  selectQrcFinishFunc (e) { // 码牌选择完成事件

  if (!e || e.length <= 0) {
    return $infoBox.message.error('请开启要绑定的码牌！')
  }

  vdata.saveObject.deviceInfo = e
  jeepayModelQrcListRef.value.close()
}

function showQrcSelectModel() {
  if(!vdata.saveObject.ifCode){
    return $infoBox.message.error('请选择支付通道！')
  }
  jeepayModelQrcListRef.value.show(vdata.saveObject.storeId, vdata.saveObject.deviceInfo, vdata.saveObject.ifCode)
}
</script>
<style lang="less" scoped>
.jeepay-tip-text::before{
  border: none !important;
}
</style>
