<template>
  <dia-log ref="dialog" width="45%" :title="title" :type="1">
    <div class="personage-track">
      <div class="track-title">
        <div class="titlebg"></div>
        <span class="name">{{ person ? personItem.userName : "执法一队1号车" }}</span>
        <span>{{ person ? "执法1队队员" : "苏A568974" }}</span>
      </div>
      <div class="track-content">
        <div class="oneList">
          <div class="item" :class="person ? 'item-left' : 'car-item'">
            <div class="ball"></div>
            <div class="content">
              {{ person ? "人员编号：" : "车辆编号："
              }}<span>{{
                person ? personItem.userId : "201128881111100"
              }}</span>
            </div>
          </div>
          <!-- <div class="item car-item" v-if="!person">
            <div class="ball"></div>
            <div class="content">驾驶员姓名：<span>张三</span></div>
          </div> -->
          <div class="item">
            <div class="ball"></div>
            <div class="content">
              当前状态：<span>{{ person ? personItem.status == '1' ? '在线' : personItem.status == '0' ? '离线' : '' : "行驶中" }}</span>
            </div>
          </div>
        </div>
        <div class="twoList">
          <div class="item">
            <div class="ball"></div>
            <div class="content">
              时间范围：
              <div class="time-query">
                <div class="interval-select">
                  <div class="star-time">
                    <el-date-picker
                      v-model="queryTime.fromTime"
                      type="datetime"
                      align="right"
                      :clearable="false"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="开始时间"
                    >
                    </el-date-picker>
                  </div>
                  <div class="symbol"></div>
                  <div class="end-time">
                    <el-date-picker
                      v-model="queryTime.toTime"
                      type="datetime"
                      align="right"
                      :clearable="false"
                      format="yyyy-MM-dd HH:mm:ss"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="结束时间"
                    >
                    </el-date-picker>
                    <img
                      class="data_icon"
                      src="@/assets/images/timeIcon.png"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="btns reset" @click="reset">
                <img src="@/assets/images/reset.png" alt="" />
                <span>重置</span>
              </div>
              <div class="btns" @click="query">
                <img src="@/assets/images/inquire.png" alt="" />
                <span>查询</span>
              </div>
            </div>
          </div>
        </div>
        <div class="threeList">
          <div class="item">
            <div class="item-top">
              <div class="ball"></div>
              <div class="contentTitle">轨迹地图：</div>
            </div>
            <div class="contentMap">
              <!-- <div id="personageTrackMap">

              </div> -->
              <el-amap
                v-loading="loading"
                element-loading-background="rgba(16, 49, 92, 0.8)"
                ref="personMap"
                map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518"
                :center="center"
                :zoom="zoom"
                :zooms="zooms"
                @init="init"
                view-mode="3D"
                :extra-options="{ vectorMapForeign: 'style_zh_cn' }"
                class="amap-person"
              >
                <!-- 江宁GeoJson文件 -->
                <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="jiangningGeojson" :polygon-options="polygonOptions" :visible="true" :draggable="false"></el-amap-geojson> -->
              </el-amap>
              <!-- <img src="@/assets/images/minMap.png" alt="" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </dia-log>
</template>
<script>
import diaLog from "../../components/dialog/index.vue";
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";

import OneGJ02 from "@/utils/mapJson/1GJ02.json";
import TwoGJ02 from "@/utils/mapJson/2GJ02.json";
import ThreeGJ02 from "@/utils/mapJson/3GJ02.json";
import FourGJ02 from "@/utils/mapJson/4GJ02.json";
import kaifaqu from "@/utils/mapJson/开发区空港开发区GJ02.json";
import ruanjianyuan from "@/utils/mapJson/开发区软件园GJ02.json";
// import L from "leaflet";
// import "@/utils/lib/leaflet.ChineseTmsProviders.js";
// import "@/utils/lib/leaflet-tilelayer-colorizr.js";
import { getLocInfoByImei } from "@/api/bigScreenApi"
import { getCenter } from "@/utils/amap"
export default {
  components: { diaLog },
  data() {
    return {
      title: "人员行程轨迹",
      person: false,
      personItem: null,
      queryTime: {
        fromTime: "",
        toTime: "",
      },
      heightStyle: {
        height: "500px",
      },
      zoom: 12,
      zooms:[10,18],
      center: [118.835418, 31.863971],
      map:null,
      polygonOptions: {
        strokeColor: '#00C5EC',   // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
        fillColor: 'rgba(64,175,255,0.4)'  // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
      },
      jiangninggeo:jiangninggeo,

      globalMap: null,
      track: null,
      mapLayer1: null,
      loading: false,
      layers:{
        layer:null,
      }
    };
  },
  methods: {
    init(map){
      this.map = map;
      map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
      this.layers.layer = new AMap.OverlayGroup();

      this.$nextTick(() => {
        var geojson1 = new AMap.Polygon({
          path:OneGJ02.features[0].geometry.coordinates[0][0],
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var text1 = new AMap.Text({
          // position: [element.properties.CENTERX,element.properties.CENTERY],
          position: getCenter(OneGJ02.features[0].geometry.coordinates[0][0]),
          anchor: 'bottom-center',
          text: OneGJ02.features[0].properties.NAME,
          style:{
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          },
        });
        var geojson2 = new AMap.Polygon({
          path:TwoGJ02.features[0].geometry.coordinates[0][0],
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var text2 = new AMap.Text({
          // position: [element.properties.CENTERX,element.properties.CENTERY],
          position: getCenter(TwoGJ02.features[0].geometry.coordinates[0][0]),
          anchor: 'bottom-center',
          text: TwoGJ02.features[0].properties.NAME,
          style:{
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          },
        });
        var geojson3 = new AMap.Polygon({
          path:ThreeGJ02.features[0].geometry.coordinates[0][0],
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var text3 = new AMap.Text({
          // position: [element.properties.CENTERX,element.properties.CENTERY],
          position: getCenter(ThreeGJ02.features[0].geometry.coordinates[0][0]),
          anchor: 'bottom-center',
          text: ThreeGJ02.features[0].properties.NAME,
          style:{
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          },
        });
        var geojson4 = new AMap.Polygon({
          path:FourGJ02.features[0].geometry.coordinates[0][0],
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })

        var text4 = new AMap.Text({
          // position: [element.properties.CENTERX,element.properties.CENTERY],
          position: getCenter(FourGJ02.features[0].geometry.coordinates[0][0]),
          anchor: 'bottom-center',
          text: FourGJ02.features[0].properties.NAME,
          style:{
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          },
        });
        var geojson5 = new AMap.Polygon({
          path:kaifaqu.features[0].geometry.coordinates[0][0],
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var text5 = new AMap.Text({
          // position: [element.properties.CENTERX,element.properties.CENTERY],
          position: getCenter(kaifaqu.features[0].geometry.coordinates[0][0]),
          anchor: 'bottom-center',
          text: kaifaqu.features[0].properties.NAME,
          style:{
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          },
        });

        var geojson6 = new AMap.Polygon({
          path:ruanjianyuan.features[0].geometry.coordinates[0][0],
          strokeColor: '#00C5EC', 
          fillColor: '#00AEFF',
          fillOpacity: 0.4,
          // fillOpacity: 0.3,
          editable:false,
          visible:true,
        })
        var text6 = new AMap.Text({
          // position: [element.properties.CENTERX,element.properties.CENTERY],
          position: getCenter(ruanjianyuan.features[0].geometry.coordinates[0][0]),
          anchor: 'bottom-center',
          text: ruanjianyuan.features[0].properties.NAME,
          style:{
            'font-size': '16px',
            'font-weight': 'bold',
            'text-align': 'center',
            'color': '#00AEFF',
            'text-shadow': '0px 1px 0px rgba(0,0,0,0.3)',
            'white-space': 'nowrap',
          },
        });

        
        this.layers.layer.addOverlay(geojson1);
        this.layers.layer.addOverlay(geojson2);
        this.layers.layer.addOverlay(geojson3);
        this.layers.layer.addOverlay(geojson4);
        this.layers.layer.addOverlay(geojson5);
        this.layers.layer.addOverlay(geojson6);
        this.map.add(this.layers.layer);
        map.setFitView();
      })
    },
    initLocation(){
      // 获取地图实例
      const mapInstance = this.$refs.personMap.$$getInstance();
      // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
      mapInstance.setFitView();
    },
    open(person, item) {
      // console.log(person)
      // console.log(item);
      if (person == "person") {
        this.title = "人员行程轨迹";
        this.personItem = item;
        this.person = true;
        this.queryTime.fromTime = this.getCurrentTime();
        this.queryTime.toTime = this.getCurrentTime(1);
        this.query();
      } else {
        this.title = "车辆行程轨迹";
        this.person = false;
      }
      this.$refs.dialog.open("1");
      // this.$nextTick(()=>{
      //   this.initMap();
      // })
    },
    Close() {
      this.$refs.dialog.Close();
    },
    // 地图初始化
    initMap() {
      this.globalMap = L.map("personageTrackMap", {
        center: [31.953175, 118.839514], // 地图中心[纬度，经度]
        zoom: 18, // 地图层级
        zoomControl: false,
        attributionControl: false, // 右下角leaflet图标
        doubleClickZoom: false, // 双击放大
        scrollWheelZoom: true, // 滚轮放大
        dragging: true,
        renderer: L.svg(),
      });

      L.tileLayer
        .chinaProvider("GaoDe.Normal.Map", {
          maxZoom: 18,
          minZoom: 5,
          color: { r: 10, g: 38, b: 74 }, //自定义颜色滤镜
        })
        .addTo(this.globalMap);

      this.globalMap.createPane("mapLayer1");
      this.globalMap.getPane("mapLayer1").style.zIndex = 501;
      this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
      this.addLayer1();
    },
    addLayer1() {
      let geojson = L.geoJSON(
        jiangninggeo,
        {
          style: function (feature) {
            return {
              color: "#00C5EC",
              weight: 1,
              fillColor: "rgba(64,175,255,0.4)",
              fillOpacity: 1,
            };
          },
        },
        { className: "jack-s" }
      ).addTo(this.globalMap);
      // this.addMark()
      // 获取json文件的中心位置
      this.mapLayer1 = geojson.getBounds();
      // 居中加载json文件
      this.globalMap.fitBounds(this.mapLayer1);
    },
    // 时间重置
    reset(){
      Object.keys(this.queryTime).forEach(key=>{this.queryTime[key]=''})
      if(this.map.getAllOverlays('polyline')) {
        this.map.remove(this.map.getAllOverlays('polyline'));
      }
      const mapInstance = this.$refs.personMap.$$getInstance();
      // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
      mapInstance.setFitView();
    },
    // 查询
    query(){
      if(!this.queryTime.fromTime) {
        this.$modal.msgError("请选择查询的起始时间");
      } else if(!this.queryTime.toTime) {
        this.$modal.msgError("请选择查询的截止时间");
      } else {
        this.loading = true;
        getLocInfoByImei({...this.queryTime,imei:this.personItem.imei}).then(res=>{
          console.log(res,'行动轨迹');
          this.loading = false;
          if(res.code == 200 && res.data.result == '000') {
            let arr = []
            res.data.data.forEach(element => {
              let arrTwo = [];
              arrTwo[1] = element.latitude;
              arrTwo[0] = element.longitude;
              arr.push(arrTwo);
            });
            // if(this.track) {
            //   this.globalMap.removeLayer(this.track);
            // }
            if(this.map.getAllOverlays('polyline')) {
              this.map.remove(this.map.getAllOverlays('polyline'));
            }
            this.track = new AMap.Polyline({
              path: arr,
              strokeColor: '#F44444',
              strokeOpacity: 1,
            })
            this.map.add(this.track);
            const mapInstance = this.$refs.personMap.$$getInstance();
            // 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
            mapInstance.setFitView(this.track);
            // this.track = L.polyline(arr,{
            //   pane:'mapLayer1',
            //   // color: '#F894AF'
            //   color: 'red'
            // }).addTo(this.globalMap)

            // this.globalMap.fitBounds(this.track.getBounds());
          } else if(res.code == 200 && res.data.msg) {
            this.$modal.msgError(res.data.msg);
          }
        })
      }
    },
    // 获取当前时间
    getCurrentTime(id){
      // 获取当前时间
      const now = new Date();

      // 获取年月日时分秒
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1，并且格式化为两位数
      const day = String(now.getDate()).padStart(2, '0'); // 格式化为两位数
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      // 格式化为字符串
      const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      const formattedTime = `${year}-${month}-${day} 00:00:00`;
      if(id == 1) {
        return formattedDateTime;
      } else {
        return formattedTime;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.personage-track {
  .track-title {
    display: flex;
    align-items: center;
    position: relative;
    .titlebg {
      position: absolute;
      left: -15px;
      top: -18px;
      width: 50px;
      height: 50px;
      background-image: url("../../../assets/images/personnel.png");
      background-position: center;
      background-size: 100% 100%;
    }
    span {
      font-size: 14px;
      font-family: "Source Han Sans CN-Medium";
      font-weight: 500;
      color: #e9f4ff;
      line-height: 14px;
    }
    .name {
      margin: 0 15px 0 30px;
    }
  }
  .track-content {
    margin-top: 15px;
    padding-left: 20px;
    display: grid;
    grid-column: 1fr;
    grid-row-gap: 15px;
    .oneList {
      display: flex;
      .item {
        display: flex;
        align-items: center;
        .ball {
          width: 4px;
          height: 4px;
          background: #daebff;
          box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
            0px 0px 5px 0px rgba(229, 241, 255, 0.25);
          border-radius: 20px 20px 20px 20px;
          margin-right: 15px;
        }
        .content {
          font-size: 14px;
          font-family: "Source Han Sans CN-Medium";
          font-weight: 500;
          color: #cccccc;
          line-height: 20px;
          span {
            font-size: 14px;
            font-family: "Source Han Sans CN-Medium";
            font-weight: 500;
            color: #e9f4ff;
            line-height: 20px;
          }
        }
      }
      .item-left {
        margin-right: 150px;
      }
      .car-item {
        margin-right: 80px;
      }
    }
    .twoList {
      .item {
        display: flex;
        align-items: center;
        .ball {
          width: 4px;
          height: 4px;
          background: #daebff;
          box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
            0px 0px 5px 0px rgba(229, 241, 255, 0.25);
          border-radius: 20px 20px 20px 20px;
          margin-right: 15px;
        }
        .content {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: "Source Han Sans CN-Medium";
          font-weight: 500;
          color: #cccccc;
          line-height: 20px;
          .time-query {
            background-image: url("../../../assets/images/timebg.png");
            width: 440px;
            height: 35px;
            background-size: 100% 100%;
            .interval-select {
              display: flex;
              align-items: center;
              ::v-deep .el-input__prefix {
                display: none;
              }
              .star-time,
              .end-time {
                position: relative;
                .data_icon {
                  position: absolute;
                  right: 5px;
                  top: 8px;
                  width: 20px;
                }
                ::v-deep .el-date-editor {
                  background-color: transparent;
                  width: 210px;
                  .el-input__inner {
                    background-color: transparent;
                    border: none;
                    width: 100%;
                    height: 35px;
                    font-size: 14px;
                    font-family: "Source Han Sans CN-Medium";
                    font-weight: 500;
                    color: #e9f4ff;
                    padding-left: 15px;
                  }
                  .el-input__inner::placeholder {
                    /* 在这里添加你想要修改的 placeholder 样式 */
                    font-size: 14px;
                    font-family: "Source Han Sans CN-Regular";
                    font-weight: 400;
                    color: #d3eef2;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
                  }
                }
              }
              .symbol {
                width: 14px;
                height: 6px;
                background-image: url("../../../assets/images/routeTime.png");
                background-size: 100% 100%;
              }
            }
          }
          .btns {
            width: 92px;
            height: 35px;
            background-image: url("../../../assets/images/inquirebg.png");
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img {
              width: 24px;
              margin-right: 5px;
            }
            span {
              font-size: 14px;
              font-family: "Source Han Sans CN-Regular";
              font-weight: 400;
              color: #ffffff;
              line-height: 20px;
            }
          }
          .reset {
            background-image: url("../../../assets/images/resetbg.png");
            margin: 0 20px;
          }
        }
      }
    }
    .threeList {
      .item {
        display: flex;
        flex-direction: column;
        .item-top {
          display: flex;
          align-items: center;
          .ball {
            width: 4px;
            height: 4px;
            background: #daebff;
            box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
              0px 0px 5px 0px rgba(229, 241, 255, 0.25);
            border-radius: 20px 20px 20px 20px;
            margin-right: 15px;
          }
          .contentTitle {
            font-size: 14px;
            font-family: "Source Han Sans CN-Medium";
            font-weight: 500;
            color: #cccccc;
            line-height: 20px;
          }
        }
        .contentMap {
          padding: 15px 74px 0 14px;
          width: 100%;
          height: 400px;
          #personageTrackMap {
            width: 100%;
            height: 100%;
            background-color: #fff;
          }
          .amap-person {
            width: 100%;
            height: 100%;
          }
          // img {
          //   width: 100%;
          //   height: 100%;
          // }
        }
      }
    }
  }
}
</style>
