<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.dateType" placeholder="状态">
            <a-select-option value="">全部</a-select-option>
            <a-radio value="holiday">节假日</a-radio>
            <a-radio value="workday">工作日</a-radio>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>
     
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="appId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_LEGAL_DAY_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'dateType'">
            {{ record.dateType == 'holiday' ? '节假日' : '工作日' }}
          </template>

          <template v-if="column.dataIndex === 'dateValue'">
            {{ dayjs(record.dateValue).format('YYYY-MM-DD') }}
          </template>

          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button v-if="$access('ENT_LEGAL_DAY_DEL')" type="link" style="color: red" @click="delFunc(record.id)">删除</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增应用  -->
    <AddOrEdit ref="addOrEditRef" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>

<script setup lang="ts">
import { API_URL_SYS_LEGAL_DAY, req } from '@/api/manage'
import AddOrEdit from './AddOrEdit.vue'
import {ref, reactive, getCurrentInstance} from 'vue'
import dayjs from 'dayjs'

const tableColumns = reactive([
  { dataIndex: 'id', title: 'ID' },
  { dataIndex: 'dateType', title: '日期类型' },
  { dataIndex: 'dateValue', title: '日期' },
  { dataIndex: 'createdAt', title: '创建日期' },
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTable = ref()
const addOrEditRef = ref()

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

// 请求table接口数据
function reqTableDataFunc (params) {
  return req.list(API_URL_SYS_LEGAL_DAY, params)
}
const searchFunc = function () { // 点击【查询】按钮点击事件
  infoTable.value.refTable(true)
}

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

const delFunc = (appId) => {
  $infoBox.confirmDanger('确认删除？', '', () => {
    req.delById(API_URL_SYS_LEGAL_DAY, appId).then(res => {
      infoTable.value.refTable(true)
      $infoBox.message.success('删除成功！')
    })
  })
}

</script>
