<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="monitoring-page">
    <!-- 新增Tabs组件区分晚报/历史数据 -->
    <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
      <TabPane tab="数据中断" key="realtime">
        <!-- 晚报数据表格 -->
        <BasicTable @register="registerRealtimeTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
          <template #action="{ record }">
            <div class="action-buttons">
              <!-- 操作按钮 -->
              <button @click="openModal(record)" class="resolved-btn" title="解决">
                <SvgIcon name="solved" />
              </button>
            </div>
          </template>
          <template #resetBefore>
            <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXlsTime"> 导出 </a-button>
          </template>
        </BasicTable>
      </TabPane>

      <TabPane tab="历史数据" key="history">
        <!-- 历史数据表格 -->
        <BasicTable @register="registerHistoryTable" :scroll="{ x: 'max-content' }" :style="{ padding: 0 }">
          <!-- <template #action="{ record }">
            <div class="action-buttons">
              <button @click="openModal(record, 'history')" class="action-btn">
                <SvgIcon name="details" />
              </button>
            </div>
          </template> -->
          <template #resetBefore>
            <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
          </template>
        </BasicTable>
      </TabPane>
    </Tabs>
    <!-- 弹窗组件 -->
    <BasicModal @register="registerModal" :width="600" :minHeight="100" centered title="处理情况" @ok="handleResolve">
      <a-textarea class="ml-10px" :style="{ width: `calc(100% - 20px)` }" v-model:value="resolveValue" placeholder="请输入解决情况" :rows="4" />
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { SvgIcon } from '/@/components/Icon';
  // 引入模拟数据
  import { columns } from './reportAnalysis.data';
  import { getProvinceAlarm, getProvinceAlarmHistory } from './report.api';
  import { useInitForm } from '../../common/analysis';
  import { BasicModal } from '/@/components/Modal/index';
  
  import { useListPage } from '/@/hooks/system/useListPage';
  import dayjs from 'dayjs';

  // 激活的Tab页签
  const activeTab = ref('realtime');

  // 注册晚报数据表格
  const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
    tableProps: {
      immediate: false,
      columns,
      api: getProvinceAlarm,
      formConfig: {
        autoSearch: true,
        labelWidth: 120,
        schemas: [
          {
            label: '煤矿名称',
            field: 'deptId',
            component: 'MineCascader', // 自定义组件名
            colProps: { span: 6 },
            rules: [],
          },
        ],
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      pagination: true,
      striped: true,
      useSearchForm: true,
      bordered: true,
      showIndexColumn: false,
      actionColumn: {
        width: 80,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: undefined,
      },
    },
    exportConfig: {
      url: '/ventanaly-province/province/alarm/exportProvinceAlarmReal',
      name: '数据中断分析',
      params: {
        alarmType: 'lateReport',
      },
    },
  });
  const [registerRealtimeTable] = ctxRealtime;
  const { hiscode, resolveValue, registerModal, openModal, initGoafOptions, handleResolve } = useInitForm();
  // 注册历史数据表格
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      immediate: false,
      columns: [
        ...columns,
        {
          title: '恢复时间',
          dataIndex: 'endTime',
          width: 100,
        },
      ],
      // columns: historyColumns,
      api: getProvinceAlarmHistory,
      formConfig: {
        autoSearch: true,
        model: { deptId: hiscode },
        labelWidth: 120,
        schemas: [
          {
            label: '煤矿名称',
            field: 'deptId',
            component: 'MineCascader', // 自定义组件名
            componentProps: {
              initFromStore: true,
              syncToStore: false,
              changeOnSelect: false,
              onChange: (e) => {
                historyTable.setLoading(true);
                initGoafOptions(e).finally(() => {
                  historyTable.setLoading(false);
                });
              },
            },
            colProps: { span: 6 },
            rules: [],
          },
          {
            field: 'startTime',
            label: '起始日期',
            component: 'DatePicker',
            componentProps: {
              //日期格式化，页面上显示的值
              format: 'YYYY-MM-DD',
              //返回值格式化（绑定值的格式）
              valueFormat: 'YYYY-MM-DD 00:00:00',
            },
            defaultValue: dayjs().add(-7, 'day').format('YYYY-MM-DD'),
            colProps: { span: 6 },
          },
          {
            field: 'endTime',
            label: '结束日期',
            component: 'DatePicker',
            componentProps: {
              //日期格式化，页面上显示的值
              format: 'YYYY-MM-DD',
              //返回值格式化（绑定值的格式）
              valueFormat: 'YYYY-MM-DD 23:59:59',
            },
            defaultValue: dayjs().format('YYYY-MM-DD'),
            colProps: { span: 6 },
          },
        ],
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      pagination: true,
      striped: true,
      useSearchForm: true,
      bordered: true,
      showIndexColumn: true,
      showActionColumn: false,
    },
    exportConfig: {
      url: '/province/alarm/exportProvinceAlarmHistory',
      name: '历史数据',
      params: {
        alarmType: 'lateReport',
      },
    },
  });

  const [registerHistoryTable, historyTable] = tableContext;
</script>

<style lang="less" scoped>
  @import url(../../common/board.less);
</style>
