<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="onReset">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']" customDateRangeType="date" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData.storeId" :placeholder="'门店名称/门店编号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="红包类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">门店专享</a-select-option>
            <a-select-option value="0">平台通用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.state" placeholder="红包状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :initData="true"
          :reqTableDataFunc="reqTableDataFunc"
          :tableColumns="tableColumns"
          :searchData="vdata.searchData"
          rowKey="ruleId"
          @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_MEMBER_RECHARGE_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key === 'storeId'">
            <a-tooltip  class="my-tooltip" overlayClassName="tooltip-box-name">
              <template #title>
                门店ID：{{record.storeId}}
              </template>
              {{record.storeName}}
            </a-tooltip>
          </template>

          <template v-if="column.key == 'packetType'">
            <a-tag v-if="record.packetType == 1" color="orange">门店专享</a-tag>
            <a-tag v-if="record.packetType == 2" color="green">平台通用</a-tag>
          </template>
          <template v-if="column.key == 'marketScale'">
            {{ record.marketScale }}折
          </template>
          <template v-if="column.key == 'platScale'">
            {{record.platScale}}折
          </template>
          <template v-if="column.key == 'userPerkScale'">
            {{record.userPerkScale*100}}%
          </template>
          <template v-if="column.key == 'expireNumber'">
            {{record.expireNumber }}个月
          </template>

          <template v-if="column.key == 'state'">
            <a-badge :status="record.state === 0?'error':'processing'" :text="record.state === 0?'禁用':'启用'" />
          </template>

          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_MEMBER_RECHARGE_EDIT')" type="link" @click="editFunc(record.id)">修改</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增  -->
    <AddRuleEdit ref="addOrEdit" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>

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

const tableColumns = reactive([
  { key: 'storeId', fixed: 'left', title: '门店', dataIndex: 'storeId',align: 'center' },
  { key: 'packetType', title: '红包类型', dataIndex: 'packetType',align: 'center' },
  { key: 'marketScale', title: '营销折扣比例', dataIndex: 'marketScale' ,align: 'center'},
  { key: 'platScale', title: '平台补贴比例', dataIndex: 'platScale',align: 'center' },
  { key: 'userPerkScale', title: '顾客获得红包比例', dataIndex: 'userPerkScale',align: 'center' },
  { key: 'expireNumber', title: '领取红包有效期', dataIndex: 'expireNumber',align: 'center'  },
  { key: 'state', title: '状态',align: 'center' },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt',align: 'center' },
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

const addOrEdit = ref()
const infoTable = ref()
const dateRangePicker = ref()

const vdata = reactive({
  btnLoading: false,
  tableColumns: tableColumns,
  searchData: {} as any
})

// 请求table接口数据
function reqTableDataFunc(params){
  return req.list(API_URL_MCH_REF_PACKET_RULE_LIST, params)
}

function searchFunc () { // 点击【查询】按钮点击事件
  infoTable.value.refTable(true)
}

function addFunc() { // 业务通用【新增】 函数
  addOrEdit.value.show()
}

function editFunc (recordId) { // 业务通用【修改】 函数
  addOrEdit.value.show(recordId)
}

function delFunc (appId) {
  $infoBox.confirmDanger('确认删除？', '', () => {
    req.delById(API_URL_MEMBER_RECHARGE_RULE_LIST, appId).then(res => {
      $infoBox.message.success('删除成功！')
      searchFunc()
    })
  },() => {
    console.log(1111)
  })
}

function onReset(){
  //重置搜索内容
  dateRangePicker.value.returnSelectModel()
  vdata.searchData = { queryDateRange: '' }
}

</script>

<style lang="less" scoped>
</style>
