<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    title="绑定实体码"
    width="40%"
    class="drawer-width"
    @close="onClose" 
  >
  <a-row justify="space-between" type="flex" style="flex-direction: column;" layout="vertical">
      <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.saveObject" :rules="vdata.rules" layout="vertical">

        <a-row  justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item label="实体码编号" name="qrcId">
              <a-input v-model:value="vdata.saveObject.qrcId" placeholder="请输入实体码编号" />
              <div v-if="vdata.checkMsg" :style="vdata.checkCode == 1 ? {'color' : 'green'} : {'color' : 'red'}">{{ vdata.checkMsg }}</div>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item  label="查看绑定状态" name="">
              <a-button type="primary" @click="checkFunc">查询实体码是否允许绑定</a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item label="实体码名称" name="qrcAlias">
              <a-input v-model:value="vdata.saveObject.qrcAlias" placeholder="请输入实体码名称" />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="选择门店" name="storeId">
              <a-select v-model:value="vdata.saveObject.storeId" placeholder="请选择门店" show-search @search="handleBankChange" :filter-option="false">
                <a-select-option v-for="d in vdata.filteredStoreInfoList" :key="d.storeId" v-model:value="d.storeId">
                  {{ d.storeName }}[{{ d.storeId }}]
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>


        <a-row justify="space-between" type="flex">
          <a-col>
            <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" placeholder="请输入金额" /> 元
            </a-form-item>
          </a-col>
<!--          <a-col :span="11">-->
<!--            <a-form-item label="选择应用" name="appId">-->
<!--              &lt;!&ndash; @search="handleBankSearch" &ndash;&gt;-->
<!--              <a-select v-model:value="vdata.saveObject.appId" placeholder="请选择应用" show-search @search="handleAppidChange" :filter-option="false">-->
<!--                <a-select-option v-for="d in vdata.filteredAppInfoList" :key="d.appId" v-model:value="d.appId">-->
<!--                  {{ d.appName }}[{{ d.appId }}]-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :span="11">
            <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-col>
        </a-row>
<!--        <a-col>-->

<!--        </a-col>-->
<!--        <a-col>-->
<!--          <a-form-item label="选择页面类型" name="entryPage">-->
<!--            谨慎选择， 一经填写不可变更。-->
<!--            <a-radio-group v-model:value="vdata.saveObject.entryPage">-->
<!--              <a-radio :value="'default'">默认(未指定，取决于实体码是否绑定到微信侧)</a-radio>-->
<!--              <a-radio :value="'lite'">小程序页面</a-radio>-->
<!--              <a-radio :value="'h5'">H5页面</a-radio>-->
<!--            </a-radio-group>-->
<!--          </a-form-item>-->
<!--        </a-col>-->
<!--        <a-col>-->
<!--          <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-col>-->
    </a-form>
  </a-row>
    <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 {
  req,
  API_URL_MCH_APP,
  API_URL_MCH_STORE_LIST,
  $bindEmptyQr,
  $checkDevice,
  $checkQrCodeBindId,
} from '@/api/manage'
import { reactive, ref } from 'vue'
import { message,SelectProps } from 'ant-design-vue'

// 定义组件参数
const props = defineProps({
  callbackFunc: {type: Function, default: () => {}}
})
const infoFormModel = ref()
const vdata : any = reactive({
  checkMsg:"",
  checkCode:0,
  storeList: [] as any, // 门店列表
  filteredStoreInfoList:[] as any,
  filteredAppInfoList:[] as any,
  appList: [] as any, // 应用列表
  saveObject: {} as any, // 数据对象
  rules: {
    qrcAlias: [{ required: true, trigger: 'blur', message: '请输入实体码名称' }],
    fixedPayAmount: [{ required: true, message: '请输入固定金额', trigger: 'blur', type: 'number', min: 0.01 }],
    storeId: [{ required: true,  message: '请选择门店', trigger: 'blur' }],
    // appId: [{ required: true, trigger: 'blur', message: '请选择应用' }],
    qrcId: [{ required: true, trigger: 'blur', message: '请输入实体码' }],
  },
})


// 弹层打开事件
function show() {
  vdata.visible = true
  req.list(API_URL_MCH_STORE_LIST, { 'pageSize': -1 }).then(res => { // 门店下拉选择列表
      vdata.storeList =  res.records
      vdata.filteredStoreInfoList =  res.records
    })
  req.list(API_URL_MCH_APP, { 'pageSize': -1 }).then(res => { // 应用下拉选择列表
      vdata.appList =  res.records
      vdata.filteredAppInfoList =  res.records
  })
  vdata.saveObject = { qrcState: 1, fixedFlag: 0, alipayWayCode: 'ALI_JSAPI' } // 重置清空
}

// 点击 【保存】按钮的事件
function handleOkFunc(){
  infoFormModel.value.validate().then((valid: any) =>{
    console.log(vdata.saveObject,'vdata.saveObjectvdata.saveObject')
    $bindEmptyQr(vdata.saveObject).then(res => {
      message.success('绑定成功')
      onClose()
      props.callbackFunc() // 刷新列表
    })
  })
}

function onClose() {
  vdata.visible = false
}

const handleBankChange = (value) => {
  vdata.filteredStoreInfoList = [];
  vdata.storeList.forEach((item: { storeName: string | any[], storeId:  any[] },index) => {
    if (item.storeName.includes(value) || item.storeId.toString().includes(value) ) {
      vdata.filteredStoreInfoList.push(vdata.storeList[index]);
    }
  });
};



const handleAppidChange = (value) => {
  vdata.filteredAppInfoList = [];
  vdata.appList.forEach((item: { appName: string | any[], appId: string | any[] },index) => {
    if (item.appName.includes(value) || item.appId.includes(value) ) {
      vdata.filteredAppInfoList.push(vdata.appList[index]);
    }
  });
};

function checkFunc() {

  vdata.checkMsg = ''

  $checkQrCodeBindId(vdata.saveObject.qrcId).then(res => {
    vdata.checkMsg = res.checkMsg
    vdata.checkCode = res.checkCode

  })
}

defineExpose({show})
</script>
