<template>
  <div v-loading="loading" class="command-index" style="position: relative">
    <div style="display:none;">
      <problemDetailWin :id="questionId" @closeInfoWindow="closeInfoWindow" ref="problemDetailWin"></problemDetailWin>
      <hpDetailWin :askChild="askChild" @closeInfoWindow="closeInfoWindow" ref="hpDetailWin"></hpDetailWin>
    </div>
    <div class="index-map" id="indexMap"></div>
    <img class="head-img" src="../../assets/img/command/nav.png"/>
    <div :style="{right:(activeType=='problem'||activeType=='ask')?'1.2rem':'5.3rem'}" class="map-type">
      <div @click="mapTypeClick(1)" :class="mapType==1?'map-type-check':''">
        <div></div>
        <div>GIS地图</div>
      </div>
      <div @click="mapTypeClick(2)" :class="mapType==2?'map-type-check':''">
        <div></div>
        <div>水利地图</div>
      </div>
      <div @click="mapTypeClick(3)" :class="mapType==3?'map-type-check':''">
        <div></div>
        <div>多光谱地图</div>
      </div>
      <div @click="mapTypeClick(4)" :class="mapType==4?'map-type-check':''">
        <div></div>
        <div>全景地图</div>
      </div>
    </div>
    <div v-if="activeType=='problem'" class="problem-marker">
      <div>
        <img src="../../assets/img/command/pollution.png"/>
        <div>污染物</div>
      </div>
      <div>
        <img src="../../assets/img/command/quality-marker.png"/>
        <div>水质</div>
      </div>
      <div>
        <img src="../../assets/img/command/outlet.png"/>
        <div>排口</div>
      </div>
      <div>
        <img src="../../assets/img/command/build.png"/>
        <div>违建</div>
      </div>
    </div>
    <div class="head-dev">
      <div @click="typeLick('date')">
        <img
          class="head-img"
          :src="activeType=='date'?require('../../assets/img/command/date-h.png'):require('../../assets/img/command/date.png')"
        />
        <div>
          <div>数据统计</div>
          <div>Data statistics</div>
        </div>
      </div>
      <div @click="typeLick('problem')">
        <img
          class="head-img"
          :src="activeType=='problem'?require('../../assets/img/command/problem-h.png'):require('../../assets/img/command/problem.png')"
        />
        <div>
          <div>问题管理</div>
          <div>Problem Management</div>
        </div>
      </div>
      <div @click="typeLick('ask')">
        <img
          class="head-img"
          :src="activeType=='ask'?require('../../assets/img/command/ask-h.png'):require('../../assets/img/command/ask.png')"
        />
        <div>
          <div>任务管理</div>
          <div>Task management</div>
        </div>
      </div>
      <div @click="typeLick('quality')">
        <img
          class="head-img"
          :src="activeType=='quality'?require('../../assets/img/command/quality-h.png'):require('../../assets/img/command/quality.png')"
        />
        <div>
          <div>水质管理</div>
          <div>Water quality management</div>
        </div>
      </div>
    </div>
    <dateLeft :dataChild="dataChild" v-if="activeType=='date'&&finshMap"></dateLeft>
    <dateRight :dataChild="dataChild" v-if="activeType=='date'&&finshMap"></dateRight>
    <problemLeft :userList="userList" :driverArea="driverArea" :driverDataList="driverDataList" :driverId="driverId" @fillMarker="fillMarker" @problemClear="problemClear"
                 @problemSearch="problemSearch" @showProblemDetail="showProblemDetail"
                 v-if="activeType=='problem'&&finshMap"></problemLeft>
    <askLeft @hpDetail="hpDetail" @routesClick="routesClick" @askClear="askClear" :driverDataList="driverDataList" :driverId="driverId"
             v-if="activeType=='ask'&&finshMap"></askLeft>
    <qualityLeft :driverDataList="driverDataList" @qualityClear="askClear" :driverId="driverId" v-if="activeType=='quality'&&finshMap"></qualityLeft>
    <qualityRight :userList="userList" v-if="activeType=='quality'&&finshMap"></qualityRight>
  </div>
</template>

<script>
  import AMap from "AMap";
  import njBround from "static/nj";
  import njBround2 from "static/njBround";
  import dateLeft from './date/dateLeft'
  import dateRight from './date/dateRight'
  import problemLeft from './problem/problemLeft'
  import askLeft from './ask/askLeft'
  import {mapGetters} from "vuex";
  import problemDetailWin from './problem/problemDetailWin'
  import hpDetailWin from './ask/hpDetailWin'
  import qualityLeft from './quality/qualityLeft'
  import qualityRight from './quality/qualityRight'
  import store from '../../vuex'
  import $ from 'jquery'
  import api from '@/api/command/index'
  import adminApi from '@/api/permission/admin'

  export default {
    name: "command-container",
    data() {
      return {
        dataChild:{},
        driverArea:'',
        driverId: '',
        questionId:'',
        InfoWindow: null,
        mapType: 1,
        loading: false,
        activeType: "date",
        map: {},
        center: {},
        askChild:{},
        barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06,
        driverDataList:[],
        nameMarkList: [],
        routersMarker:[],
        polygonList: [],
        polygonList2:[],
        driverList: [],
        markerList: [],
        userList:[],
        finshMap: false
      };
    },
    created(){
      let designSize = (1920+1080)/2; // 设计图尺寸
      let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
      let rem = wW * 100 / designSize;
      document.documentElement.style.fontSize = rem + 'px';
      store.dispatch('user/setFontSize', rem)
      $(window).resize(function ()// 绑定到窗口的这个事件中
      {
        let designSize = (1920+1080)/2
        let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
        let rem = wW * 100 / designSize;
        document.documentElement.style.fontSize = rem + 'px';
        store.dispatch('user/setFontSize', rem)
        // window.location.reload()
      });
    },
    mounted() {
      this.getUserAdminList()
      this.loading = true
      let me = this;
      this.map = new AMap.Map("indexMap", {
        center: [118.750078, 31.983115],
        mapStyle: "amap://styles/dark",
        resizeEnable: true
      });
      this.center = new AMap.LngLat(118.750078, 31.983115)
      this.map.on("complete", function () {
        me.finshMap = true
        me.getDateIndex()
        me.InfoWindow = new AMap.InfoWindow({
          zIndex: 14,
          autoMove: true,
          content: me.$refs.problemDetailWin.$el,
          offset: new AMap.Pixel(0, -25)
        });
        me.addBound();
        me.addBound2();
        me.map.setFitView(this.polygonList)
        me.getDriver()
        me.loading = false
      });
    },
    computed: {
      ...mapGetters(["fontSize"])
    },
    components: {dateLeft, dateRight, problemLeft, problemDetailWin, askLeft,hpDetailWin,qualityLeft,qualityRight},
    methods: {
      getUserAdminList() {
        adminApi.getUserAdminList().then(res => {
          this.userList = res.data ? res.data : []
        }).catch(err => {
          this.userList = []
        });
      },
      hpDetail(child){
        this.closeInfoWin()
        this.askClear()
        this.askChild = {}
        let me = this
        setTimeout(function () {
          let marker = me.driverList.find(item => item.id == child.driverId)
          if (marker) {
            me.askChild = JSON.parse(JSON.stringify(child))
            me.InfoWindow.open(me.map, marker.getPath()[0]);
          }
          me.checkDriver(child.driverId)
        }, 500)
      },
      routesClick(driverId) {
        this.clearRoutersMarker()
        this.checkDriver(driverId)
        let child = this.driverDataList.find(item => item.id == driverId)
        if (child&&child.pointList&&child.pointList.length>0) {
          this.initRouters(child)
        } else {
          this.$notify.error({
            title: '错误',
            message: '没有找到飞行路线'
          });
        }
      },
      initRouters(child) {
        let path = child.pointList
        let point = new AMap.LngLat(path[0].x, path[0].y)
        let me = this
        let image = require('../../assets/img/command/uva.png')
        let icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(40, 40),
          // 图标的取图地址
          image: image,
          // 图标所用图片大小
          imageSize: new AMap.Size(40, 40),
        });
        let pathList = []
        for (let i = 0, l = path.length; i < l; i++) {
          pathList.push(
            new AMap.LngLat(path[i].x, path[i].y)
          )
        }
        let marker = new AMap.Marker({
          map: me.map,
          position: point,
          icon: icon,
          offset: new AMap.Pixel(-20, -20),
          autoRotation: true,
          angle: -90,
        });
        // 绘制轨迹
        let polyline = new AMap.Polyline({
          map: me.map,
          path: pathList,
          showDir: true,
          strokeColor: "#FFEF5D",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });

        let passedPolyline = new AMap.Polyline({
          map: me.map,
          // path: lineArr,
          strokeColor: "#AF5",  //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        })

        marker.on('moving', function (e) {
          passedPolyline.setPath(e.passedPath);
        });

        marker.moveAlong(pathList, 6000);
        this.routersMarker=[marker,passedPolyline,polyline]
      },
      hideMarker() {
        this.markerList.map(item => {
          item.hide()
        })
      },
      showMarker() {
        this.markerList.map(item => {
          item.show()
        })
      },
      closeInfoWin() {
        if (this.InfoWindow) {
          this.InfoWindow.close()
        }
      },
      clearRoutersMarker(){
        if (this.routersMarker.length > 0) {
          this.routersMarker.map(item => {
            this.map.remove(item)
          })
          this.routersMarker=[]
        }
      },
      clearMarker() {
        if (this.markerList.length > 0) {
          this.markerList.map(item => {
            this.map.remove(item)
          })
          this.markerList=[]
        }
      },
      fillMarker() {
        this.fillDriver()
        this.closeInfoWin()
        this.map.setFitView(this.polygonList)
      },
      askClear(driverId) {
        this.checkDriver(driverId)
        this.driverId=driverId
        this.clearRoutersMarker()
        this.map.setFitView(this.polygonList)
      },
      problemClear(driverId,driverArea) {
        if (driverId) {
          this.checkDriver(driverId)
        } else {
          this.fillMarker()
        }
        this.clearMarker()
        this.map.setFitView(this.polygonList)
      },
      closeInfoWindow() {
        this.closeInfoWin()
        this.fillDriver()
      },
      problemSearch(markerList,driverArea,driverId) {
        this.driverArea=driverArea
        let me = this
        let list = []
        markerList.map(item => {
          if (item.longitude && item.latitude) {
            let point = new AMap.LngLat(item.longitude, item.latitude)
            list.push(me.addMarker(point, item))
          }
        })
        if(driverArea||driverId){
          this.polygonList2.map(item=>{
            item.hide()
          })
          this.driverList.map(item=>{
            item.show()
          })
        }else{
          this.polygonList2.map(item=>{
            item.show()
          })
          this.driverList.map(item=>{
            item.hide()
          })
        }
        me.markerList = list
      },
      addMarker(point, item) {
        let image = ''
        if (item.category == 1) {
          image = require('../../assets/img/command/pollution-marker.png')
        } else if (item.category ==4) {
          image = require('../../assets/img/command/quality-marker.png')
        } else if (item.category == 3) {
          image = require('../../assets/img/command/outlet-marker.png')
        } else if (item.category == 2) {
          image = require('../../assets/img/command/build-marker.png')
        }
        let icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(40, 40),
          // 图标的取图地址
          image: image,
          // 图标所用图片大小
          imageSize: new AMap.Size(40, 40),
        });
        let marker = new AMap.Marker({
          zIndex: 12,
          animation: 'AMAP_ANIMATION_DROP',
          position: point,
          icon: icon,
          offset: new AMap.Pixel(-20, -20)
        });
        marker.setDraggable(true)
        marker.childData = item
        let me = this
        marker.on('click', function () {
          me.getMarkerDetail(this)
        })
        marker.setMap(this.map)
        return marker
      },
      checkDriver(driverId) {
        this.driverList.map(item => {
          if (item.check) {
            item.check = false
            item.setOptions({
              strokeColor: '#176061',
              fillColor: '#176061'
            })
          }
          if (item.id == driverId) {
            item.check = true
            item.setOptions({
              strokeColor: '#09EBE0',
              fillColor: '#17ABA3'
            })
          }
        })
      },
      showProblemDetail(child) {
        console.log(child)
        this.questionId=0
        this.closeInfoWin()
        this.map.setFitView(this.polygonList)
        let me = this
        setTimeout(function () {
          let marker = me.markerList.find(item => item.childData.id == child.id)
          if (marker) {
            me.questionId=child.id
            me.InfoWindow.open(me.map, marker.getPosition());
          }
          me.checkDriver(child.driverId)
        }, 500)
      },
      getMarkerDetail(marker) {
        this.questionId=0
        this.$nextTick(function () {
          this.questionId=marker.childData.id
          this.InfoWindow.open(this.map, marker.getPosition());
          this.checkDriver(marker.childData.driverId)
        })
      },
      getDriver() {
        api.getWaterDriver({}).then(res => {
          this.driverDataList=res.data?res.data:[]
          res.data.map(item => {
            let polygons = this.returnDriver(item)
            if (polygons) {
              this.driverList.push(polygons)
            }
          })
        }).catch(e => {
        });
      },
      returnDriver(item) {
        let me = this
        let polygons = null;
        var bounds = item.pointList;
        if (bounds && bounds.length > 0) {
          let path = []
          for (let i = 0, l = bounds.length; i < l; i++) {
            path.push(
              new AMap.LngLat(bounds[i].x, bounds[i].y)
            )
          }
          polygons = new AMap.Polygon({
            zIndex: 11,
            path: path,
            strokeColor: "#176061", //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            strokeStyle: "solid", //线样式
            strokeDasharray: [10, 5], //补充线样式
            fillColor: "#176061",
            fillOpacity: 1
          });
          polygons.name = item.name
          polygons.id = item.id
          polygons.driverArea=item.driverArea
          polygons.on('click', function () {
            me.driverId = this.id
            me.checkDriver(this.id)
            me.clearRoutersMarker()
            me.closeInfoWin()
          })
          this.map.add(polygons)
        }
        return polygons
      },
      mapTypeClick(mapType) {
        if (mapType != this.mapType) {
          this.mapType = mapType
          if (mapType == 1) {
            this.map.setFeatures(['bg', 'point', 'road', 'building'])
          } else {
            this.map.setFeatures(['bg'])
          }
          this.map.setFitView(this.polygonList)
        }
      },
      fillDriver() {
        this.driverList.map(item => {
          if (item.check) {
            item.check = false
            item.setOptions({
              strokeColor: '#176061',
              fillColor: '#176061'
            })
          }
        })
        this.driverId = ''
      },
      getDateIndex(){
        api.getDateIndex({}).then(res => {
          this.dataChild=res.data?res.data:{}
        }).catch(e => {
          this.dataChild={}
        });
      },
      typeLick(type) {
        this.activeType = type;
        this.problemClear()
        this.clearRoutersMarker()
        this.closeInfoWin()
        this.markerList = []
        this.driverArea=''
        this.driverId=''
        if(type=='date'){
          this.getDateIndex()
          this.showDirver()
        }
        if(type=='ask'){
          this.InfoWindow.setContent(this.$refs.hpDetailWin.$el)
          this.showDirver()
        }else if(type=='problem'){
          this.InfoWindow.setContent(this.$refs.problemDetailWin.$el)
          this.polygonList2.map(item=>{
            item.show()
          })
          this.driverList.map(item=>{
            item.hide()
          })
        }else{
          this.showDirver()
        }
      },
      showDirver(){
        this.polygonList2.map(item=>{
          item.hide()
        })
        this.driverList.map(item=>{
          item.show()
        })
      },
      addBound() {
        let me = this;
        let list = njBround;
        if (list && list.length > 0) {
          list.map(item => {
            var bounds = item;
            let path = [];
            bounds.map(child => {
              delete child.Q
              delete child.R
              path.push(new AMap.LngLat(child.lng, child.lat));
            })
            let polygon = new AMap.Polygon({
              strokeWeight: 2,
              path: path,
              fillOpacity: 0,
              strokeColor: "#9BF1F6"
            });
            me.polygonList.push(polygon)
            me.map.add(polygon);
          });
        }
      },
      addBound2() {
        let me = this;
        let list = njBround2;
        if (list && list.length > 0) {
          list.map(item => {
            var bounds = item.bounds;
            if (bounds) {
              for (let i = 0, l = bounds.length; i < l; i++) {
                let path = [];
                bounds[i].map(cc => {
                  path.push(new AMap.LngLat(cc.lng, cc.lat));
                });
                let polygon = new AMap.Polygon({
                  strokeWeight: 4,
                  path: path,
                  fillOpacity: 0.7,
                  fillColor: "#15948d",
                  strokeColor: "#0CEBE1"
                });
                polygon.adcode=item.adcode
                polygon.hide()
                me.polygonList2.push(polygon)
                polygon.on('click', function () {
                  me.driverArea=parseInt(this.adcode)
                })
                me.map.add(polygon);
              }
            }
          });
        }
      },
    }
  };
</script>

<style lang="less">
  .amap-info-close {
    display: none;
  }

  .amap-info-content {
    background-color: inherit;
  }

  .amap-info-outer, .amap-menu-outer {
    box-shadow: inherit;
    background-color: inherit;
  }

  .command-index {
    width: 100%;
    height: 100%;

    .el-loading-mask {
      background-color: inherit;
    }

    .problem-marker {
      position: absolute;
      bottom: 0.3rem;
      right: 7.3rem;
      display: flex;

      > div {
        margin-left: 0.2rem;
        display: flex;
        width: 0.84rem;
        align-items: center;

        > img {
          width: 0.24rem;
          height: 0.24rem;
          margin-right: 0.1rem;
        }

        > div {
          font-family: PingFangSC-Medium;
          font-size: 0.16rem;
          color: #FFFFFF;
        }
      }
    }


    .map-type {
      position: absolute;
      bottom: 0.3rem;
      right: 5.3rem;
      display: flex;

      > div {
        margin-left: 0.23rem;
        display: flex;
        width: 1.025rem;
        cursor: pointer;

        > div:first-child {
          background: #ffffff;
          width: 0.025rem;
          height: 0.163rem;
        }

        > div {
          width: 1rem;
          text-align: center;
          background: #393939;
          font-family: PingFangSC-Medium;
          font-size: 0.16rem;
          color: #FFFFFF;
          text-align: center;
          height: 0.31rem;
          line-height: 0.31rem;
        }
      }

      .map-type-check {
        > div:first-child {
          background: #36B8B3 !important;
        }

        > div {
          background: transparent;
          color: #4BFFF8 !important;
        }
      }
    }


    .head-dev {
      position: absolute;
      top: 0.51rem;
      left: 6.096rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > div {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-left: 0.896rem;
        cursor: pointer;

        > img {
          width: 0.4rem;
          height: 0.4rem;
        }

        > div {
          margin-left: 0.641rem;

          > div:first-child {
            font-family: PingFangSC-Medium;
            font-size: 0.2rem;
            line-height: 0.28rem;
            color: #ffffff;
          }

          > div:last-child {
            font-family: PingFangSC-Regular;
            font-size: 0.1rem;
            color: #ffffff;
            line-height: 0.14rem;
            margin-top: 0.01rem;
          }
        }
      }

      > div:first-child {
        margin-left: 0rem;
      }
    }

    .index-map {
      width: 100%;
      height: 100%;
      border: 1px solid #dcdfe6;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

      .amap-marker-label {
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 18px !important;
      }
    }

    .head-img {
      position: absolute;
      top: 0rem;
      width: 100%;
      height: 1rem;
    }

    .box-header-title {
      width: 100%;
      background-image: linear-gradient(90deg,
      #213232 2%,
      rgba(101, 228, 227, 0) 100%);
      height: 0.36rem;
      line-height: 0.36rem;
      border-top: 0.01rem solid #65e4e3;
      position: relative;
      display: flex;
      justify-content: space-between;

      > div {
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        color: #ffffff;
        padding-left: 0.1rem;
      }
    }

    .box-right {
      position: absolute;
      top: 1.55rem;
      width: 5.05rem;
      right: 0.1rem;

      > div:first-child {
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          padding: 0rem 0.295rem 0.25rem 0.295rem;
          position: relative;

          > div {
            margin-top: 0.21rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            > div:first-child {
              display: flex;
              align-items: center;

              > img {
                width: 0.2rem;
                height: 0.2rem;
                margin-right: 0.1rem;
              }

              > div:last-child {
                width: 2.6rem;
                overflow: hidden;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                white-space: nowrap;
                font-family: PingFangSC-Regular;
                font-size: 0.2rem;
                color: #ffffff;
                line-height: 0.28rem;
              }
            }

            > div:last-child {
              font-family: PingFangSC-Regular;
              font-size: 0.14rem;
              color: #ffffff;
              line-height: 0.2rem;
            }
          }
        }
      }

      > div:nth-child(2) {
        margin-top: 0.204rem;
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 0.178rem;
          padding-top: 0.492rem;

          > div:first-child {
            font-family: PingFangSC-Regular;
            font-size: 0.14rem;
            color: #ffffff;
            position: absolute;
            top: 0.2rem;
            left: 0.573rem;
          }
        }
      }

      > div:last-child {
        margin-top: 0.2rem;
        background-color: rgba(0, 0, 0, 0.6);

        > div:last-child {
          position: relative;
          display: flex;
          justify-content: center;
          padding: 0 0.34rem;
        }
      }
    }

    .el-form-item__content {
      line-height: 0.3rem;
      flex: 1;
    }

    .el-form-item {
      margin-bottom: 0.13rem;
      display: flex;
      align-items: center;
    }

    .el-form-item__label {
      font-family: PingFangSC-Regular;
      font-size: 0.14rem;
      color: #FFFFFF;
      line-height: 0.2rem;
    }

    .el-input {
      color: #FFFFFF;
    }

    .el-input__inner {
      border: none;
      opacity: 0.8;
      background-color: #3D3D3D;
      color: #FFFFFF;
      font-family: PingFangSC-Regular;
      font-size: 0.12rem;
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.138rem;
      width: 100%;
    }

    .el-date-editor .el-range__icon {
      display: none;
      font-size: 0.12rem;
      line-height: 0.3rem;
    }

    .el-input__icon {
      width: 0.35rem;
    }

    .el-date-editor .el-range-separator {
      padding: 0 5px;
      line-height: 0.3rem;
      width: 5%;
      color: #FFFFFF;
      opacity: 0.8;
      font-size: 0.12rem;
    }

    .el-date-editor .el-range-input {
      width: 40%;
      color: #ffffff;
      line-height: 0.3rem;
      font-size: 0.12rem;
      background-color: initial;
      opacity: 0.8;
    }

    .el-date-editor .el-range__close-icon {
      font-size: 0.12rem;
      color: #C0C4CC;
      line-height: 0.3rem;
    }

    .el-select .el-input .el-select__caret {
      color: #ffffff;
      font-size: 0.12rem;
    }

    .el-input__icon {
      line-height: 0.3rem
    }
  }
</style>
