<template>
  <div class="container">
    <div class="input-card-right">
      <div class="img">
        <image-upload v-model="picture" />
      </div>

      <el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
        点击右上角坐标
      </el-button>

      <el-button :style="bottomLeftCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('bottomLeft')">
        点击左下角坐标
      </el-button>

      <el-button @click="generateMap" :disabled="!canGenerateMap">
        生成导览地图
      </el-button>
    </div>
    <!-- <el-table-column label="导览地图" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <router-link :to="'/system/guide/index/' + scope.row.areaId" class="link-type">
            <span>去设置</span>
          </router-link>
        </template>
      </el-table-column> -->
    <div id="amap-container" class="map-container"></div>

    <div class="coordinates">
      <div v-if="topRightCoord">右上角: {{ topRightCoord }}</div>
      <div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
    </div>
  </div>
  
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig';
import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
export default {
  name: "NewPage",
  data() {
    return {
      map: null,
      clickType: null,
      topRightCoord: null,
      bottomLeftCoord: null,
      markers: [],
      picture: '',
      buttonStyleActive: 'background-color: #409EFF; color: white;',
      buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
    };
  },
  computed: {
    canGenerateMap() {
      return this.picture && this.topRightCoord && this.bottomLeftCoord;
    }
  },
  created() {
    const areaId = this.$route.params && this.$route.params.areaId;
    this.getArea(areaId);
    // this.getAreaList();
  },
  mounted() {
    this.initMap();
  },
  methods: {
    /** 查询运营区域详细 */
    getArea(areaId) {
      getArea(areaId).then(response => {
        this.queryParams.areaId = response.data.areaId;
        this.areaLon = response.data.longitude;
        this.areaLat = response.data.latitude;
        this.defaultAreaId = response.data.areaId;
        this.getList();
      });
    },
    initMap() {
      AMapLoader.load({
        key: globalConfig.aMap.key,
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.PolygonEditor",
          "AMap.PlaceSearch",
        ],
      }).then((AMap) => {
        this.map = new AMap.Map("amap-container", {
          viewMode: "3D",
          zoom: 13,
        });
        this.map.setFitView();
        this.map.on('click', this.handleMapClick);
      }).catch((e) => {
        console.error(e);
      });
    },
    setClickType(type) {
      this.clickType = type;
    },
    handleMapClick(event) {
      const lnglat = event.lnglat;

      if (this.clickType === 'topRight') {
        this.topRightCoord = lnglat;
      } else if (this.clickType === 'bottomLeft') {
        this.bottomLeftCoord = lnglat;
      }

      // 创建标记
      const marker = new AMap.Marker({
        position: lnglat,
      });
      this.map.add(marker);
      this.markers.push(marker);

      // 清除点击类型
      this.clickType = null;
    },
    clearMarkers() {
      this.markers.forEach(marker => {
        this.map.remove(marker);
      });
      this.markers = [];
      this.topRightCoord = null;
      this.bottomLeftCoord = null;
    },
    generateMap() {
      if (!this.canGenerateMap) {
        this.$message.error('请上传图片并选择两个坐标点');
        return;
      }

      // 确保坐标精度
      const lnglatToFixed = (lnglat) => ({
        lng: lnglat.lng.toFixed(6),
        lat: lnglat.lat.toFixed(6)
      });

      const topRight = lnglatToFixed(this.topRightCoord);
      const bottomLeft = lnglatToFixed(this.bottomLeftCoord);

      // 计算边界
      const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);

      // 创建图片图层
      const imageLayer = new AMap.ImageLayer({
        url: this.picture,
        bounds: bounds,
        zooms: [15, 20]
      });

      // 清除现有图层
      this.map.getLayers().forEach(layer => {
        if (layer instanceof AMap.ImageLayer) {
          this.map.remove(layer);
        }
      });

      // 添加图片图层
      this.map.add(imageLayer);
    }
  },
};
</script>

<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 90vh;
}

.container {
  position: relative;
  border: 1px solid rgb(204, 204, 204);
}

.input-card-right {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  // justify-content: center;
  margin-bottom: 10px;
}

.img {
  width: 150px;
  height: 150px;
}

.coordinates {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;
}
</style>