<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    :title="vdata.isAdd ? '新增电子码' : '修改电子码' "
    width="40%"
    class="drawer-width"
    @close="onClose"
  >
    <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.saveObject" :rules="saveRule" layout="vertical">

      <a-row justify="space-between" type="flex">
        <a-col :span="24">
            <a-form-item label="电子码名称" name="qrcAlias">
              <a-input v-model:value="vdata.saveObject.qrcAlias" placeholder="请输入电子码名称" />
            </a-form-item>
        </a-col>

<!--        <a-col :span="11" v-if="$access('ENT_MCH_APP_LIST')">-->
<!--            <a-form-item label="电子码应用" name="appId">-->
<!--              <a-select v-model:value="vdata.saveObject.appId" placeholder="选择应用" show-search @search="handleAppidChange" :filter-option="false">-->
<!--                <a-select-option v-for="(item) in vdata.filteredAppInfoList" :key="item.appId">{{ item.appName }} [{{ item.appId }}]</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--        </a-col>-->
        <a-col :span="24" v-if="$access('ENT_MCH_STORE_LIST')" >
          <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 }} - {{ d.ifName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
<!--        <a-col :span="11" v-if="$access('ENT_MCH_STORE_LIST')" >-->
<!--          <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-col :span="11">
          <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="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-col :span="11">
          <a-form-item label="强制备注" name="isForceReamrk">
            <a-radio-group v-model:value="vdata.saveObject.isForceReamrk">
              <a-radio :value="1">开启</a-radio>
              <a-radio :value="0">关闭</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>


      <a-row>
        <a-form-item v-if="vdata.isAdd" label="" name="entryPage">
          <label for="页面类型">页面类型
            <a-tooltip  title="消费者扫收款码后会跳转对应的支付页面，默认为小程序页面，小程序页面可以实现营销功能">
              <info-circle-outlined />
            </a-tooltip>
          </label><br>
          谨慎选择， 一经填写不可变更。
          <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-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" @click="handleOkFunc"><check-outlined />保存</a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>

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


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

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

const saveRule = {
  qrcAlias: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  // appId: [{ required: true, message: '请选择应用', trigger: 'blur' }],
  storeId: [{ required: true, message: '请选择门店', trigger: 'blur' }],
  fixedPayAmount: [{ required: true, message: '请输入固定金额', trigger: 'blur', type: 'number', min: 0.01 }],
}


const vdata = reactive({

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

  mchAppList: [] as any, // 商户应用的List
  storeList: [] as any, // 商户门店的List
  filteredStoreInfoList:[] as any,
  filteredAppInfoList:[] as any,
})


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

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

  //更新商户的应用列表
  if($access('ENT_MCH_APP_LIST')){
    req.list(API_URL_MCH_APP, { pageSize: -1 }).then(res => {
      vdata.mchAppList = res.records
      vdata.filteredAppInfoList = res.records
    })
  }
  
  //更新商户的门店列表
  if($access('ENT_MCH_STORE_LIST')){
    req.list(API_URL_MCH_STORE_LIST, { 'pageSize': -1 }).then(res => {
      vdata.storeList =  res.records
      vdata.filteredStoreInfoList = res.records
  })
  }

  // 重置表单验证规则
  if (infoFormModel.value != undefined) {
    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(){

  infoFormModel.value.validate().then(() => {

    if(vdata.isAdd){

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

    }else{

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

}

// 接口请求成功的处理函数
function reqSuccessFunc(){
  $infoBox.message.success( vdata.isAdd ? '新增成功' : '更新成功')
  vdata.visible = false
  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 = [];
  console.log(vdata.mchAppList,'vdata.storeList')
  vdata.mchAppList.forEach((item: { appName: string | any[], appId: string | any[] },index) => {
    if (item.appName.includes(value) || item.appId.includes(value) ) {
      console.log(vdata.mchAppList[index],'vdata.mchAppList[index]')
      vdata.filteredAppInfoList.push(vdata.mchAppList[index]);
    }
  });
};



defineExpose({show})
</script>
