<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 新增Tabs组件区分实时/历史数据 -->
  <Tabs v-model:activeKey="activeTab" class="monitoring-page" 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
          >
            <template #displayRender="{ labels }">
              {{ labels[labels.length - 1] }}
            </template>
          </a-cascader>
        </template>
        <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 #form-mine-cascader>
          <a-cascader
            v-model:value="mineCodes"
            :options="getMineTree"
            :field-names="{
              label: 'departName',
              value: 'id',
              children: 'childDepart',
            }"
            show-search
          >
            <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, 'history')" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>
  </Tabs>

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

<script setup lang="ts">
  import { computed, 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, getGoafSelectOption } from './monitor.api';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { useRoute } from 'vue-router';
  import { last } from 'lodash-es';
  import { useMineStore } from '/@/store/modules/mine';
  import { findNodeAll, findPath } from '/@/utils/helper/treeHelper';
  // import { getGoafList } from '../../system/algorithm/algorithm.api';

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

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

  // 注册历史数据表格
  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' },
    },
    exportConfig: {
      url: '/province/alarm/exportProvinceAlarmHistory',
      name: '历史数据',
    },
    pagination: true,
  });
  const [registerHistoryTable] = ctxHistory;

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

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

  const config = {
    id: 'id',
    pid: 'parentId',
    children: 'childDepart',
  };
  const route = useRoute();
  const mineStroe = useMineStore();
  const mineCodes = ref<string[]>([]);
  const getMineTree = computed(() => {
    const id = last(route.fullPath.split('/'));
    return findNodeAll(mineStroe.mineTree, (item) => item.id === id, config);
  });
  const paths = findPath(getMineTree.value, (item) => item.isLeaf, config);

  mineCodes.value = paths.map((e) => e.id);

  const goafId = ref('');
  const goafOptions = ref<any[]>([]);

  getGoafSelectOption({ mineCode: last(mineCodes.value) }).then(({ options, defaultValue }) => {
    goafOptions.value = options;
    goafId.value = defaultValue;
  });
</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>
