<template>
  <Modal v-model:open="visible" title="密闭监测详情" width="1200px" @ok="handleOk" @cancel="handleCancel" prefixCls="custom-modal">
    <!-- 基础信息栏（修改布局：每行4列，共两行） -->
    <div class="base-info">
      <div v-for="(item, index) in modalDetailsData.basicInfo" :key="index" class="info-item">
        <span class="label">{{ item.label }}:</span>
        <span class="value" :class="getBasicInfoTagClass(item.value)">
          {{ item.value }}
        </span>
      </div>
    </div>

    <!-- 监测数据卡片 -->
    <div class="data-cards">
      <MiniBoard v-for="(item, index) in modalDetailsData.board" :key="index" type="D" :label="item.label" :value="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="modalDetailsData.demoBlastData" canvasSize="{ width: 95%, height: 95% }" />
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-title">气体浓度曲线</div>
        <div class="chart-placeholder">
          <CustomChart
            :chart-data="modalDetailsData.gasConcentrationData"
            :chart-config="modalDetailsData.gasConcentrationConfig"
            style="height: 100%; width: 100%"
          />
        </div>
      </div>
      <div class="chart-item">
        <div class="chart-title">内外压力及压差曲线</div>
        <div class="chart-placeholder">
          <CustomChart
            :chart-data="modalDetailsData.pressureData"
            :chart-config="modalDetailsData.pressureConfig"
            style="height: 100%; width: 100%"
          />
        </div>
      </div>
    </div>
  </Modal>
</template>

<script setup>
  import { ref } from 'vue';
  import { Modal } from 'ant-design-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 } from '../monitor.data';

  // 控制弹框显隐
  const visible = ref(false);
  // 外部调用显示弹框
  const showModal = () => {
    visible.value = true;
  };
  // 外部调用隐藏弹框
  const hideModal = () => {
    visible.value = false;
  };

  // 确定按钮回调
  const handleOk = () => {
    visible.value = false;
    // 可添加确定后的业务逻辑
  };
  // 取消按钮回调
  const handleCancel = () => {
    visible.value = false;
  };

  // 获取基础信息value对应的标签样式类
  const getBasicInfoTagClass = (value) => {
    switch (value) {
      case '闭内气体涌出':
        return 'tag-danger';
      case '低风险':
        return 'tag-primary';
      case '不可启封':
        return 'tag-warning';
      default:
        return '';
    }
  };
  // 暴露方法给父组件
  defineExpose({
    showModal,
    hideModal,
  });
</script>

<style scoped>
  .base-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 强制每行4列 */
    grid-template-rows: auto auto; /* 两行自动高度 */
    gap: 16px 12px; /* 行列间距（行间距16px，列间距12px） */
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background: #f8f9fc;
  }
  .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;
  }
  .tag-danger {
    color: #f5222d;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .tag-primary {
    color: #1890ff;
    padding: 2px 6px;
    border-radius: 4px;
  }
  .tag-warning {
    color: #faad14;
    padding: 2px 6px;
    border-radius: 4px;
  }

  .data-cards {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    background: #f8f9fc;
  }
  .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 #f0f0f0;
    border-radius: 10px;
    /* background: black; */
    background: #f8f9fc;
  }
  .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>
