<template>
  <a-drawer
    :visible="vdata.visible"
    :title=" vdata.isAdd ? '新增红包规则' : '修改包规则'"
    width="40%"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="红包类型" name="packetType">
            <a-radio-group v-model:value="vdata.saveObject['packetType']">
              <a-radio :value="1">门店专享</a-radio>
              <a-radio :value="2" :disabled="true">平台通用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12" >
          <a-form-item label="营销折扣比例" name="marketScale">
            <a-select v-model:value="vdata.saveObject.marketScale" placeholder="选择营销折扣比例"  @change="getMarketingList" :filter-option="false">
              <a-select-option v-for="(item,index) in vdata.marketingList" :key="index">{{ item }}折</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12" ></a-col>

        <a-col :span="12" >
          <a-form-item label="平台补贴比例" name="platScale">
            <a-input v-model:value="vdata.saveObject.platScale"  :disabled="true" placeholder="请选择营销折扣比例" style="width: 100%" />
          </a-form-item>
        </a-col>

        <a-col :span="12" >
          <a-form-item label="顾客获得红包比例" name="userPerkScale">
            <a-input v-model:value="vdata.saveObject.userPerkScale"  :disabled="true" placeholder="请选择营销折扣比例" style="width: 100%" />
          </a-form-item>
        </a-col>


        <a-col :span="12" >
          <a-form-item label="领取红包后有效期" name="expireNumber">
            <a-select v-model:value="vdata.saveObject.expireNumber" placeholder="请选择领取红包后有效期"   :filter-option="false">
              <a-select-option v-for="(item,index) in vdata.receiveList" :key="index">{{ item }}个月</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12" ></a-col>

        <a-col :span="12" v-if="!vdata.recordId">
          <a-form-item label="将规则配置到门店" name="configType">
            <a-radio-group v-model:value="vdata.saveObject['configType']">
              <a-radio :value="1">配置到所有门店</a-radio>
              <a-radio :value="2" @click="getUserMchList()">配置到指定门店</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button>
    </div>
    <JeepayRedMchList
        ref="jeepayRedMchListRef"
        :showType="'STORE'"
        :onlyMchNo="false"
        :onlyMchName="false"
        :mchNoAndName="false"
        :datas="vdata.redSearch"
        v-show="vdata.redSearch"
        class="jeepayRedMchListRef"
        @selectFinishFunc="searchMchFinishFunc"
    />

  </a-drawer>


</template>

<script setup lang="ts">
import {
  API_URL_MCH_REF_PACKET_RULE_ADD,
  API_URL_MCH_REF_PACKET_RULE_QUERY,
  API_URL_MEMBER_RECHARGE_RULE_LIST,
  API_URL_MCH_REF_PACKET_RULE_EDIT,
  req
} from '@/api/manage'
import {ref, reactive,getCurrentInstance} from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})

const jeepayRedMchListRef = ref()

const vdata : any =  reactive({
  redSearch:false,
  receiveList:["1","2","3","4","5","6"],
  marketingList:['98','95','9','85','8'],
  platformList:['97','93','85','8','7'],
  userList:['4','10','20','30','50'],
  isAdd: true, // 新增 or 修改
  visible: false, // 抽屉开关
  recordId: '', // ID
  saveObject: {state:1,packetType:1}, // 数据对象
  btnLoading:false,
  storeId:[],
  rules: {
    rechargeAmount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
    state: [{ required: true, message: '请输选择状态', trigger: 'blur' }],
    packetType: [{ required: true, message: '请输选择红包类型', trigger: 'blur' }],
    marketScale: [{ required: true, message: '请输选择营销折扣比例', trigger: 'blur' }],
    expireNumber: [{ required: true, message: '请输选择领取红包有效期', trigger: 'blur' }],
    configType: [{ required: true, message: '请输选择配置门店类型', trigger: 'blur' }],
  }
})

// 表单组件
const infoFormModel = ref()

// 抽屉显示
const show = (recordId) => {
  vdata.isAdd = !recordId

  vdata.recordId = recordId
  // 数据清空
  vdata.saveObject = { state: 1,packetType:1 }
  vdata.storeId = [];
  
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  if (recordId) { // 修改信息 延迟展示弹层
    // 拉取详情
    req.getById(API_URL_MCH_REF_PACKET_RULE_QUERY, recordId).then(res => {
      vdata.saveObject = res
      for (var i=0;i<vdata.marketingList.length;i++){
        if(vdata.marketingList[i] == res.marketScale){
          vdata.saveObject.marketScale = i
        }
      }
      vdata.saveObject.expireNumber = parseInt(res.expireNumber) -  1
      vdata.saveObject.platScale = res.platScale+"折"
      vdata.saveObject.userPerkScale = (res.userPerkScale*100)+"%"
      vdata.storeId.push(res.storeId)
    })

    vdata.visible = true
  } else {
    vdata.visible = true // 展示弹层信息
  }
}
// 表单提交
const onSubmit = () => {


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

    vdata.btnLoading = true
    let reqObject = Object.assign({}, vdata.saveObject) // 请求数据
    if(vdata.saveObject.configType == 2 && vdata.storeId.length == 0){
      $infoBox.message.error('请选择指定门店！')
      vdata.btnLoading = false
      return false;
    }
    const  marketScale = vdata.marketingList[reqObject['marketScale']];
    const  platScale = reqObject['platScale'];
    const  userPerkScale = reqObject['userPerkScale'];
    const  expireNumber = reqObject['expireNumber']

    reqObject['expireNumber'] = vdata.receiveList[expireNumber];
    reqObject['storeIdList'] = vdata.storeId;
    reqObject['marketScale'] = marketScale;
    reqObject['platScale'] = platScale.replace('折', '');
    reqObject['userPerkScale'] = userPerkScale.replace('%', '')/100;



    if(vdata.recordId){
      reqObject['id'] = vdata.recordId;
      req.addOrUpdate(null, API_URL_MCH_REF_PACKET_RULE_EDIT, reqObject).then(res => {
        vdata.visible = false
        props.callbackFunc() // 刷新列表
      }).finally(() => {
        vdata.btnLoading = false
      })
    }else{
      req.addOrUpdate(null, API_URL_MCH_REF_PACKET_RULE_ADD, reqObject).then(res => {
        vdata.visible = false
        props.callbackFunc() // 刷新列表
      }).finally(() => {
        vdata.btnLoading = false
      })
    }
  })
}

const onClose = () => {
  vdata.visible = false
}

function getMarketingList(value){
  vdata.saveObject.platScale = vdata.platformList[value]+"折"
  vdata.saveObject.userPerkScale = vdata.userList[value]+"%"

}

function getUserMchList(){
  vdata.redSearch = true
  jeepayRedMchListRef.value.show()
}

function searchMchFinishFunc(e){
  vdata.redSearch = false
  jeepayRedMchListRef.value.close()
  if(e.store.length == 0){
    $infoBox.message.error('请选择指定门店！')
    return false;
  }
  vdata.storeId = e.store

}


defineExpose({ show })
</script>

