<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>
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchNo']" placeholder="用户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />

        <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 == 'rechargeAmount'">
            <b>￥{{ record.rechargeAmount / 100 }}</b>
          </template>
          <template v-if="column.key == 'giveAmount'">
            <b>￥{{ record.giveAmount / 100 }}</b>
          </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.ruleId)">修改</a-button>
              <a-button v-if="$access('ENT_MEMBER_RECHARGE_DELETE')" type="link" style="color: red" @click="delFunc(record.ruleId)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增  -->
    <AddOrEdit ref="addOrEdit" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>

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

const tableColumns = reactive([
  { key: 'ruleId', fixed: 'left', title: '规则ID', dataIndex: 'ruleId' },
  { key: 'mchNo', title: '用户号', dataIndex: 'mchNo' },
  { key: 'rechargeAmount', title: '充值金额', dataIndex: 'rechargeAmount' },
  { key: 'giveAmount', title: '赠送金额', dataIndex: 'giveAmount' },
  { key: 'state', title: '状态',},
  { key: 'sort', title: '排序', dataIndex: 'sort' },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt',},
  { 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_MEMBER_RECHARGE_RULE_LIST, params)
  }

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

  function addFunc() { // 业务通用【新增】 函数
    addOrEdit.value.show(vdata.searchData['mchNo'])
  }

  function editFunc (recordId) { // 业务通用【修改】 函数
    addOrEdit.value.show(vdata.searchData['mchNo'], recordId)
  }

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

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

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