<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="使用轨迹"
    width="1200px"
    top="0"
    append-to-body
  >
    <div>
      <el-form inline>
        <el-form-item label="使用日期">
          <el-date-picker
            type="date"
            v-model="date"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="hour">
            <el-option
              v-for="hour in 24"
              :key="hour"
              :label="`${hour}时`"
              :value="hour"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div id="route-map-container"></div>
    </div>
  </el-dialog>
</template>
<script>
import { getBaseInfo, getSafeCapRoute } from "@/api/index";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "MapDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      date: "",
      map: null,
      Amap: null, //高德地图amap方法实例
      mapCenter: [],
      hour: "",
    };
  },
  methods: {
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      this.date = today;
      this.hour =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    },
    init() {
      getBaseInfo().then((res) => {
        this.mapCenter = [res.data.longitude, res.data.latitude];
        this.$nextTick(() => {
          this.initMap();
        });
      });
    },
    initMap() {
      AMapLoader.load({
        key: "a7387204aeee9f238b217bad35460ba9",
        version: "1.4.15",
        plugins: ["AMap.MarkerClusterer", "AMap.DistrictSearch"],
      }).then((AMap) => {
        // 初始化地图
        this.AMap = AMap;
        this.map = new AMap.Map("route-map-container", {
          viewMode: "2D",
          zoom: 20,
          center: this.mapCenter,
          resizeEnable: true,
          mapStyle: "amap://styles/1dda787b3ac1ce28f171d2f153726eb7",
        });
        this.$nextTick(() => {
          var scale = window.screen.height / 1080;
          document.getElementById("route-map-container").style.zoom = 1 / scale;
        });
        this.search();
      });
    },
    search() {
      this.map.clearMap();
      getSafeCapRoute({
        bind_id: this.userId,
        start_time: `${this.date} ${this.hour}:00:00`,
      }).then((res) => {
        const paths = res.data.line.map((point) => {
          return [point.longitude, point.latitude];
        });
        new this.AMap.Polyline({
          path: paths,
          map: this.map,
          showDir: true,
          strokeColor: "#3366bb",
          strokeWeight: 8,
        });

        var startcircleMarker = new this.AMap.CircleMarker({
          center: paths[0],
          radius: 8, //3D视图下，CircleMarker半径不要超过64px
          strokeColor: "green",
          strokeWeight: 2,
          strokeOpacity: 0.5,
          fillColor: "green",
          zIndex: 10,
          bubble: true,
          cursor: "pointer",
          clickable: true,
        });
        startcircleMarker.setMap(this.map);
        var endcircleMarker = new this.AMap.CircleMarker({
          center: paths[paths.length - 1],
          radius: 8, //3D视图下，CircleMarker半径不要超过64px
          strokeColor: "red",
          strokeWeight: 2,
          strokeOpacity: 0.5,
          fillColor: "red",
          zIndex: 10,
          bubble: true,
          cursor: "pointer",
          clickable: true,
        });
        endcircleMarker.setMap(this.map);
      });
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.getTime();
          this.init();
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
#route-map-container {
  width: 100%;
  height: 700px;
}
</style>