<template>
  <page-header-wrapper>
    <a-card>
      <a-tabs v-model:activeKey="vdata.activeKey">
        <a-tab-pane key="1" tab="数据统计任务记录">
          <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
            <a-form-item label="" class="table-search-item">
              <a-select v-model:value="vdata.searchData.taskType" placeholder="任务类型">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="1">统计定时任务</a-select-option>
                <a-select-option :value="2">平台数据修复</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-option :value="2">任务失败</a-select-option>
              </a-select>
            </a-form-item>
          </JeepaySearchForm>
          <!-- 列表渲染 -->
          <JeepayTable
            ref="infoTable"
            :init-data="true"
            :req-table-data-func="reqTableDataFunc"
            :table-columns="tableColumns"
            :search-data="vdata.searchData"
            row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'taskType'">
                <a-tag v-if="record.taskType == 1" color="green">统计定时任务</a-tag> 
                <a-tag v-if="record.taskType == 2" color="purple">平台数据修复</a-tag>
              </template>
              <template v-if="column.key === 'state'">
                <a-badge v-if="record.state == 0" status="warning" text="任务进行中" />
                <a-badge v-else-if="record.state == 1" status="success" text="任务完成" />
                <a-badge v-else-if="record.state == 2" status="error" text="任务失败" />

                <a-tooltip v-if="record.errMsg && record.state == 2" :title="record.errMsg"><info-circle-outlined /></a-tooltip>
              </template>
              
              <template v-if="column.key === 'dateRange'">
                {{ record.statsBeginDate }} - {{ record.statsEndDate }}
              </template>

              <template v-if="column.key === 'op'">
                <!-- 操作列插槽 -->
                <JeepayTableColumns>
                  <a-button v-if="$access('ENT_STATISTIC_RECORD_VIEW')" type="link" @click="detailFunc(record.id, record.state)">查询最新状态</a-button>
                </JeepayTableColumns>
              </template>
            </template>
          </JeepayTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="数据修复" force-render>
          <a-row :align="'center'" style="padding: 20px 0;">
            <a-col :span="22">
              <p class="tem-title">修复指南：</p>
              <p class="tem-msg">1. 系统会在每日凌晨 00:10 自动统计前一日数据</p>
              <p class="tem-msg">2. 某一日数据异常或者未执行统计的数据可在此处手动执行修复</p>
              <p class="tem-msg">3. 订单量较大时，修复数据会占用较多系统资源，同时消耗较多的时间</p>
            </a-col>
          </a-row>
          <a-form :model="vdata.saveObject" layout="horizontal">
            <a-row justify="start" type="flex" style="margin-top: 20px">
              <a-col :span="5" :offset="1">
                <a-form-item label="修复日期">
                  <a-range-picker v-model:value="vdata.saveObject.repairDate" :disabled-date="disabledDate" valueFormat="YYYY-MM-DD" />
                  <span class="jeepay-tip-text">置空表示修复全部时间数据</span>
                </a-form-item>
              </a-col>
              <a-col :span="5" :offset="1">
                <a-form-item label="修复商户号">
                  <a-input v-model:value="vdata.saveObject.mchNo" placeHolder="请输入" />
                  <span class="jeepay-tip-text">置空表示修复全部商户数据</span>
                </a-form-item>
              </a-col>
              <a-col :span="24" :offset="1">
                <a-form-item>
                  <a-button v-if="$access('ENT_STATISTIC_REPAIR')" type="primary" :loading="vdata.btnLoading" @click="confirm"><check-circle-outlined />开始修复</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

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

let tableColumns = reactive([
  { key: 'id', title: 'ID', dataIndex: 'id',  },
  { key: 'taskType', title: '任务类型', dataIndex: 'taskType'},
  { dataIndex: 'beginTime', title: '任务开始时间' },
  { dataIndex: 'endTime', title: '任务结束时间' },
  { key: 'dateRange', title: '统计日期范围' },
  { key: 'state', title: '状态', dataIndex: 'state' },
  { key: 'op', title: '操作', fixed: 'right', align: 'center', }
])

const vdata: any = reactive({
  activeKey: '1',
  searchData: {},
  saveObject: {} as any
})

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

const disabledDate = (current: Dayjs) => {
  return current && current > dayjs().startOf('day')
}

function confirm() {
  $infoBox.confirmDanger('提示', '确认修复吗', () => {
    return req.add(API_URL_STATISTIC, { repairDate: vdata.saveObject.repairDate ? vdata.saveObject.repairDate.join(',') : '', mchNo: vdata.saveObject.mchNo }).then(res => {
      $infoBox.message.success('数据正在修复，请在数据统计任务记录查看修复状态！')
      vdata.activeKey = '1'
      searchFunc() // 更新列表
    })
  })
}

function detailFunc(recordId, currState) {
  req.getById(API_URL_STATS_RECORD, recordId).then(res => {
    if(currState != res.state){
        $infoBox.message.success('状态已更新')
        searchFunc() // 更新列表
      }else{
        $infoBox.message.info('状态无变化')
      }
  })
}

</script>
<style lang="less">
  .tem-title {
    font-size: 16px;
  }
  .tem-msg {
    text-indent: 1em;
  }
</style>
