<template>
  <!-- 主容器卡片，固定高度850px -->
  <a-card :bordered="false" style="height: 850px">
    <template>
      <!-- 顶部标题栏 -->
      <a-row :gutter="6">
        <a-col>
          <!-- 页面标题 -->
          <span style="font-size: 20px;padding: 0px 0px;line-height: 3;margin-left: 725px;font-weight: bold">地坑内气体含量监测</span>
          <!-- 刷新时间显示 -->
          <span style="font-size: 16px;padding: 0px 0px;line-height: 3;margin-left: 390px">刷新时间:</span>
          <!-- 时间输入框，只读 -->
          <a-input v-model="time" style="font-size: 16px; border: 0px solid #d9d9d9;line-height: 3;width: 175px" readOnly></a-input>
          <!-- 刷新按钮 -->
          <a-button shape="round" type="primary" @click="redo()" icon="redo">刷新</a-button>
        </a-col>
      </a-row>
    </template>

    <!-- 气体监测数据展示区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <div class="salesCard">
          <!-- 气体监测设备卡片网格布局，每行6列 -->
          <a-row :gutter="8">
            <!-- 遍历positionList数组，为每个设备生成一个卡片 -->
            <a-col :span="3" v-for="(card, index) in positionList" style="margin-bottom: 2px;" :key="card.id">
              <!-- 设备卡片，根据是否选中应用不同样式 -->
              <a-card size="small" :style="card.isActive ? activeCardStyle : defaultCardStyle" @click="handleCardClick(index,card)">
                <!-- 卡片标题，显示设备名称和编码 -->
                <div slot="title" style="height: 10px;padding-top: 0px">
                  {{ card.deviceName+card.deviceCode }}
                </div>
                <!-- 卡片内容，显示各种气体浓度数据 -->
                <div style="height: 75px;padding-top: 0px">
                  <div>氧气(%VOL)：{{ card.o2 }} </div>
                  <div>一氧化碳(ppm)：{{ card.co }}</div>
                  <div>可燃性气体(%LEL)：{{ card.ch4 }}</div>
                  <div>硫化氢(ppm)：{{ card.h2s }}</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
          <div style="margin-top: 20px; margin-left: 0; margin-bottom: 10px; padding-left: 20px;">
            <span style="font-size: 16px; padding: 0px 0px; line-height: 3;">气体类型:</span>
            <a-select v-model="selectedGasType" style="width: 150px; margin-left: 10px">
              <a-select-option v-for="gas in gasTypeOptions" :key="gas.value" :value="gas.value">
                {{ gas.label }}
              </a-select-option>
            </a-select>
          </div>
          <!-- 将下拉框和图表移到底部 -->
          <div style="position: absolute; bottom: 20px; width: 95%">
            <!-- 气体浓度趋势图组件，传递当前选中设备ID -->
            <earlyLine ref="earlyLine" :deviceId="this.echartsDeviceId" :gasType="this.selectedGasType" style="height: 500px"/>
          </div>
        </div>
      </a-form>
    </div>
  </a-card>
</template>

<script>// 导入API请求方法
import { getAction } from '@api/manage'
// 导入气体浓度趋势图组件
import earlyLine from './EarlyLineEchart'

export default {
  name: 'BuEarlyDataList',
  components: {
    earlyLine,
  },
  data() {
    return {
      time: '',                             // 当前时间显示
      positionList: [],                     // 设备列表数据
      url: {
        list: "/device/buDeviceOnline/getAirQuality",  // 获取气体质量数据的API接口
      },
      // 激活状态卡片样式（浅蓝色背景）
      activeCardStyle: { backgroundColor: 'lightblue', border: '4px solid', borderRadius: '20px', },
      defaultCardStyle: {
        backgroundColor: 'white',
        border: '4px solid',
        borderRadius: '20px',
        borderColor: 'lightblue',
      },
      gasTypeOptions: [
        { value: 'o2', label: '氧气(%VOL)' },
        { value: 'co', label: '一氧化碳(ppm)' },
        { value: 'ch4', label: '可燃性气体(%LEL)' },
        { value: 'h2s', label: '硫化氢(ppm)' },
      ],
      echartsDeviceId: '',               // 当前选中设备的ID，用于传递给图表组件
      selectedGasType: 'o2'
    }
  },

  // 挂载后获取当前时间
  mounted() {
    this.getNowTime(true)
  },

  // 创建时获取设备数据
  created() {
    this.get()
  },

  methods: {
    // 获取当前时间方法
    getNowTime(isAll) {
      let now = new Date();
      let year = now.getFullYear();        // 获取年份
      let month = now.getMonth() + 1;      // 获取月份（0-11，需要+1）
      let today = now.getDate();           // 获取日期
      let hour = now.getHours();           // 获取小时
      let minute = now.getMinutes();       // 获取分钟
      let second = now.getSeconds();       // 获取秒数
      let nowTime = ''

      // 根据isAll参数决定返回完整时间还是仅日期
      if (isAll) {
        // 返回年月日时分秒，月份、日期等不足两位的前面补0
        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today) + ' ' + this.fillZero(hour) + ':' + this.fillZero(minute) + ':' + this.fillZero(second)
      } else {
        // 返回年月日
        nowTime = year + '-' + this.fillZero(month) + '-' + this.fillZero(today)
      }

      this.time = nowTime;
      return nowTime
    },

    // 给时间数字补零的方法（小于10的数字前面加0）
    fillZero(str) {
      var realNum;
      if (str < 10) {
        realNum = '0' + str;
      } else {
        realNum = str;
      }
      return realNum;
    },

    // 处理卡片点击事件，选中某个设备卡片
    handleCardClick(index, value) {
      console.log("index,value" + index, value)
      // 将所有卡片设为非激活状态
      this.positionList.forEach(card => {
        card.isActive = false;
      });
      // 将点击的卡片设为激活状态
      this.positionList[index].isActive = true;
      // 更新图表组件需要显示的设备ID
      this.echartsDeviceId = value.deviceId;
    },

    // 获取设备列表数据
    get() {
      getAction(this.url.list, {}).then((res) => {
        if (res.success) {
          // 将返回的数据映射为组件内部使用的格式，添加isActive属性
          this.positionList = res.result.map(item => {
            return {
              ...item,
              isActive: false,
            };
          })
        }

        // 如果有数据且尚未设置选中设备，则默认选中第一个
        if (res.result.length > 0 && !this.echartsDeviceId) {
          this.positionList[0].isActive = true;
          this.echartsDeviceId = res.result[0].deviceId;
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    // 刷新数据方法
    redo() {
      this.getNowTime(true)           // 更新时间显示
      this.get()                      // 重新获取设备数据
      this.$refs.earlyLine.redoChart() // 调用子组件的刷新图表方法
    },
  },
}
</script>

<style scoped>
/* 样式作用域限定 */
</style>
