<template>
  <div class="dashboard-wrapper">
    <a-card :bordered="false" class="main-card" style="height: auto">
      <div class="dashboard-header">
        <h1 class="dashboard-title">设备实时监控数据</h1>
        <div class="header-controls">
          <div class="time-refresh-container">
            <div class="time-display-wrapper">
              <span class="time-label">当前时间:</span>
              <span class="time-display">{{ time }}</span>
            </div>
            <div class="interval-setting">
              <span class="interval-label">定时刷新:</span>
              <a-input-number
                v-model="refreshInterval"
                :min="5"
                :max="60"
                @change="handleIntervalChange"
                class="interval-input"
                addonAfter="秒" />
            </div>
            <a-button type="primary" @click="redo()" icon="redo" class="refresh-button">
              手动刷新
            </a-button>
          </div>
        </div>
      </div>

      <div class="dashboard-content">
        <div class="dashboard-section energy-section">
          <div class="section-header">
            <h2 class="section-title">电能实时数据</h2>
          </div>
          <div class="section-content">
            <bECenter
              v-if="this.bEShow"
              @eTransmit="getEMessage"
              class="dashboard-component"
              ref="bECenter"
              forceRender/>
          </div>
        </div>

        <!--        <div class="dashboard-section vibration-section">-->
        <!--          <div class="section-header">-->
        <!--            <h2 class="section-title">设备振动实时数据</h2>-->
        <!--          </div>-->
        <!--          <div class="section-content">-->
        <!--            <bVCenter-->
        <!--              v-if="this.bVShow"-->
        <!--              @vTransmit="getVMessage"-->
        <!--              class="dashboard-component"-->
        <!--              ref="bVCenter"-->
        <!--              forceRender/>-->
        <!--          </div>-->
        <!--        </div>-->

        <div class="sensors-row">
          <!--          <div class="dashboard-section temp-humidity-section">-->
          <!--            <div class="section-header">-->
          <!--              <h2 class="section-title">设备温湿度状态实时数据</h2>-->
          <!--            </div>-->
          <!--            <div class="section-content">-->
          <!--              <div class="echarts-container">-->
          <!--                <bYCenter v-if="this.bYShow" @yTransmit="getYMessage" class="next-layer" ref="bYCenter" />-->
          <!--                <bZCenter v-if="this.bZShow" @zTransmit="getZMessage" class="next-layer" ref="bZCenter" forceRender/>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->

          <div class="dashboard-section water-immersion-section">
            <div class="section-header">
              <h2 class="section-title">水浸状态实时数据</h2>
            </div>
            <div class="section-content">
              <div class="echarts-container">
                <bWCenter v-if="this.bWShow" @wTransmit="getWMessage" class="next-layer" ref="bWCenter" forceRender/>
              </div>
            </div>
          </div>
        </div>

        <div class="dashboard-section flow-sensor-section">
          <div class="section-header">
            <h2 class="section-title">流量传感器实时数据</h2>
          </div>
          <div class="section-content">
            <div class="echarts-container">
              <bFCenter v-if="this.bFShow" @FTransmit="getFMessage" class="next-layer" ref="bFCenter" forceRender/>
            </div>
          </div>
        </div>

        <div class="dashboard-section smoke-section">
          <div class="section-header">
            <h2 class="section-title"><i class="anticon anticon-fire"><svg viewBox="64 64 896 896" data-icon="fire" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="""><path d="M834.1 469.2A347.49 347.49 0 0 0 751.2 354l-29.1-26.7a8.09 8.09 0 0 0-13 3.3l-13 37.3c-8.1 23.4-23 47.3-44.1 70.8-1.4 1.5-3 1.9-4.1 2-1.1.1-2.8-.1-4.3-1.5-1.4-1.2-2.1-3-2-4.8 3.7-60.2-14.3-128.1-53.7-202C555.3 171 510 123.1 453.4 89.7l-41.3-24.3c-5.4-3.2-12.3 1-12 7.3l2.2 48c1.5 32.8-2.3 61.8-11.3 85.9-11 29.5-26.8 56.9-47 81.5a295.64 295.64 0 0 1-47.5 46.1 352.6 352.6 0 0 0-100.3 121.5A347.75 347.75 0 0 0 160 610c0 47.2 9.3 92.9 27.7 136a349.4 349.4 0 0 0 75.5 110.9c32.4 32 70 57.2 111.9 74.7C418.5 949.8 464.5 959 512 959s93.5-9.2 136.9-27.3A348.6 348.6 0 0 0 760.8 857c32.4-32 57.8-69.4 75.5-110.9a344.2 344.2 0 0 0 27.7-136c0-48.8-10-96.2-29.9-140.9zM713 808.5c-53.7 53.2-125 82.4-201 82.4s-147.3-29.2-201-82.4c-53.5-53.1-83-123.5-83-198.4 0-43.5 9.8-85.2 29.1-124 18.8-37.9 46.8-71.8 80.8-97.9a349.6 349.6 0 0 0 58.6-56.8c25-30.5 44.6-64.5 58.2-101a240 240 0 0 0 12.1-46.5c24.1 22.2 44.3 49 61.2 80.4 33.4 62.6 48.8 118.3 45.8 165.7a74.01 74.01 0 0 0 24.4 59.8 73.36 73.36 0 0 0 53.4 18.8c19.7-1 37.8-9.7 51-24.4 13.3-14.9 24.8-30.1 34.4-45.6 14 17.9 25.7 37.4 35 58.4 15.9 35.8 24 73.9 24 113.1 0 74.9-29.5 145.4-83 198.4z"></path></svg></i> 空气质量数据</h2>
          </div>
          <div class="section-content">
            <bKCenter v-if="this.bKShow" @kTransmit="getKMessage" class="next-layer" ref="bKCenter" forceRender/>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import bYCenter from './bYCenter.vue'
import bZCenter from './bZCenter.vue'
import bWCenter from './bWCenter.vue'
import bFCenter from './bFCenter.vue'
import bSCenter from './bSCenter.vue'
import bKCenter from './bKCenter.vue'
import bECenter from './bECenter.vue'
import bVCenter from './bVCenter.vue'
import moment from 'moment'

export default {
  name: 'DeviceMonitorDashboard',
  components: {
    bYCenter, bZCenter, bWCenter, bECenter, bVCenter, bSCenter, bKCenter, bFCenter,
  },
  data() {
    return {
      time: '',
      refreshInterval: 30, // 默认30秒
      autoRefreshTimer: null,
      clockTimer: null,
      // 组件显示控制
      bYShow: true,
      bZShow: true,
      bWShow: true,
      bEShow: true,
      bVShow: true,
      bKShow: true,
      bFShow: true,
    }
  },
  mounted() {
    this.updateTime()
    this.startClock()
    this.startAutoRefresh()
  },
  beforeDestroy() {
    this.stopClock()
    this.stopAutoRefresh()
  },
  methods: {
    // 更新当前时间显示
    updateTime() {
      this.time = moment().format('YYYY-MM-DD HH:mm:ss')
    },
    startClock() {
      this.clockTimer = setInterval(() => {
        this.updateTime()
      }, 1000)
    },
    stopClock() {
      if (this.clockTimer) clearInterval(this.clockTimer)
    },

    // 定时刷新逻辑
    startAutoRefresh() {
      this.stopAutoRefresh()
      this.autoRefreshTimer = setInterval(() => {
        this.redo()
      }, this.refreshInterval * 1000)
    },
    stopAutoRefresh() {
      if (this.autoRefreshTimer) clearInterval(this.autoRefreshTimer)
    },
    handleIntervalChange(val) {
      this.refreshInterval = val
      this.startAutoRefresh()
    },

    // 触发所有子组件的刷新方法
    redo() {
      const components = ['bYCenter', 'bZCenter', 'bWCenter', 'bFCenter', 'bECenter', 'bVCenter', 'bKCenter']
      this.$nextTick(() => {
        components.forEach(refName => {
          if (this.$refs[refName] && typeof this.$refs[refName].get === 'function') {
            this.$refs[refName].get()
          }
        })
      })
    },

    // 消息接收
    getYMessage(data) { this.bYShow = data },
    getZMessage(data) { this.bZShow = data },
    getWMessage(data) { this.bWShow = data },
    getFMessage(data) { this.bFShow = data },
    getEMessage(data) { this.bEShow = data },
    getVMessage(data) { this.bVShow = data },
    getKMessage(data) { this.bKShow = data },
  }
}
</script>

<style scoped lang="scss">
.dashboard-wrapper {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.main-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

  :deep(.ant-card-body) {
    padding: 24px;
  }
}

/* 顶部 Header 样式 */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  left: -80px; /* 向左移动50px */
}

.dashboard-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  position: relative;
  left: 150px; /* 向右移动30px（通过正值向右移动） */
}

.header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 500px;
}

.time-refresh-container {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  padding: 12px 20px;
  border-radius: 50px;
  border: 1px solid #dce6f5;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  min-width: 550px;
  justify-content: space-between;
}

.time-display-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 120px;
}

.time-label {
  font-size: 12px;
  color: #7f8c8d;
  margin-bottom: 4px;
  font-weight: 500;
}

.time-display {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.interval-setting {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.interval-label {
  font-size: 14px;
  font-weight: 600;
  color: #34495e;
  white-space: nowrap;
}

.interval-input {
  width: 80px !important;
  border-radius: 6px;
  height: 32px;
}

.refresh-button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  border: none;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
  transition: all 0.3s ease;
  min-width: 90px;
  height: 32px !important;
  border-radius: 6px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
  }
}

/* 内容布局 */
.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sensors-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.sensors-row > .dashboard-section {
  flex: 1;
  min-width: 300px;
}

.dashboard-section {
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: white;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }
}

.section-header {
  padding: 20px 25px 0 25px;
}

.section-title {
  margin: -10px;
  font-size: 20px;
  font-weight: 600;
  color: white;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-content {
  padding: 15px;
}

.dashboard-component {
  width: 100%;
}

// 温湿度区域 - 橙色主题
.temp-humidity-section {
  border-top: 4px solid #e67e22;

  .section-header {
    background: linear-gradient(90deg, #e67e22, #d35400);
  }
}

// 水浸传感器区域 - 蓝绿色主题
.water-immersion-section {
  border-top: 4px solid #16a085;

  .section-header {
    background: linear-gradient(90deg, #16a085, #0a7d6c);
  }
}

// 流量传感器区域 - 紫色主题
.flow-sensor-section {
  border-top: 4px solid #9b59b6;

  .section-header {
    background: linear-gradient(90deg, #9b59b6, #8e44ad);
  }
}

// 烟雾传感器区域 - 青色主题
.smoke-section {
  border-top: 4px solid #1abc9c;

  .section-header {
    background: linear-gradient(90deg, #1abc9c, #16a085);
  }
}

// 电能区域 - 蓝色主题
.energy-section {
  border-top: 4px solid #3498db;

  .section-header {
    background: linear-gradient(90deg, #3498db, #2980b9);
  }
}

// 振动传感器区域 - 绿色主题
.vibration-section {
  border-top: 4px solid #2ecc71;

  .section-header {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
  }
}

/* 图表网格 */
.multi-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  width: 100%;
}

.chart-item, .component-container {
  width: 100%;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .top-row, .bottom-row {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .control-bar {
    width: 100%;
    flex-wrap: wrap;
    padding: 8px;
    gap: 8px;

    .divider { display: none; }
    .control-item { width: 100%; justify-content: space-between; }
    .refresh-btn { width: 100%; margin: 4px 0 0 0; }
  }
}
</style>