<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    title="绑定管理"
    width="40%"
    @close="onClose" 
  >
    <a-form ref="infoFormModel" :model="vdata.record" layout="horizontal" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="绑定状态：">
            <a-space>
              {{ vdata.record.bindState == 1 ? '已绑定' : '未绑定' }}
              <a-button type="primary" @click="showSelectModal">{{ vdata.record.bindState == 1 ? '重新选择' : '选择商户信息' }}</a-button>
            </a-space>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.showBindInfo" :span="24">
          <a-form-item label="用户号：">
            <span>{{ vdata.record.mchNo }}</span>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.showBindInfo" :span="24">
          <a-form-item label="商户应用：">
            <span>{{ vdata.record.appId }}</span>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.showBindInfo" :span="24">
          <a-form-item label="门店：">
            <span>{{ vdata.record.storeId }}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    
    <JeepayModelMchList ref="jeepayModelMchListRef" showType="MCH_APP_STORE" :mchNoAndName="true" @selectFinishFunc="selectFinishFunc" />

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

<script lang="ts" setup>

import {API_URL_MCH_QR_CODE_LIST, $bindQrc, req} from '@/api/manage'
import {defineProps, reactive, ref, getCurrentInstance, inject} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties


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

const listPageSearchFunc : any = inject('listPageSearchFunc')


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

const jeepayModelMchListRef = ref()

const vdata : any = reactive({
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
  record: {}, //当前对象数据
  showBindInfo: false // 显示绑定信息

})


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

    vdata.recordId = recordId
    req.getById(API_URL_MCH_QR_CODE_LIST, recordId).then(res => {
      vdata.record = res
      if (vdata.record.bindState == 1) {
        vdata.showBindInfo = true
      } else {
        vdata.showBindInfo = false
      }
      vdata.visible = true
    })
}

function showSelectModal(){
    jeepayModelMchListRef.value.show()
}

function selectFinishFunc(selectArray){

  if(!selectArray[0] || !selectArray[1] || !selectArray[2]){
    return $infoBox.message.error('选择信息不完整！')
  }

  vdata.record.mchNo = selectArray[0]
  vdata.record.appId = selectArray[1]
  vdata.record.storeId = selectArray[2]
  vdata.showBindInfo = true

  jeepayModelMchListRef.value.close()
  
}

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

  $bindQrc(vdata.recordId, vdata.record).then((res) => {
    $infoBox.message.success('更新成功')
    onClose()
    listPageSearchFunc()
  })


}

function onClose() {
  vdata.visible = false
}


defineExpose({show})
</script>
