<template>
  <div style="width: 100%;height: 100%;padding: 15px;">

    <el-card class="head_card"
      shadow="always">
      <el-row class="head_card_row">
        <el-col :span="6"
          class="head_card_item">
          <span class="button_title">当前设备：</span>
          <el-select v-model="value"
            placeholder="请选择"
            @change="selectDevice">
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="6"
          class="head_card_item">
          <span class="button_title">当前设备状态：</span>

          <el-tag type="success"
            v-if="device.statue === 1">设备在线</el-tag>

          <el-tag type="danger"
            v-else-if="device.statue === 0">设备离线</el-tag>
          <el-tag v-else>无设备</el-tag>
        </el-col>

        <el-col :span="4"
          class="head_card_item">
          <span class="button_title">当前设备X坐标：</span>
          <span style="font-size: 17px;font-weight: bold;">{{ device.x }}</span>
        </el-col>
        <el-col :span="4"
          class="head_card_item">
          <span class="button_title">当前设备Y坐标：</span>
          <span style="font-size: 17px;font-weight: bold;">{{ device.y }}</span>
        </el-col>
        <el-col :span="4"
          class="head_card_item">
          <span class="button_title">当前设备Z坐标：</span>
          <span style="font-size: 17px;font-weight: bold;">{{ device.z }}</span>
        </el-col>
      </el-row>

    </el-card>



    <el-card class="echart_card">


      <!-- 图例 -->
      <div class="tips">
        <el-card class="box-card">
          <div class="legend-item">
            <div class="color-box"
              style="background-color: #7CFC00;"></div>
            <span>展 示 柜</span>
          </div>
          <div class="legend-item">
            <div class="color-box"
              style="background-color: #f7b500;"></div>
            <span>办 公 桌</span>
          </div>
          <div class="legend-item">
            <div class="color-box"
              style="background-color: #000000;"></div>
            <span>定 位 器</span>
          </div>
        </el-card>
      </div>

      <!-- 室内俯视图 -->
      <div ref="echart"
        id="echart"></div>

    </el-card>


  </div>

</template>

<script>
import api from "@/api/item/device";
import * as echarts from 'echarts';

export default {
  data() {
    return {
      device: [],
      options: [],
      value: '',
      deviceId: '',
      coordinateData: [], // 坐标数据
    }
  },
  mounted() {
    this.checkRoute(this.$route.query.id, this.$route.query.deviceId);
    this.initEchart();
    this.getOptions();
    this.getCoordinateData()
    console.log(this.value);

    setInterval(() => {
      if (this.value != null && this.value != '') {
        this.selectDevice(this.value); // 定时刷新当前设备数据
        this.getCoordinateData(); // 定时刷新坐标数据
      }
    }, 1000)
  },

  methods: {
    // 路由跳转判断
    checkRoute(value, v2) {
      console.log(value);

      if (value != null) {
        this.value = value;
        this.deviceId = v2;
        this.selectDevice(value);
      }
    },

    // 获取设备选项
    getOptions() {
      api.getDeviceOptions().then(res => {
        console.log(res.data);

        this.options = res.data;
      })
    },
    // 选择设备
    selectDevice(id) {
      api.getDeviceData(id).then(res => {
        console.log(res.data);
        this.device = res.data;
        this.deviceId = res.data.deviceid;  // 获取选中的设备ID

        this.updateEchartData(); // 更新ECharts图表数据
      })
    },

    // 获取坐标
    getCoordinateData() {
      api.getCoordinateData().then(res => {
        console.log(res.data);
        // 过滤出statue为0的坐标数据
        this.coordinateData = res.data.filter(item => item.statue === 1);
        this.updateEchartData(); // 更新ECharts图表数据
      });
    },


    // 更新ECharts图表数据
    updateEchartData() {
      console.log('Device:', this.device);  // 查看设备数据
      console.log('Coordinate Data:', this.coordinateData);  // 查看坐标数据



      // 获取选中的设备的 deviceid
      const selectedDeviceId = this.deviceId;

      // 扩展 coordinatePoints 数据为包含 deviceid 和颜色的对象
      const coordinatePoints = this.coordinateData.map(item => ({
        value: [item.coordinate[0] * 100, item.coordinate[1] * 100],  // 将 x 和 y 坐标都乘以 100     
        deviceid: item.deviceid,
        symbol: item.deviceid === selectedDeviceId
          ? 'image://' + require('@/assets/png/device-selected.png')  // 选中设备时显示的图片
          : 'image://' + require('@/assets/png/device.png'),           // 默认设备显示的图片
      }));

      // 直接更新系列数据
      this.echart.setOption({
        series: [
          {
            name: '设备坐标',
            type: 'scatter',
            data: coordinatePoints,
            symbolSize: 30,
            symbol: coordinatePoints.map(item => item.symbol),
          }
        ]
      }, false); // 加上 false 确保重新渲染
    },



    // 初始化ECharts
    initEchart() {
      this.echart = echarts.init(this.$refs.echart);
      console.log(11);

      this.echart.setOption(this.getOption());

    },

    // 获取ECharts图表配置
    getOption() {
      var option = {
        grid: {
          left: '12%',  // 设定左边距为容器宽度的10%
          right: '3%', // 设定右边距为容器宽度的10%
          top: '5%',     // 设定上边距为容器高度的5%
          bottom: '5%'   // 设定下边距为容器高度的5%
        },
        tooltip: {
          trigger: 'item', // 设置触发方式为 item (即每个点)
          formatter: function (params) {
            if (params.seriesName !== '设备坐标')
              return

            // 你可以定制提示框的内容
            const { deviceid, value } = params.data;
            return `设备ID: ${deviceid}<br>设备坐标: (${value[0]}, ${value[1]})`;
          }
        },
        title: {
          text: '室内俯视图',
          left: 'center'
        },
        xAxis: {
          type: 'value',
          min: 0,
          max: 850, // x轴的最大值
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          splitNumber: 2, // 设置分割数为2，通常与formatter配合使用
          axisLabel: {
            formatter: function (value) {
              return value === 0 || value === 850 ? value : ''; // 仅显示0和最大值
            },
            interval: 0 // 显示指定刻度，不受默认的自动分割控制
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 870, // y轴的最大值
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: function (value) {
              return value === 0 || value === 870 ? value : ''; // 仅显示0和最大值
            },
            interval: 0 // 显示指定刻度
          }
        },
        series: [
          { data: [10.304, 2.345], symbolSize: 10, type: 'scatter' },
          {
            data: [
              [0, 0],
              [0, 870],
              [850, 870],
              [850, 0],
              [0, 0]
            ],
            symbolSize: 0,
            type: 'line'
          },
          {
            data: [
              [870, 550],
              [265, 550],
              [265, 870]
            ],
            symbolSize: 0,
            type: 'line'
          },
          {
            data: [
              [0, 870],
              [35, 870],
              [35, 230],
              [0, 230],
              [0, 870],
            ],
            symbolSize: 0,
            type: 'line', // 矩形边框
            areaStyle: {
              color: '#7CFC00', // 填充颜色
              opacity: 0.5   // 填充透明度
            },
            lineStyle: {
              show: false,
              opacity: 0
            }
          },

          {
            data: [
              [265, 605],
              [195, 605],
              [195, 765],
              [265, 765],
              [265, 605],
            ],
            symbolSize: 0,
            type: 'line', // 矩形边框
            areaStyle: {
              color: '#f7b500', // 填充颜色
              opacity: 0.5   // 填充透明度
            },
            lineStyle: {
              show: false,
              opacity: 0
            }
          },

          {
            data: [
              [35, 0], // 左上角
              [35, 230], // 右上角
              [105, 230], // 右下角
              [105, 110], // 左下角
              [195, 110], // 左下角
              [195, 0], // 左下角
            ],
            symbolSize: 0,
            type: 'line', // 矩形边框
            areaStyle: {
              color: '#f7b500', // 填充颜色
              opacity: 0.5   // 填充透明度
            },
            lineStyle: {
              show: false,
              opacity: 0
            }
          },
          {
            data: [
              [460, 790], // 左上角
              [700, 790], // 右上角
              [700, 665], // 右下角
              [460, 665], // 左下角
              [460, 790]  // 闭合路径
            ],
            symbolSize: 0,
            type: 'line', // 矩形边框
            areaStyle: {
              color: '#f7b500', // 填充颜色
              opacity: 0.5   // 填充透明度
            },
            lineStyle: {
              show: false,
              opacity: 0
            }
          },
          {
            data: [
              [640, 420], // 左上角
              [760, 420], // 右上角
              [760, 60], // 右下角
              [640, 60], // 左下角
              [640, 420]  // 闭合路径
            ],
            symbolSize: 0,
            type: 'line', // 矩形边框
            areaStyle: {
              color: '#f7b500', // 填充颜色
              opacity: 0.5   // 填充透明度
            },
            lineStyle: {
              show: false,
              opacity: 0
            }
          },
          {
            data: [
              [370, 420], // 左上角
              [490, 420], // 右上角
              [490, 60], // 右下角
              [370, 60], // 左下角
              [370, 420]  // 闭合路径
            ],
            symbolSize: 0,
            type: 'line', // 矩形边框
            areaStyle: {
              color: '#f7b500', // 填充颜色
              opacity: 0.5   // 填充透明度
            },
            lineStyle: {
              show: false,
              opacity: 0
            }
          },
          {
            name: "gnss",
            type: "scatter",
            data: [
              [0, 0],
              [850, 550],
              [850, 0],
              [0, 550]
            ],
            symbol: "rect",
            color: "black",
            symbolSize: 20,
          },

        ],

      };

      return option;
    }
  }
}
</script>

<style lang="scss" scoped>
#echart {
  position: absolute;
  height: 95%;
  width: 95%;

}

.echart_card {
  position: relative;
  height: calc(100% - 80px);
  width: 100%;
}

.head_card {
  margin-bottom: 10px;
  height: 75px;

  &_row {
    display: flex;
    align-items: center;
    /* 垂直居中所有列 */
  }

  &_item {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: flex-start;
    /* 水平居中，视需要而定 */
    height: 100%;
    /* 确保有足够的高度 */
  }
}

.tips {
  display: flex;
  width: 160px;
  flex-direction: column;
  position: absolute;
  left: 15px;
  /* 调整图例的位置 */
  top: 50px;
  padding: 10px;

}

.legend-item {
  display: flex;
  align-items: center;
  margin: 15px 0;

}

.color-box {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>
