<template>
  <el-dialog
    title="泄露点信息"
    :visible.sync="open"
    width="1200px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-row :gutter="20">
      <el-col :span="14">
        <el-table v-loading="loading" :data="pointList">
          <!--<el-table-column label="巡检车经度" align="center" prop="longitude1" />
          <el-table-column label="巡检车纬度" align="center" prop="latitude1"/>-->
          <el-table-column label="推测泄漏点经度" align="center" prop="longitude2" />
          <el-table-column label="推测泄漏点纬度" align="center" prop="latitude2" />
          <el-table-column label="甲烷谷值(ppm)" align="center" prop="ch41" />
          <el-table-column label="甲烷峰值(ppm)" align="center" prop="ch42" />
          <el-table-column label="乙烷(ppb)" align="center" prop="c2h6" />
          <el-table-column label="泄露时间" align="center" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-location-information"
                @click="handleLocation(scope.row)"
              >泄露位置</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-col>

      <el-col :span="10">
        <div class="mapChange">
          <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
          <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
        </div>
        <div id="leak-map" style="width: 100%; height: 500px"></div>
      </el-col>
    </el-row>

  </el-dialog>
</template>

<script>
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  import { pointInfoList } from "@/api/car/point";
  export default {
    name: "leak-point",
    data(){
        return{
          open: false,
          pointList: [],
          markers: [],
          mapStyle: true,
          loading: false
        }
    },
    methods:{
      openLeakPointDialog(query) {
        this.open = true;
        this.initMap();
        this.getPointInfo(query.id);
        this.clearMarker();
      },
      //初始化地图
      initMap() {
        this.$nextTick(() => {
          const path = eval(this.systemSetting.map_center);
          this.gaoMap = new EditorMap(
            "leak-map",
            {
              center: path,
              //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
              zoom: 16,
            },
            this
          );
        });
      },
      getPointInfo(taskId){
        this.loading = true;
        pointInfoList({taskId: taskId}).then(res =>{
          this.loading = false;
          if(res.code == 200){
              this.pointList = res.data;
              if(this.pointList && this.pointList.length > 0){
                //添加点位
                this.pointList.forEach(item =>{
                  let marker = this.addMarker(item);
                  this.markers.push(marker);
                })
                if(this.pointList[0].longitude2) this.gaoMap.map.panTo([this.pointList[0].longitude2,this.pointList[0].latitude2])

              }
          }
        })
      },
      /**标点*/
      addMarker(data) {
        let marker = new AMap.Marker({
          map: this.gaoMap.map,
          anchor: "bottom-center",
          position: [data.longitude1,data.latitude1],
          extData: data,
        });
        marker.on("mouseover", (e) => {
          const target = e.target;
          target.setLabel({
            content:
            "泄露时间:" + target.getExtData().createTime +
            ",甲烷谷值:" + target.getExtData().ch41 + "ppm" +
            ",甲烷峰值:" + target.getExtData().ch42 + "ppm" +
            ",乙烷:" + target.getExtData().c2h6 + "ppd",
            direction: "top",
          });
        });
        marker.on("mouseout", (e) => {
            const target = e.target;
          target.setLabel({ content: "" });
        });
        return marker;
      },
      // 更改卫星图
      mapChange(num) {
        if (num == 1) {
          this.mapStyle = false;
        } else {
          this.mapStyle = true;
        }
        this.gaoMap.changeMap(this.mapStyle);
      },
      /**清除marker*/
      clearMarker() {
        if (this.markers) {
          this.markers.forEach((item) => {
            this.gaoMap.map.remove(item);
        });
        }
      },
      handleLocation(row){
        if(row.longitude2) this.gaoMap.map.panTo([row.longitude2,row.latitude2])
      }
    },
    computed: {
        ...mapGetters(["systemSetting"]),
    },
  }
</script>

<style scoped lang="scss">
  .mapChange {
    top: 10px;
    color: #1890ff;
    //background-color: #e8f4ff;
    position: absolute;
    display: flex;
    z-index: 9999;
    div {
      padding: 4px 8px;
      border: 1px solid #fff;
      background-color: #e8f4ff;
      margin-left: 8px;
      cursor: pointer;
      &.active,
      &:hover {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }

</style>
