<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div id="container"></div>

    <!-- 地图工具栏 -->
    <div class="map-tools">
      <el-button-group>
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="startBoundaryEdit(null)" :disabled="isEditing">新增区域</el-button>
        <el-button size="mini" type="warning" icon="el-icon-edit" @click="startAreaBoundaryEdit"  :disabled="isEditing">修改运营区</el-button>
        <el-button size="mini" icon="el-icon-full-screen" @click="setFitView">全局查看</el-button>
        <el-button size="mini" icon="el-icon-picture" @click="toggleMapStyle">切换样式</el-button>
        <el-button size="mini" icon="el-icon-document" @click="toggleLabels">{{ showLabels ? '隐藏' : '显示' }}文字</el-button>
      </el-button-group>
    </div>

    <!-- 编辑工具栏 -->
    <div class="boundary-tools" v-if="isEditing">
      <el-alert type="info" :closable="false">
        <template slot="title">
          <div>{{ editSubArea != null ? '编辑' : '新增' }}提示：</div>
          <div>1. 左键点击添加边界点</div>
          <div>2. 点击顶点可删除该点</div>
          <div>3. 双击完成绘制</div>
        </template>
      </el-alert>
      <div class="tool-buttons">
        <el-button type="success" size="mini" @click="saveBoundary">保存</el-button>
        <el-button size="mini" @click="cancelEdit">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { AreaSubType, AreaSubStatus } from "@/utils/enums";
import { debounce } from "@/utils/index";
import globalConfig from "@/utils/config/globalConfig";
// 区域样式配置
const AREA_STYLES = {
  [AreaSubType.PARKING]: {
    strokeColor: '#1890ff',
    strokeWeight: 2,
    fillColor: '#1890ff',
    fillOpacity: 0.3,
    strokeStyle: 'solid'
  },
  [AreaSubType.NO_PARKING]: {
    strokeColor: '#ff4d4f',
    strokeWeight: 2,
    fillColor: '#ff4d4f',
    fillOpacity: 0.3,
    strokeStyle: 'solid'
  },
  [AreaSubType.NO_RIDE]: {
    strokeColor: '#faad14',
    strokeWeight: 2,
    fillColor: '#faad14',
    fillOpacity: 0.3,
    strokeStyle: 'solid'
  }
};

// 高亮样式
const HIGHLIGHT_STYLES = {
  hover: {
    strokeWeight: 3,
    fillOpacity: 0.5
  },
  selected: {
    strokeWeight: 4,
    fillOpacity: 0.6
  }
};

// 图标配置
const MARKER_ICONS = {
  [AreaSubType.PARKING]: 'https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh',
  [AreaSubType.NO_PARKING]: 'https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab',
  [AreaSubType.NO_RIDE]: 'https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2'
};

// 标签样式配置
const LABEL_STYLES = {
  [AreaSubType.PARKING]: {
    backgroundColor: '#1890ff',
    color: '#fff'
  },
  [AreaSubType.NO_PARKING]: {
    backgroundColor: '#ff4d4f',
    color: '#fff'
  },
  [AreaSubType.NO_RIDE]: {
    backgroundColor: '#faad14',
    color: '#fff'
  }
};

export default {
  name: 'AreaMap',
  
  props: {
    // 运营区域信息
    area: {
      type: Object,
      required: true
    },
    // 子区域列表
    areaSubList: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      map: null,
      AMap: null,
      mapStyle: 'normal',
      showLabels: true,
      isEditing: false,
      editingPolygon: null,
      editSubArea: null,
      isEditingArea: false,
      polygonEditor: null,
      overlays: {
        polygons: new Map(),
        markers: new Map(),
        labels: new Map()
      },
      currentInfoWindow: null,
      highlightedAreaId: null,  // 当前鼠标悬停的区域ID
      selectedAreaId: null      // 当前选中的区域ID
    };
  },

  watch: {
    // 监听区域数据变化
    area: {
      handler: debounce(function() {
        this.renderAll();
      }, 300),
      deep: true
    },
    // 监听子区域列表变化
    areaSubList: {
      handler: debounce(function() {
        this.renderAll();
      }, 300),
      deep: true
    },
    // 监听高亮状态变化
    highlightedAreaId: {
      handler(newVal, oldVal) {
        if (oldVal) {
          this.updateAreaStyle(oldVal);
        }
        if (newVal) {
          this.updateAreaStyle(newVal);
        }
      }
    },
    
    // 监听选中状态变化
    selectedAreaId: {
      handler(newVal, oldVal) {
        if (oldVal) {
          this.updateAreaStyle(oldVal);
        }
        if (newVal) {
          this.updateAreaStyle(newVal);
        }
      }
    }
  },

  async mounted() {
    await this.initMap();
    this.renderAll();
  },

  beforeDestroy() {
    this.destroyMap();
  },

  methods: {
    // 初始化地图
    async initMap() {
      try {
        this.AMap = await AMapLoader.load({
          key: globalConfig.aMap.key,
          version: '2.0',
          plugins: ['AMap.PolygonEditor', 'AMap.InfoWindow']
        });

        // 使用 area 的经纬度作为中心点
        const center = [
          this.area.longitude || 120.35218, // 如果没有经度，使用默认值
          this.area.latitude || 26.944335   // 如果没有纬度，使用默认值
        ];
        
        this.map = new this.AMap.Map('container', {
          zoom: 13,
          center: center,
          touchZoom: false,
          dragEnable: true,
          contextMenu: true
        });

        // 添加地图点击事件，关闭信息窗体和清除选中状态
        this.map.on('click', () => {
          if (this.currentInfoWindow) {
            this.currentInfoWindow.close();
          }
          if (!this.isEditing) {
            this.selectedAreaId = null;
          }
        });

        // 初始化多边形编辑器
        this.polygonEditor = new this.AMap.PolygonEditor(this.map);
        
        // 绑定编辑器事件
        this.polygonEditor.on('add', this.handlePolygonAdd);
        this.polygonEditor.on('end', this.handlePolygonEnd);
      } catch (error) {
        console.error('地图初始化失败:', error);
        this.$message.error('地图加载失败');
      }
    },
    handlePolygonAdd({target}) {
      this.editingPolygon = target;
    },
    handlePolygonEnd({target}) {
      this.editingPolygon = target;
    },
    // 渲染所有内容
    renderAll() {
      this.clearEditor();
      this.clearHighlight();
      this.clearOverlays();
      this.renderAreaBoundary();
      this.renderSubAreas();
    },

    // 清除编辑器
    clearEditor() {
      
      // 关闭编辑器
      if (this.polygonEditor) {
        // 清除编辑器的目标对象
        this.polygonEditor.setTarget();
      }
      
      // 移除编辑中的多边形
      if (this.editingPolygon) {
        this.map.remove(this.editingPolygon);
        this.editingPolygon = null;
      }

    },

    // 渲染运营区边界
    renderAreaBoundary() {
      if (!this.map || !this.area.boundaryStr) {
        return;
      };
      
      try {
        const boundary = JSON.parse(this.area.boundaryStr);
        const polygon = new this.AMap.Polygon({
          path: boundary,
          strokeColor: '#2b8cbe',
          strokeWeight: 2,
          fillColor: '#ccebc5',
          fillOpacity: 0.3,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 5]
        });
        
        this.map.add(polygon);
        this.overlays.polygons.set('area', polygon);
      } catch (error) {
        console.error('渲染运营区边界失败:', error);
      }
    },

    // 渲染子区域
    renderSubAreas() {
      
      if (!this.map || !this.areaSubList.length) {
        return;
      }
      this.areaSubList.forEach(subArea => {
        if (subArea.status === AreaSubStatus.DISABLED) {
          return;
        }

        try {
          // 渲染边界
          if (subArea.boundaryStr) {
            const boundary = JSON.parse(subArea.boundaryStr);
            const polygon = new this.AMap.Polygon({
              path: boundary,
              ...AREA_STYLES[subArea.type],
              extData: {
                id: subArea.id,
                type: subArea.type
              }
            });
            
            // 添加事件监听
            polygon.on('mouseover', () => {
              if (!this.isEditing) {
                this.highlightedAreaId = subArea.id;
              }
            });
            
            polygon.on('mouseout', () => {
              if (!this.isEditing) {
                this.highlightedAreaId = null;
              }
            });
            
            polygon.on('click', (e) => {
              if (!this.isEditing) {
                // 如果点击的是当前选中的区域，不做任何操作
                if (this.selectedAreaId !== subArea.id) {
                  this.selectedAreaId = subArea.id;
                  this.showInfoWindow(subArea);
                }
              }
            });
            
            this.map.add(polygon);
            this.overlays.polygons.set(subArea.id, polygon);
          }

          // 渲染标记点
          const marker = new this.AMap.Marker({
            position: [subArea.longitude, subArea.latitude],
            icon: new this.AMap.Icon({
              image: MARKER_ICONS[subArea.type],
              size: new this.AMap.Size(25, 36),
              imageSize: new this.AMap.Size(25, 36)
            }),
            offset: new this.AMap.Pixel(-12.5, -36)
          });

          marker.on('click', (e) => {
            if (!this.isEditing) {
              this.showInfoWindow(subArea);
            }
          });
          
          this.map.add(marker);
          this.overlays.markers.set(subArea.id, marker);

          // 渲染文字标签
          const label = new this.AMap.Text({
            text: subArea.name,
            position: [subArea.longitude, subArea.latitude],
            offset: new this.AMap.Pixel(0, -60),
            anchor: 'center',
            cursor: 'pointer',
            style: {
              ...LABEL_STYLES[subArea.type],
              border: 'none',
              fontSize: '12px',
              padding: '2px 8px',
              borderRadius: '4px',
              whiteSpace: 'nowrap',
              textAlign: 'center',
              position: 'absolute',
              transform: 'translateX(-50%)',
              minWidth: '50px',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }
          });

          label.on('click', (e) => {
            if (!this.isEditing) {
              this.showInfoWindow(subArea);
            }
          });

          this.map.add(label);
          this.overlays.labels.set(subArea.id, label);
          label.setMap(this.showLabels ? this.map : null);
        } catch (error) {
          console.error(`渲染子区域失败 [${subArea.id}]:`, error);
        }
      });
    },

    // 显示信息窗体
    showInfoWindow(subArea, focus = false) {
      console.log("showInfoWindow", this.isEditing);
      if (this.currentInfoWindow) {
        this.currentInfoWindow.close();
      }

      const position = this.getPosition(subArea);

      if (position == null) {
        return;
      }

      // 聚焦效果
      if (focus) {
        this.focusArea(subArea);
      } else {
        this.map.setCenter(position);
      }

      // 创建自定义内容，使用Vue的事件处理方式
      const content = document.createElement('div');
      content.className = 'map-info-window';
      content.innerHTML = `
        <h4>${subArea.name}</h4>
        <div class="info-actions">
          <a class="info-action" data-action="edit">编辑信息</a>
          <a class="info-action" data-action="boundary">修改边界</a>
          <a class="info-action" data-action="delete">删除</a>
        </div>
      `;

      // 直接绑定事件
      content.addEventListener('click', (e) => {
        const target = e.target;
        if (target.classList.contains('info-action')) {
          const action = target.getAttribute('data-action');
          this.handleInfoAction(action, subArea);
          if (this.currentInfoWindow) {
            this.currentInfoWindow.close();
          }
        }
      });

      this.currentInfoWindow = new this.AMap.InfoWindow({
        content: content,
        offset: new this.AMap.Pixel(0, -30),
        closeWhenClickMap: true
      });

      // 添加关闭事件监听
      this.currentInfoWindow.on('close', () => {
        if (!this.isEditing) {
          this.selectedAreaId = null;
        }
      });

      this.currentInfoWindow.open(this.map, position);
    },

    // 聚焦子区域
    focusArea(subArea) {
      if (subArea == null) {
        return;
      }
      let position = this.getPosition(subArea);
      if (position == null) {
        return;
      }
      const polygon = this.overlays.polygons.get(subArea.id); 
      if (polygon) {
        const bounds = polygon.getBounds();
        const padding = [150, 300, 150, 300];
        this.map.setBounds(bounds, false, padding);
      } else {
        this.map.setZoomAndCenter(15, position, false, 300);
      }
    },

    // 获取子区域中心点
    getPosition(subArea) {
      if (subArea == null) {
        return null;
      }
      if (subArea.longitude == null || subArea.latitude == null) {
        return null;
      }
      return [subArea.longitude, subArea.latitude];
    },

    // 处理信息窗体操作
    handleInfoAction(action, subArea) {
      console.log("action", action);
      switch (action) {
        case 'edit':
          this.$emit('edit', subArea);
          break;
        case 'boundary':
          this.startBoundaryEdit(subArea, true);
          break;
        case 'delete':
          this.$emit('delete', subArea);
          break;
      }
    },

    // 计算多边形中心点
    calculateCenter(path) {
      if (!path || path.length === 0) return null;
      
      let total = path.length;
      let X = 0, Y = 0, Z = 0;
      
      path.forEach(point => {
        let lng = (point[0] * Math.PI) / 180;
        let lat = (point[1] * Math.PI) / 180;
        
        let x = Math.cos(lat) * Math.cos(lng);
        let y = Math.cos(lat) * Math.sin(lng);
        let z = Math.sin(lat);
        
        X += x;
        Y += y;
        Z += z;
      });
      
      X = X / total;
      Y = Y / total;
      Z = Z / total;
      
      let Lng = Math.atan2(Y, X);
      let Hyp = Math.sqrt(X * X + Y * Y);
      let Lat = Math.atan2(Z, Hyp);
      
      return [
        (Lng * 180) / Math.PI,
        (Lat * 180) / Math.PI
      ];
    },

    // 开始边界编辑
    startBoundaryEdit(subArea, focus = false) {

      this.clearEditor();

      this.editSubArea = subArea;

      if (focus) {
        this.focusArea(subArea);
      }

      if (subArea && subArea.boundaryStr) {
        console.log("subArea", subArea);
        try {
          const boundary = JSON.parse(subArea.boundaryStr);
          this.editingPolygon = new this.AMap.Polygon({
            path: boundary,
            ...AREA_STYLES[subArea.type]
          });
          this.map.add(this.editingPolygon);
          this.polygonEditor.setTarget(this.editingPolygon);
        } catch (error) {
          console.error('加载边界数据失败:', error);
          this.$message.error('加载边界数据失败');
        }
      } 
      this.polygonEditor.open();

      this.startEditArea();
    },

    // 保存边界
    saveBoundary() {
      if (!this.editingPolygon) {
        this.$message.warning('请先绘制边界');
        return;
      }

      const path = this.editingPolygon.getPath();
      const boundary = path.map(point => [point.getLng(), point.getLat()]);
      const center = this.calculateCenter(boundary);
      
      if (!center) {
        this.$message.error('计算中心点失败');
        return;
      }

      if (this.isEditingArea) {
        // 更新运营区边界
        this.$emit('update-area-boundary', {
          area: this.area,
          boundary: JSON.stringify(boundary),
          longitude: center[0],
          latitude: center[1]
        });
      } else {
        if (this.editSubArea == null) {
          // 新增子区域
          this.$emit('add-boundary', {
            boundary: JSON.stringify(boundary),
            longitude: center[0],
            latitude: center[1]
          });
        } else {
          // 更新子区域边界
          this.$emit('update-boundary', {
            areaSub: this.editSubArea,
            boundary: JSON.stringify(boundary),
            longitude: center[0],
            latitude: center[1]
          });
        }
      }
      
    },

    // 取消编辑
    cancelEdit() {
      console.log("cancelEdit");

      // 重置编辑状态
      this.isEditing = false;
      this.isEditingArea = false;
      
      // 移除地图事件监听
      this.map.clearEvents('click');
      this.map.clearEvents('rightclick');

      // 重新渲染所有区域，确保显示正常
      this.renderAll();
    },

    // 工具方法
    setFitView() {
      this.map.setFitView();
    },

    // 切换地图样式
    toggleMapStyle() {
      if (this.mapStyle === 'normal') {
        // 切换到卫星图
        this.mapStyle = 'satellite';
        const satelliteLayer = new this.AMap.TileLayer.Satellite();
        const roadNetLayer = new this.AMap.TileLayer.RoadNet();
        this.map.setLayers([satelliteLayer, roadNetLayer]);
      } else {
        // 切换到普通地图
        this.mapStyle = 'normal';
        const normalLayer = new this.AMap.TileLayer();
        this.map.setLayers([normalLayer]);
      }
    },

    toggleLabels() {
      this.showLabels = !this.showLabels;
      this.overlays.labels.forEach(label => {
        label.setMap(this.showLabels ? this.map : null);
      });
    },

    // 清理方法优化
    clearOverlays() {
      Object.values(this.overlays).forEach(overlayMap => {
        overlayMap.forEach(overlay => {
          this.map.remove(overlay);
        });
        overlayMap.clear();
      });
    },

    // 更新区域样式
    updateAreaStyle(areaId) {
      const polygon = this.overlays.polygons.get(areaId);
      if (!polygon) return;

      const type = polygon.getExtData().type;
      let style = { ...AREA_STYLES[type] };

      // 根据状态叠加高亮样式
      if (areaId === this.selectedAreaId) {
        style = { ...style, ...HIGHLIGHT_STYLES.selected };
      } else if (areaId === this.highlightedAreaId) {
        style = { ...style, ...HIGHLIGHT_STYLES.hover };
      }

      polygon.setOptions(style);
    },

    // 清除所有高亮状态
    clearHighlight() {
      this.highlightedAreaId = null;
      this.selectedAreaId = null;
    },

    destroyMap() {
      if (this.map) {
        this.clearHighlight();
        this.clearOverlays();
        this.map.destroy();
        this.map = null;
      }
    },

    // 开始编辑运营区边界
    startAreaBoundaryEdit() {

      this.clearEditor();

      this.setFitView();

      if (this.area.boundaryStr) {
        try {
          const boundary = JSON.parse(this.area.boundaryStr);
          this.editingPolygon = new this.AMap.Polygon({
            path: boundary,
            strokeColor: '#2b8cbe',
            strokeWeight: 2,
            fillColor: '#ccebc5',
            fillOpacity: 0.3,
            strokeStyle: 'dashed',
            strokeDasharray: [5, 5]
          });
          this.map.add(this.editingPolygon);
          this.polygonEditor.setTarget(this.editingPolygon);
        } catch (error) {
          console.error('加载运营区边界数据失败:', error);
          this.$message.error('加载运营区边界数据失败');
        }
      } 

      this.polygonEditor.open();
      this.isEditingArea = true;
      this.startEditArea();
    },
    // 开始绘制（不管是那种边界）
    startEditArea() {
      this.isEditing = true;
      
      // 关闭当前信息窗口
      if (this.currentInfoWindow) {
        this.currentInfoWindow.close();
      }

    },
    // 设置为新建模式
    setAddMode() {
      // 添加地图点击事件监听，用于绘制多边形
      const clickHandler = (e) => {
        const path = this.editingPolygon.getPath();
        path.push([e.lnglat.getLng(), e.lnglat.getLat()]);
        this.editingPolygon.setPath(path);
      };
      
      // 添加右键点击事件监听，用于完成绘制
      const rightClickHandler = () => {
        this.map.off('click', clickHandler);
        this.map.off('rightclick', rightClickHandler);
        
        if (this.editingPolygon.getPath().length < 3) {
          this.$message.warning('请至少绘制3个点形成多边形');
          return;
        }
        
        this.polygonEditor.setTarget(this.editingPolygon);
        this.polygonEditor.open();
      };
      
      this.map.on('click', clickHandler);
      this.map.on('rightclick', rightClickHandler);
    }
  }
};
</script>

<style lang="scss" scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100%;

  #container {
    width: 100%;
    height: 100%;
  }

  .map-tools {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
  }

  .boundary-tools {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 100;
    width: 200px;

    .tool-buttons {
      margin-top: 10px;
      text-align: left;
    }
  }
}

</style>

<style lang="scss">

// 信息窗体样式
.map-info-window {
  padding: 5px;
  font-size: 12px;

  h4 {
    margin: 0 0 10px;
    font-size: 14px;
  }

  .info-actions {
    display: flex;
    gap: 10px;
  }

  .info-action {
    color: #409eff;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      color: #66b1ff;
    }
  }
}
</style>
