<template>
  <!-- 新增Tabs组件区分实时/历史数据 -->
  <Tabs v-model:activeKey="activeTab" class="monitoring-page" type="line">
    <TabPane tab="实时数据监测" key="realtime">
      <!-- 实时数据表格 -->
      <BasicTable style="padding: 0" @register="registerRealtimeTable">
        <template #action="{ record }">
          <button @click="openModal(record, 'realtime')" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>

    <TabPane tab="历史数据监测" key="history">
      <!-- 历史数据表格 -->
      <BasicTable style="padding: 0" @register="registerHistoryTable">
        <template #afterReset>
          <a-button type="primary" @click="onExportXls">导出</a-button>
        </template>
        <template #action="{ record }">
          <button @click="openModal(record, 'history')" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>
  </Tabs>

  <!-- 实时数据详情弹框 -->
  <realtimeDetailsModal ref="realtimeModalRef" />
  <!-- 历史数据详情弹框 -->
  <HistoricalDetailsModal ref="historyModalRef" />
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { Tabs, TabPane } from 'ant-design-vue';
  // 引入模拟数据
  import { columns, searchFormSchema, minesData, historicalColumns, historicalFormSchema, historicalMinesData } from './monitor.data';
  import realtimeDetailsModal from './components/RealtimeDetailsModal.vue';
  import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { getGoafData, getGoafHistory } from './monitor.api';
  import { useListPage } from '/@/hooks/system/useListPage';

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

  // 注册实时数据表格
  const [registerRealtimeTable, { getForm }] = useTable({
    api: (params) =>
      getGoafData(params).then((res) => {
        if (res.length) return res;
        return minesData;
      }),
    beforeFetch(params) {},
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      showAdvancedButton: false,
      schemaGroupNames: ['常规查询'],
    },
    pagination: false,
    useSearchForm: true,
    showIndexColumn: false,
    canResize: false,
    scroll: { x: 'max-content' },
    actionColumn: {
      width: 60,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 注册历史数据表格
  const { tableContext, onExportXls } = useListPage({
    tableProps: {
      api: (params) =>
        getGoafHistory(params)
          .then((res) => {
            return res;
          })
          .catch(() => {
            return historicalMinesData;
          }),
      beforeFetch(params) {},
      columns: historicalColumns,
      formConfig: {
        labelWidth: 120,
        schemas: historicalFormSchema, // 使用历史数据的搜索配置
        showAdvancedButton: false,
        schemaGroupNames: ['常规查询'],
      },
      useSearchForm: true,
      bordered: true,
      showIndexColumn: false,
      canResize: false,
      scroll: { x: 'max-content' },
    },
    exportConfig: {
      url: '/province/alarm/exportProvinceAlarmHistory',
      name: '历史数据',
    },
    pagination: true,
  });
  const [registerHistoryTable] = tableContext;

  // 弹窗引用
  const realtimeModalRef = ref(null);
  const historyModalRef = ref(null);

  // 打开弹窗方法（区分实时/历史）
  const openModal = (record, type) => {
    if (type === 'realtime') {
      // 可向实时弹窗传递当前记录数据
      realtimeModalRef.value?.showModal(record);
    } else {
      // 可向历史弹窗传递当前记录数据
      historyModalRef.value?.showModal(record);
    }
  };
</script>

<style lang="less" scoped>
  .monitoring-page {
    padding: 0 12px;
    margin: 16px;
    border: 1px solid @border-color-base;
  }

  .action-btn {
    cursor: pointer;
    border: none;
    // background: transparent;
    padding: 4px;
  }

  .action-icon {
    width: 16px;
    height: 16px;
  }
</style>
