<template>
  <div class="app-container ems-overview">
    <div class="toolbar">
      <el-button-group>
        <el-button size="mini" :type="viewLevel===1?'primary':'default'" @click="setView(1)">1</el-button>
        <el-button size="mini" :type="viewLevel===2?'primary':'default'" @click="setView(2)">2</el-button>
        <el-button size="mini" :type="viewLevel===3?'primary':'default'" @click="setView(3)">3</el-button>
      </el-button-group>
      <div class="toolbar-right">
        <el-button size="mini" icon="el-icon-zoom-in" @click="zoom(1.1)"/>
        <el-button size="mini" icon="el-icon-zoom-out" @click="zoom(0.9)"/>
        <el-button size="mini" icon="el-icon-refresh" @click="resetView">重置</el-button>
      </div>
    </div>

    <div class="canvas-wrapper">
      <svg :viewBox="viewBox" class="overview-svg">
        <!-- 区域多边形 -->
        <g v-for="area in areas" :key="area.id" @click="selectArea(area)" style="cursor:pointer;">
          <polygon
            :points="area.points.map(p => p.x+','+p.y).join(' ')"
            :fill="area.id===selectedAreaId ? area.fillActive : area.fill"
            :stroke="area.stroke"
            :stroke-width="2"
            :opacity="viewLevel===3 ? 0.8 : 1"
          />
          <!-- 区域标题 -->
          <text :x="area.labelPos.x" :y="area.labelPos.y" class="area-label">{{ area.name }}</text>

          <!-- 点位格子，仅在选中或特定视图显示 -->
          <g v-if="viewLevel!==1 || area.id===selectedAreaId">
            <g v-for="pt in area.pointsInfo" :key="pt.id" @click.stop="openPoint(pt, area)" style="cursor:pointer;">
              <rect
                :x="pt.x-pt.w/2"
                :y="pt.y-pt.h/2"
                :width="pt.w"
                :height="pt.h"
                :rx="4"
                :ry="4"
                :fill="ptFill(pt)"
                stroke="#444"
                :stroke-width="pt.id===selectedPoint&&id ? 2 : 1"
                :opacity="viewLevel===2 ? 0.9 : 0.75"
              />
              <text :x="pt.x" :y="pt.y-6" class="pt-title">{{ pt.name }}</text>
              <text :x="pt.x" :y="pt.y+10" class="pt-sub">
                {{ (pt.deviceData&&metric1&&label || '温度') + ': ' + (pt.deviceData&&metric1&&value || '--') }}
              </text>
              <text :x="pt.x" :y="pt.y+24" class="pt-sub">
                {{ (pt.deviceData&&metric2&&label || '状态') + ': ' + (pt.deviceData&&metric2&&value || '--') }}
              </text>
            </g>
          </g>
        </g>
      </svg>
    </div>

    <!-- 点位详情 -->
    <el-dialog
      title="点位详情"
      :visible.sync="pointDialogOpen"
      width="420px"
      append-to-body
    >
      <div v-if="selectedPoint">
        <p>点位名称：{{ selectedPoint.name }}</p>
        <p>所属区域：{{ selectedArea&&name }}</p>
        <p>坐标：({{ selectedPoint.x }}, {{ selectedPoint.y }})</p>
        <el-divider></el-divider>
        <p>设备数据：</p>
        <ul class="point-ul">
          <li>{{ selectedPoint.deviceData&&metric1&&label || '温度' }}：{{ selectedPoint.deviceData&&metric1&&value || '--' }}</li>
          <li>{{ selectedPoint.deviceData&&metric2&&label || '状态' }}：{{ selectedPoint.deviceData&&metric2&&value || '--' }}</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="pointDialogOpen=false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EmsOverview',
  data() {
    return {
      viewLevel: 1, // 1/2/3 切换视图
      scale: 1,
      viewBox: '0 0 1200 700',
      selectedAreaId: null,
      selectedPoint: null,
      selectedArea: null,
      pointDialogOpen: false,
      // 示例数据：可替换为接口返回
      areas: [
        {
          id: 'A',
          name: '冷藏区',
          points: [{x:60,y:80},{x:1100,y:80},{x:1100,y:620},{x:60,y:620}], // 矩形（可改为不规则）
          labelPos: {x:100, y:120},
          fill: '#4c6ef5',
          fillActive: '#3b5bdb',
          stroke: '#2b2d42',
          pointsInfo: [
            { id:'A1', name:'点位-01', x:250, y:220, w:110, h:70,
              deviceData: { metric1:{label:'温度', value:'4.2℃'}, metric2:{label:'状态', value:'正常'} } },
            { id:'A2', name:'点位-02', x:520, y:260, w:110, h:70,
              deviceData: { metric1:{label:'温度', value:'5.1℃'}, metric2:{label:'状态', value:'正常'} } },
            { id:'A3', name:'点位-03', x:820, y:340, w:110, h:70,
              deviceData: { metric1:{label:'温度', value:'7.8℃'}, metric2:{label:'状态', value:'告警'} } },
          ]
        },
        {
          id: 'B',
          name: '冷冻区',
          points: [{x:640,y:80},{x:1140,y:80},{x:1140,y:620},{x:640,y:620}], // 与 A 有交叠边以示多区
          labelPos: {x:680, y:120},
          fill: '#4ea8de',
          fillActive: '#3a86ff',
          stroke: '#1b263b',
          pointsInfo: [
            { id:'B1', name:'点位-11', x:780, y:220, w:110, h:70,
              deviceData: { metric1:{label:'温度', value:'-12.3℃'}, metric2:{label:'状态', value:'正常'} } },
            { id:'B2', name:'点位-12', x:980, y:460, w:110, h:70,
              deviceData: { metric1:{label:'温度', value:'-10.0℃'}, metric2:{label:'状态', value:'维护'} } },
          ]
        },
        // 不规则多边形区域示例
        {
          id: 'C',
          name: '分拣区',
          points: [{x:1040,y:90},{x:1170,y:180},{x:1170,y:560},{x:1040,y:650},{x:980,y:650},{x:980,y:90}],
          labelPos: {x:1000, y:220},
          fill: '#95d5b2',
          fillActive: '#74c69d',
          stroke: '#2d6a4f',
          pointsInfo: [
            { id:'C1', name:'点位-21', x:1040, y:240, w:120, h:76,
              deviceData: { metric1:{label:'能量', value:'1000g'}, metric2:{label:'状态', value:'良好'} } },
            { id:'C2', name:'点位-22', x:1040, y:440, w:120, h:76,
              deviceData: { metric1:{label:'显卡', value:'4001'}, metric2:{label:'状态', value:'正常'} } },
          ]
        }
      ]
    };
  },
  methods: {
    setView(n) {
      this.viewLevel = n;
      // 可在不同视图级别下调整呈现元素
      // 例如：viewLevel===1 仅显示区域；2 显示点位；3 显示热力/状态覆盖
    },
    zoom(factor) {
      this.scale = Math.max(0.5, Math.min(2.5, this.scale * factor));
      // 通过调整 viewBox 或 transform 控制缩放，这里直接改 viewBox 以简化
      const base = { w:1200, h:700 };
      const w = base.w / this.scale;
      const h = base.h / this.scale;
      this.viewBox = `0 0 ${w} ${h}`;
    },
    resetView() {
      this.scale = 1;
      this.viewBox = '0 0 1200 700';
      this.selectedAreaId = null;
      this.selectedPoint = null;
      this.selectedArea = null;
    },
    selectArea(area) {
      this.selectedAreaId = area.id;
      this.selectedArea = area;
    },
    openPoint(pt, area) {
      this.selectedPoint = pt;
      this.selectedArea = area;
      this.pointDialogOpen = true;
    },
    ptFill(pt) {
      const val = (pt.deviceData&&metric2&&value || '').toString();
      if (val.includes('告警') || val.includes('异常')) return '#ff6b6b';
      if (val.includes('维护')) return '#ffd166';
      return '#8ecae6';
    },
    // 预留点位查询（据位查询）接口
    queryPoints(params) {
      // TODO: 调用后端接口，更新 areas[].pointsInfo
      // this.$api.xxx(params).then(res => { ... })
    }
  }
};
</script>

<style scoped>
.ems-overview {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.toolbar-right {
  display: flex;
  gap: 6px;
  align-items: center;
}
.canvas-wrapper {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f8fafc;
  height: 720px;
  position: relative;
  overflow: hidden;
}
.overview-svg {
  width: 100%;
  height: 100%;
}
.area-label {
  fill: #fff;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.pt-title, .pt-sub {
  fill: #fff;
  font-size: 12px;
  text-anchor: middle;
}
.point-ul {
  margin: 0;
  padding-left: 16px;
}
</style>