<template>
  <Modal
    class="f-position"
    @on-visible-change="onChange"
    :footer-hide="type == 'simple'"
    fullscreen
    v-model="dialog"
    :title="type == 'simple' ? '位置信息' : '请选择位置'"
  >
    <div v-if="show" class="f-position__container">
      <div class="f-position__map" ref="map">
        <Spin fix v-if="loading"></Spin>
      </div>
      <div class="f-position__info">
        <div class="f-position__header">
          当前位置信息
        </div>
        <h5>经纬度({{ proj || "gjc02" }})：</h5>
        <p>
          {{ getLatlng(info.lnglat) }}
        </p>
        <h5>地址：</h5>
        <p>
          {{ info.address }}
        </p>
        <h5>最近的路口：</h5>
        <p>
          {{ info.nearestJunction }}
        </p>
        <h5>最近的路：</h5>
        <p>
          {{ info.nearestRoad }}
        </p>
        <h5>最近的标志：</h5>
        <p>
          {{ info.nearestPOI }}
        </p>
      </div>
    </div>

    <div v-if="show" class="f-position__search">
      <input
        class="ivu-input"
        id="map_search"
        type="text"
        v-model="str"
        placeholder="请输入关键字：（选定后搜索）"
      />
    </div>

    <div slot="footer">
      <Button @click="onCancel">取消</Button>
      <Button type="primary" @click="onClick">确定</Button>
    </div>
  </Modal>
</template>

<script>
import { wgs84togcj02, gcj02towgs84 } from "../common/proj";
/* global AMap*/
export default {
  name: "f-position",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: ""
    },
    search: {
      type: String,
      default: ""
    },
    center: {
      type: [Array, String],
      default: () => [120.76034545898439, 30.749507460819707]
    },
    city: {
      type: String,
      default: process.env.VUE_APP_CITY
    },
    proj: {
      type: String,
      default: "gcj02"
    },
    polygons: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    show() {
      this.dialog = this.show;
      if (this.dialog) {
        setTimeout(() => {
          this.render();
          this.loading = false;
        }, 200);
      }
    }
  },
  data() {
    return {
      map: null,
      dialog: this.show,
      info: {
        lnglat: "",
        address: "",
        nearestJunction: "",
        nearestRoad: "",
        nearestPOI: "",
        regeocode: {}
      },
      loading: true,
      str: this.search
    };
  },
  methods: {
    render() {
      const center = this.center;
      if (this.position) {
        const latlng = this.position.split(",");
        center[0] = parseFloat(latlng[0]);
        center[1] = parseFloat(latlng[1]);
      }

      const map = (this.map = new AMap.Map(this.$refs.map, {
        center: center,
        zoom: 14,
        resizeEnable: true,
        expandZoomRange: true,
        zooms: [3, 20]
      }));

      this.polygonsLayer = new AMap.OverlayGroup();
      map.add(this.polygonsLayer);
      if (this.polygons.length > 0) {
        this.initPolygons(this.polygons);
      }

      AMap.plugin(
        ["AMap.MapType", "AMap.Scale", "AMap.Autocomplete", "AMap.PlaceSearch"],
        function() {
          //异步加载插件
          map.addControl(new AMap.MapType());
          map.addControl(new AMap.Scale());
          const autoOptions = {
            city: this.city,
            input: "map_search"
          };
          const autocomplete = new AMap.Autocomplete(autoOptions);
          const placeSearch = new AMap.PlaceSearch({
            city: this.city,
            map: map
          });
          placeSearch.on("markerClick", e => {
            this.positionPicker.start(e.marker.getPosition());
          });

          AMap.event.addListener(autocomplete, "select", function(e) {
            //TODO 针对选中的poi实现自己的功能
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);
          });
          if (this.search) {
            this.str = this.search;
            placeSearch.search(this.search);
          }
        }.bind(this)
      );

      AMapUI.loadUI(["misc/PositionPicker"], PositionPicker => {
        const positionPicker = (this.positionPicker = new PositionPicker({
          mode: "dragMarker",
          map: map
        }));
        positionPicker.on("success", result => {
          this.info.address = result.address;
          this.info.lnglat = `${result.position.lng},${result.position.lat}`;
          this.info.nearestJunction = result.nearestJunction;
          this.info.nearestPOI = result.nearestPOI;
          this.info.nearestRoad = result.nearestRoad;
          this.info.regeocode = result.regeocode;
        });
        positionPicker.start();
        map.panBy(0, 1);
      });

      map.on("click", e => {
        this.positionPicker.start(e.lnglat);
      });
    },
    initPolygons(polygons) {
      polygons.forEach(item => {
        const ll = item.path.split(";");
        const path = [];

        ll.forEach(l => {
          const latlng = l.split(",");
          path.push(
            new AMap.LngLat(parseFloat(latlng[0]), parseFloat(latlng[1]))
          );
        });
        const polygon = new AMap.Polygon({
          path: path,
          zIndex: 0,
          borderWeight: 0.5, // 线条宽度，默认为 1
          strokeOpacity: 0.5,
          strokeStyle: "dashed",
          strokeColor: "blue",
          fillOpacity: 0.2,
          fillColor: "red",
          lineJoin: "round" // 折线拐点连接处样式
        });
        const center = polygon.getBounds().getCenter();

        polygon.on("click", e => {
          this.positionPicker.start(e.lnglat);
        });

        const text = new AMap.Text({
          zIndex: 1,
          position: center,
          text: item.name
        });

        this.polygonsLayer.addOverlays(polygon);
        this.polygonsLayer.addOverlays(text);
      });
    },
    onClick() {
      this.$Modal.confirm({
        title: "结果确认",
        content: `
        <h5 style="color: #333;font-weight: bold">经纬度(${this.proj ||
          "gjc02"})：</h5>
        <p>${this.getLatlng(this.info.lnglat)}</p>
          <h5 style="color: #333;font-weight: bold">地址：</h5>
        <p>${this.info.address}</p>
          <h5 style="color: #333;font-weight: bold">最近的路口：</h5>
        <p>${this.info.nearestJunction}</p>
          <h5 style="color: #333;font-weight: bold">最近的路：</h5>
        <p>${this.info.nearestRoad}</p>
           <h5 style="color: #333;font-weight: bold">最近的标志：</h5>
        <p>${this.info.nearestPOI}</p>
        `,
        onOk: () => {
          this.info.lnglat = this.getLatlng(this.info.lnglat);
          this.$emit("on-select", this.info);
          this.$emit("update:show", false);
        }
      });
    },
    onCancel() {
      this.$emit("update:show", false);
    },
    onChange(v) {
      this.$emit("update:show", v);
    },
    setCenter(position) {
      const latlng = position.split(",");
      const center = new AMap.LngLat(
        parseFloat(latlng[0]),
        parseFloat(latlng[1])
      );
      this.map.setZoomAndCenter(16, center);
    },
    getLatlng(lnglat) {
      if (lnglat) {
        if (this.proj == "gcj02" || !this.proj) {
          return lnglat;
        } else if (this.proj == "wgs84" || this.proj == "gps") {
          return this.getWgs84(lnglat);
        }
      }
    },
    getWgs84(lnglat) {
      const ll = lnglat.split(",").map(p => parseFloat(p));
      const r = gcj02towgs84(ll[0], ll[1]);
      return r.join(",");
    }
  }
};
</script>

<style lang="less">
.amap-sug-result {
  z-index: 3000;
}
.f-position {
  overflow: hidden;
  .ivu-modal-body {
    padding: 0;
  }
  /deep/ .amap-overlay-text-container {
    background-color: transparent;
    color: #fff;
    border: none;
    text-shadow: 1px 1px 1px #000;
  }
  &__container {
    height: 100%;
    display: flex;
  }

  &__info {
    width: 220px;
    border-left: 1px solid #ddd;
    padding: 0 20px;

    h5 {
      color: #333;
      font-size: 12px;
      font-weight: bold;
      margin: 4px 0;
    }
  }

  &__map {
    flex: 1;
    position: relative;
  }

  &__search {
    position: absolute;
    width: 300px;
    top: 20px;
    left: 20px;
    input {
      width: 100%;
    }
  }

  &__header {
    padding: 10px 0;
    font-size: 16px;
  }
}
</style>
