<template>
  <BasicModal
    v-bind="$attrs"
    title="密闭监测详情"
    width="1400px"
    :bodyStyle="{ padding: `0 20px 0 20px` }"
    @register="register"
    @close="okHandler"
    @ok="okHandler"
  >
    <!-- 基础信息栏（修改布局：每行4列，共两行） -->
    <div class="base-info">
      <div v-for="(item, index) in modalDetailsData.basicInfo" :key="index" class="info-item">
        <span class="label">{{ item.label }}:</span>
        <component :is="contextRender(item)"></component>
      </div>
    </div>

    <!-- 监测数据卡片 -->
    <div class="data-cards">
      <MiniBoard
        v-for="(item, index) in modalDetailsData.board"
        :key="index"
        type="D"
        :label="item.label"
        :value="dataRef[item.value] || '-'"
        layout="val-top"
      />
    </div>

    <!-- 图表区域 -->
    <div class="chart-area">
      <div class="chart-item">
        <div class="chart-title">爆炸三角形</div>
        <div class="chart-placeholder">
          <BlastDelta :posMonitor="dataRef" :canvasSize="{ width: '95%', height: '95%' }" text-color="#000" />
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-title">气体浓度曲线</div>
        <div class="chart-placeholder">
          <CustomChart
            :chart-data="{ chartData: dataArray }"
            :chart-config="modalDetailsData.gasConcentrationConfig"
            :chart-option="{
              textStyle: {
                color: '#000',
              },
            }"
            style="height: 100%; width: 100%"
          />
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-title">内外压力及压差曲线</div>
        <div class="chart-placeholder">
          <CustomChart
            :chart-data="{ chartData: dataArray }"
            :chart-config="modalDetailsData.pressureConfig"
            :chart-option="{
              textStyle: {
                color: '#000',
              },
            }"
            style="height: 100%; width: 100%"
          />
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref } from 'vue';
  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
  import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';
  import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
  import { modalDetailsData, tagCellRender } from '../monitor.data';
  import { concat, get, last, takeRight } from 'lodash-es';
  import { h } from 'vue';
  import { getGoafData } from '../monitor.api';
  import { useIntervalFn } from '@vueuse/core';
  import dayjs from 'dayjs';

  export default defineComponent({
    components: { BasicModal, MiniBoard, BlastDelta, CustomChart },
    emits: ['close', 'register'],
    setup(__, { emit }) {
      const dataRef = ref<any>({});
      const dataArray = ref<any[]>([]);

      // 添加元素，数组最多15项，按队列排布
      const push = (item) => {
        item.readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
        dataArray.value = takeRight(concat(dataArray.value, item), 15);
      };

      // const chartData = computed(() => {
      //   return {
      //     readTime: dataArray.value.map((item) => item.readTime),
      //     sourcePressure: dataArray.value.map((item) => item.sourcePressure),
      //     o2Val: dataArray.value.map((item) => item.o2Val),
      //     coVal: dataArray.value.map((item) => item.coVal),
      //   };
      // });
      function getTagType(level: string) {
        switch (level) {
          case '1':
            return 'red';
          case '2':
            return 'volcano';
          case '3':
            return 'orange';
          case '4':
            return 'success';
          default:
            return 'default';
        }
      }

      const [register] = useModalInner((d) => {
        if (!d) return;
        dataRef.value = d;
        push(d);
        resume();
      });

      function contextRender({ value, tag }: any) {
        if (tag) return tagCellRender(get(dataRef.value, value));
        return h('span', get(dataRef.value, value));
      }

      function fetchDetailData() {
        const { mineCode, goafId } = dataRef.value;
        getGoafData({ mineCode, goafId }).then((r) => {
          dataRef.value = last(r);
          push(dataRef.value);
          // push(dataRef.value)
        });
      }

      const { pause, resume } = useIntervalFn(
        () => {
          fetchDetailData();
        },
        2000,
        {
          immediate: false,
        }
      );

      function okHandler() {
        pause();
        emit('close');
      }

      return {
        dataRef,
        modalDetailsData,
        dataArray,
        get,
        getTagType,
        register,
        contextRender,
        okHandler,
      };
    },
  });
</script>
<style lang="less" scoped>
  .base-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 强制每行4列 */
    grid-template-rows: auto auto; /* 两行自动高度 */
    gap: 16px 12px; /* 行列间距（行间距16px，列间距12px） */
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid @border-color-base;
    border-radius: 10px;
    background: @card-bg-color;
  }
  .info-item {
    display: flex;
    align-items: center;
    /* 适配文字过长的情况 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .label {
    color: #666;
    margin-right: 8px;
    min-width: 80px;
    flex-shrink: 0; /* 标签宽度不收缩 */
  }
  .value {
    color: #333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .data-cards {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid @border-color-base;
    border-radius: 10px;
    background: @card-bg-color;
  }
  .data-card {
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
  }
  .card-value {
    font-size: 20px;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 4px;
  }
  .card-label {
    font-size: 14px;
    color: #666;
  }

  .chart-area {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
    border: 1px solid @border-color-base;
    border-radius: 10px;
    /* background: black; */
    background: @card-bg-color;
  }
  .chart-item {
    flex: 1;
    min-width: 200px;
  }
  .chart-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
  }
  .chart-placeholder {
    width: 100%;
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
  }
  .chart-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
