<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 新增Tabs组件区分实时/历史数据 -->
  <Tabs v-model:activeKey="activeTab" class="common-page-tabs" type="line">
    <TabPane tab="实时数据监测" key="realtime">
      <!-- 实时数据表格 -->
      <BasicTable style="padding: 0" @register="registerRealtimeTable">
        <template #form-mine-cascader>
          <a-cascader
            v-model:value="mineCodes"
            :options="getMineTree"
            :field-names="{
              label: 'departName',
              value: 'id',
              children: 'childDepart',
            }"
            show-search
            @change="initGoafOptions"
          >
            <template #displayRender="{ labels }">
              {{ labels[labels.length - 1] }}
            </template>
          </a-cascader>
        </template>
        <template #action="{ record }">
          <button @click="openModal(record)" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>

    <TabPane tab="历史数据监测" key="history">
      <!-- 历史数据表格 -->
      <BasicTable style="padding: 0" @register="registerHistoryTable">
        <template #form-mine-cascader>
          <a-cascader
            v-model:value="mineCodes"
            :options="getMineTree"
            :field-names="{
              label: 'departName',
              value: 'id',
              children: 'childDepart',
            }"
            show-search
            @change="initGoafOptions"
          >
            <template #displayRender="{ labels }">
              {{ labels[labels.length - 1] }}
            </template>
          </a-cascader>
        </template>
        <template #form-goaf-select>
          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
        </template>
        <template #afterReset>
          <a-button type="primary" @click="onExportXls">导出</a-button>
        </template>
        <!-- <template #action="{ record }">
          <button @click="openModal(record)" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template> -->
      </BasicTable>
    </TabPane>
  </Tabs>

  <!-- 实时数据详情弹框 -->
  <RealtimeDetailsModal @register="registerRealtimeModal" @close="resume" />
  <!-- 历史数据详情弹框 -->
  <!-- <HistoricalDetailsModal @register="registerHistoryModal" @close="resume" /> -->
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { Tabs, TabPane } from 'ant-design-vue';
  // 引入模拟数据
  import { columns, searchFormSchema, historicalColumns, historicalFormSchema } 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';
  import { last } from 'lodash-es';
  import { useModal } from '/@/components/Modal';
  import { useIntervalFn } from '@vueuse/core';
  import { useInitForm } from './hooks/form';
  // import { getGoafList } from '../../system/algorithm/algorithm.api';

  // 激活的Tab页签

  // 处理矿名选择器相关的逻辑
  const { goafId, goafOptions, mineCodes, getMineTree, initGoafOptions } = useInitForm();
  const activeTab = ref('realtime');

  // 注册实时数据表格
  const { tableContext: ctxRealtime } = useListPage({
    tableProps: {
      // api: getGoafData,
      // beforeFetch(params) {
      //   params.mineCode = last(mineCodes.value);
      // },
      columns,
      formConfig: {
        schemas: searchFormSchema,
        schemaGroupNames: ['常规查询'],
        submitFunc: () => reloadRealtimeTable(true),
      },
      showIndexColumn: false,
      scroll: { x: 'max-content' },
    },
    pagination: false,
  });
  const [registerRealtimeTable, { setTableData, setLoading }] = ctxRealtime;

  function reloadRealtimeTable(showLoading: boolean = false) {
    if (showLoading) {
      setLoading(true);
    }
    return getGoafData({ mineCode: last(mineCodes.value) })
      .then((res) => {
        setTableData(res);
      })
      .finally(() => {
        setLoading(false);
      });
  }

  reloadRealtimeTable();
  const { pause, resume } = useIntervalFn(reloadRealtimeTable, 10000);

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

  // 弹窗引用
  const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
  // const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();

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

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