
<template>
  <a-card :bordered="false" style="margin-top: -35px">
    <!-- 刷新时间与刷新按钮 -->
    <template slot="extra">
      <a-row :gutter="24">
        <a-col :span="8" style="margin-left: -20%">
          <span style="font-weight: bold;font-size: 18px;line-height: 1.8;padding: 0px 0px;">刷新时间:</span>
        </a-col>
        <a-col :span="14">
          <a-input v-model="time" readOnly style="
                   font-weight: bold;
                   font-size: 18px;
                   padding: 0px 0px;
                   line-height: 3;
                   border: 0px solid #d9d9d9"/>
        </a-col>
        <a-col :span="1">
          <a-button style="position: absolute;" type="primary" @click="redo()" icon="redo">刷新</a-button>
        </a-col>
      </a-row>
    </template>

    <!-- 单个设备信息展示 -->
    <a-row class="row-border card-border" :style="'background-image:url('+rowbg+');background-size: cover; height:260px; width:96.5%; left:31px'">
      <!-- 状态标签 -->
      <div class="tag-info">
        <div class="tag-logo"></div>
        <span style="font-weight: bold;margin-left: 20px">
          <span style="display: inline-block; width:30px;margin-left: 0px;border-radius: 5px;background-color: rgba(48,201,86,0.88);">运行</span>
        </span>
        <span style="font-weight: bold;margin-left: 12px">
          <span style="display: inline-block; width:30px;margin-left: 0px;border-radius: 5px;background-color: rgba(255,165,0,0.88);">待机</span>
        </span>
        <span style="font-weight: bold;margin-left: 12px">
          <span style="display: inline-block; width:30px;margin-left: 0px;border-radius: 5px;background-color: rgba(211 211 211 / 88%);">停机</span>
        </span>
        <span style="font-weight: bold;margin-left: 12px">
          <span style="display: inline-block; width:30px;margin-left: 0px;border-radius: 5px;background-color: rgb(243,43,63);">故障</span>
        </span>
      </div>

      <!-- 设备基本信息卡片 -->
      <a-col :span="4" style="margin-top: 30px;margin-left: 30px">
        <a-card size="small"
                :style="{
                  backgroundColor: 'white',
                  border:'4px solid',
                  borderRadius: '20px',
                  borderColor: selectedDevice.status==='3'?'rgb(243,43,63)':selectedDevice.status==='2'?'rgba(48,201,86,0.88)':selectedDevice.status==='1'?'rgba(255,165,0,0.88)':'rgba(211 211 211 / 88%)'
                }">
          <div slot="title" class="text-limit">{{ selectedDevice.deviceName }}</div>
          <template slot="extra">
            <a-button style="height: 28px;padding: 4px;" type="primary" icon="safety" @click="showModal">
              <span style="margin-left: 1px;">360卫士</span>
            </a-button>
          </template>
          <div style="margin-top:-10px;height: 76px;">
            <div>设备编号：{{ selectedDevice.deviceCode }}</div>
            <div style="margin-top: 10px">未处理风险：{{ selectedDevice.count }}</div>
            <div style="margin-top: 10px">状态：{{ deviceStatusText }}</div>
          </div>
        </a-card>
      </a-col>

      <!-- 图片展示 -->
      <a-col :span="7">
        <div class="image-container">
<!--          <a-tooltip placement="right">-->
<!--            <template #title>{{ selectedDevice.deviceName }}-->
<!--              <p><strong>设备编号：</strong>{{ selectedDevice.deviceCode }}</p>-->
<!--              <p><strong>状态：</strong>{{ deviceStatusText }}</p>-->
<!--              <p><strong>未处理风险：</strong>{{ selectedDevice.count}}</p>-->
<!--              <p><strong>状态：</strong>{{ selectedDevice.statu}}</p>-->
<!--              <p><strong>状态：</strong>{{ selectedDevice.id}}</p>-->
<!--            </template>-->
<!--            &lt;!&ndash; 图片容器 &ndash;&gt;-->
<!--            <div class="image-wrapper">-->
<!--              &lt;!&ndash; 图片 &ndash;&gt;-->
<!--              <img :src="getImgView(selectedDevice.img)" alt="图片不存在" style="width: 100%; height: 100%">-->
<!--              &lt;!&ndash; 设备名称覆盖层 &ndash;&gt;-->
<!--              <div class="device-name-overlay">{{ selectedDevice.deviceName }}</div>-->
<!--            </div>-->
<!--          </a-tooltip>-->
          <div class="image-wrapper">
            <div class="tooltip-overlay show-on-load">
              <p><strong>设备编号：</strong>{{ selectedDevice.deviceCode }}</p>
              <p><strong>状态：</strong>{{ deviceStatusText }}</p>
              <p><strong>未处理风险：</strong>{{ selectedDevice.count }}</p>
              <p><strong>状态：</strong>{{ selectedDevice.statu }}</p>
              <p><strong>ID：</strong>{{ selectedDevice.id }}</p>
            </div>
            <!-- 图片 -->
            <img :src="getImgView(selectedDevice.img)" alt="图片不存在" style="width: 100%; height: 100%">
          </div>
        </div>
      </a-col>

      <!-- 能耗图表 -->
      <a-col :span="11">
        <div id="chart" class="oneChart"></div>
      </a-col>
    </a-row>

    <!-- 实时仪表参数 -->
    <a-card :bordered="false" style="margin-top: 20px">
      <div class="echarts-container">
        <div class="component-container">
<!--          <bYCenter v-if="bYShow" @yTransmit="getYMessage" class="next-layer" ref="bYCenter" :deviceId="selectedDevice.id" forceRender style="width: 100%"/>&lt;!&ndash;烟雾实时数据&ndash;&gt;-->
<!--          <bZCenter v-if="bZShow" @zTransmit="getZMessage" class="next-layer" ref="bZCenter" :deviceId="selectedDevice.id" forceRender style="width: 100%"/>&lt;!&ndash;倾角数据&ndash;&gt;-->
          <bWCenter v-if="bWShow" @wTransmit="getWMessage" class="next-layer" ref="bWCenter" :deviceId="selectedDevice.id" forceRender style="width: 100%"/><!--水侵-->
<!--          <bFCenter v-if="bFShow" @FTransmit="getFMessage" class="next-layer" ref="bFCenter" :deviceId="selectedDevice.id" forceRender style="width: 48%” /> &lt;!&ndash;流量传感器&ndash;&gt;-->
<!--           <bFCenter v-if="bFShow" @FTransmit="getFMessage" class="next-layer" ref="bFCenter" :deviceId="selectedDevice.id" forceRender style="width: 100%" />-->
<!--      </div>-->
<!--      <div class="echarts-container-2">-->
<!--        <bKCenter v-if="bKShow" @kTransmit="getKMessage" class="next-layer" ref="bKCenter" :deviceId="selectedDevice.id" forceRender style="width: 48%“ />   &lt;!&ndash;地坑环境实时数据&ndash;&gt;-->
        <bKCenter v-if="bKShow" @kTransmit="getKMessage" class="next-layer" ref="bKCenter" :deviceId="selectedDevice.id" forceRender style="width: 100%" />
<!--        <bECenter v-if="bEShow" @eTransmit="getEMessage" class="next-layer" ref="bECenter" forceRender/>-->
        <bECenter v-if="bEShow" @eTransmit="getEMessage" class="next-layer" ref="bECenter" :deviceId="selectedDevice.id" forceRender style="width: 100%"/> <!--电能监测-->
        <bVCenter v-if="bVShow" @vTransmit="getVMessage" class="next-layer" ref="bVCenter" :deviceId="selectedDevice.id" forceRender style="width: 100%"/> <!--振动监测-->
        </div>
      </div>

    </a-card>
  </a-card>
</template>

<script>
import bYCenter from './bYCenter.vue';
import bZCenter from './bZCenter.vue';
import bWCenter from './bWCenter.vue';
import bFCenter from './bFCenter.vue';
import bKCenter from './bKCenter.vue';
import bECenter from './bECenter.vue';
import bVCenter from './bVCenter.vue';
import moment from 'moment';
import { getAction } from "@api/manage";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { mixinDevice } from "@/utils/mixin";

export default {
  name: "SingleDeviceDashboard",
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    bYCenter,
    bZCenter,
    bWCenter,
    bFCenter,
    bKCenter,
    bECenter,
    bVCenter
  },
  data() {
    return {
      time: '',
      // 实时数据控制变量
      bYShow: true,
      bZShow: true,
      bWShow: true,
      bFShow: true,
      bKShow: true,
      bEShow: true,
      bVShow: true,

      selectedDevice: {},
      rowbg: require('@/assets/bcicon/rowbg.png'),
      deviceId: '1384437481886601217'

    };
  },
  mounted() {
    this.get(this.deviceId);
    this.getNowTime(true);
  },
  computed: {
    deviceStatusText() {
      const status = this.selectedDevice.status;
      switch (status) {
        case '3':
          return '故障';
        case '2':
          return '运行';
        case '1':
          return '待机';
        case '0':
          return '停机';
        default:
          return '';
      }
    }
  },
  methods: {
    getNowTime(isAll) {
      let now = new Date();
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let today = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      let second = now.getSeconds();
      let nowTime = isAll ? `${year}-${this.fillZero(month)}-${this.fillZero(today)} ${this.fillZero(hour)}:${this.fillZero(minute)}:${this.fillZero(second)}` : `${year}-${this.fillZero(month)}-${this.fillZero(today)}`;
      this.time = nowTime;
      return nowTime;
    },
    fillZero(str) {
      return str < 10 ? '0' + str : str;
    },
    get(deviceId) {
      getAction("/device/buDevice/getAllDeviceStatussblx", { deviceId: deviceId }).then((res) => {
        if (res.success && res.result) {
          console.log("res.result回传数据" + res.result);
          this.selectedDevice = { ...res.result, isActive: true };
          this.getAllPowerStatistics(this.selectedDevice.id);
        } else {
          this.$message.warning(res.message || "获取设备失败");
        }
      });
    },
    getAllPowerStatistics(id) {
      let currentYear = new Date().getFullYear();
      getAction("device/buDeviceRunTime/devicePowerStatisticsById", {
        selectYear: currentYear,
        deviceId: id
      }, 'get').then(res => {
        this.initChart(res.result, '设备运行能耗统计(年度)');
      });
    },
    initChart(data, title) {
      let myChart = this.$echarts.getInstanceByDom(document.getElementById('chart'));
      if (!myChart) {
        myChart = this.$echarts.init(document.getElementById('chart'));
      }

      let xData = [];
      let yData = [];

      if (data) {
        for (let i = 0; i < data["x"].length; i++) {
          xData.push(data["x"][i] + "月");
          yData.push(Math.round(data["y"][i]));
        }
      }

      const myOptions = {
        title: {
          left: 'center',
          text: title,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.9)',
          borderColor: '#ccc',
          textStyle: {
            color: '#333'
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          name: "月份",
          axisLine: {
            lineStyle: {
              color: '#7e57c2'
            }
          },
          axisLabel: {
            rotate: 45,
            interval: 0,
            margin: 20,
            fontSize: 12,
            formatter: function(value) {
              return value;
            }
          }
        },
        yAxis: {
          type: 'value',
          name: "能耗/kW·h",
          axisLine: {
            lineStyle: {
              color: '#7e57c2'
            }
          }
        },
        grid: {
          top: 40,
          bottom: 50,
          left: 50,
          right: 25
        },
        series: [{
          data: yData,
          type: 'line',
          name: "能耗",
          smooth: true,
          itemStyle: {
            color: '#7e57c2'
          },
          lineStyle: {
            width: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(126,87,194,0.4)'
              }, {
                offset: 1,
                color: 'rgba(126,87,194,0)'
              }]
            }
          },
          label: {
            show: true,
            position: 'top',
            formatter: function (params) {
              return params.value !== 0 ? params.value : '';
            }
          }
        }],
        animationType: 'linear',
        animationDuration: 1000
      };

      myChart.setOption(myOptions, true);
    },
    showModal() {
      this.isModalVisible = true;
    },
    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;
    },
    redo() {
      this.getNowTime(true);
      this.get(this.deviceId);

      this.$nextTick(() => {
        ['bYCenter', 'bZCenter', 'bWCenter', 'bFCenter', 'bECenter', 'bVCenter', 'bKCenter'].forEach(ref => {
          if (this.$refs[ref]) this.$refs[ref].get();
        });
      });
    }
  }
};
</script>
<style lang="scss">
  .row-border {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    border: 0.6px solid #7e57c2; // 添加表格外边框#f1f1f1;
  }
</style>
<style scoped lang="scss">

.echarts-container {
  //display: flex;
  //flex-wrap: wrap;
  //gap: 40px; /* 在此容器内的所有子组件之间增加 20px 的间距 */
  display: flex;
  flex-direction: column; /* 纵向排列 */
  gap: 5px; /* 组件间的垂直间距 */
  width: 100%; /* 占满父容器宽度 */
}

.component-container {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  gap: 10px; /* 组件间的垂直间距 */
  width: 100%; /* 占满父容器宽度 */

}

.next-layer {
  width: 100%;
}

.image-container {
  margin-top: -20px;
  margin-left: 112px;
  width: 260px;
  height: 240px;
}

.text-limit {
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-border {
  padding: 20px;
  height: 280px;
}

.oneChart {
  top: -13px;
  width: 100%;
  height: 210px;
  margin-left: 50px;
  left: -10px;
}

.card-border {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
  border: 0.6px solid #7e57c2; // 添加表格外边框#f1f1f1;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  left: -100px;
}

.tooltip-overlay {
  position: absolute;
  top: 65px;
  right: -170px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  color: #333;
  z-index: 10;
  white-space: nowrap;
}

/* 默认显示提示框 */
.show-on-load {
  display: block !important;
}

.device-name-overlay {
  position: absolute;
  top: 8px; /* 距离顶部的距离 */
  left: 100%; /* 居中对齐 */
  transform: translateX(-50%); /* 精确居中 */
  background-color: rgba(255, 255, 255, 0.9); /* 增强透明度控制 */
  padding: 6px 12px; /* 微调内边距 */
  border-radius: 11px; /* 更圆润的角 */
  font-size: 16px; /* 增大字体 */
  font-weight: bold;
  color: #2c3e50; /* 更深的颜色提高可读性 */
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); /* 添加柔和阴影 */
  border: 1px solid #ddd; /* 添加浅色边框 */
}

.tag-info {
  width: 100%;
  height: 20px;
}
</style>