<template>
  <div id="boat-item">
    <ul class="screen-list">
      <li v-for="item in perspectiveList" :key="item.id" :title="item.name" @click="selectTool(item)">
        <img :src="imgSrc(item)" class="screen-img" />
      </li>
    </ul>
  </div>
</template>

<script>
import {setBoatGPS,setBoatHeatmap, setMapClick, setWatchLineAny, ViewshedArea} from "@/units/map/AddLayer";
import {getBoatRealTimePosition, getBoatToken} from "@/service/show-platform";

export default {
  name: "boatItem",
  data(){
    return{
      dataIndex:1,
      allData:[],
      perspectiveList:[
        {
          id:'0001',
          name:'热力图',
          chosen:false,
        },
        {
          id:'0002',
          name:'实时位置',
          chosen:false,
        },
      ],
    }
  },
  methods:{
    imgSrc(item){
      if(item.chosen){
        return require('../../../../../assets/imgs/mainPage/'+item.name+'-选中.png')
      }else{
        return require('../../../../../assets/imgs/mainPage/'+item.name+'-未选中.png')
      }
    },
    currentTime(type) {
      let date
      if(type =="current"){
        date = new Date();
      }else if(type =="before"){
        date = new Date(new Date().getTime() - 1 * 60 * 60 * 1000)
      }
      let year = date.getFullYear(); //月份从0~11，所以加一
      let month = date.getMonth();
      console.log("month",month);
      let dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
      ];
      //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
      for (let i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
          dateArr[i] = "0" + dateArr[i];
        }
      }
      let strDate =
          year +
          "-" +
          dateArr[0] +
          "-" +
          dateArr[1] +
          " " +
          dateArr[2] +
          ":" +
          dateArr[3] +
          ":" +
          dateArr[4];
      //此处可以拿外部的变量接收  strDate:2022-05-01 13:25:30
      return strDate
    },
    heatmapAnalysis(show){
      if(show){
        this.allData = [];
        this.getData(1);
      }else{
        setBoatHeatmap(false)
      }
    },
    getData(index){
      getBoatToken().then(res =>{
        if(res.status =="success"){
          let token = res.data.token;
          let params = {
            "startTime":this.currentTime("before"),
            "endTime":this.currentTime("current"),
            "pageIndex":index,
            "pageSize":999,
            "token":token
          }
          getBoatRealTimePosition(params).then(res =>{
            if(res.status == "success"){
              if(res.count == 999){
                this.allData = this.allData.concat(res.Result.data)
                this.getData(index+1);
              }else{
                setBoatHeatmap(true,this.allData);
                debugger
                setMapClick('','')
              }
            }
          })
        }
      })
    },
    getSingleBoatData(index){
      getBoatToken().then(res =>{
        if(res.status =="success"){
          let token = res.data.token;
          let params = {
            "startTime":this.currentTime("before"),
            "endTime":this.currentTime("current"),
            "pageIndex":index,
            "pageSize":999,
            "token":token
          }
          getBoatRealTimePosition(params).then(res =>{
            if(res.status == "success"){
              if(res.count == 999){
                this.allData = this.allData.concat(res.Result.data)
                this.getSingleBoatData(index+1);
              }else{
                setBoatGPS(true,this.allData)
                debugger
                setMapClick('','')
              }
            }
          })
        }
      })
    },
    singleBoatAnalysis(show){
      if(show){
        this.allData = [];
        this.getSingleBoatData(1);
      }else{
        setBoatGPS(false)
      }
    },


    selectTool(item){
      for(let i=0;i<this.perspectiveList.length;i++){
        if(item.name ==this.perspectiveList[i].name) {
          this.perspectiveList[i].chosen = !this.perspectiveList[i].chosen;
          if(this.perspectiveList[i].chosen){
            switch (this.perspectiveList[i].name){
              case "热力图":
                this.heatmapAnalysis(true)
                this.$emit('setToolDetailType','')
                break;
              case "实时位置":
                this.singleBoatAnalysis(true)
                break;
            }
          }else{
            switch (this.perspectiveList[i].name){
              case "热力图":
                this.heatmapAnalysis(false)
                this.$emit('setToolDetailType','')
                break;
              case "实时位置":
                this.singleBoatAnalysis(false)
                this.$emit('setToolDetailType','')
                break;
            }
          }
        }
        else{
          this.perspectiveList[i].chosen = false
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
#boat-item{
  position: absolute;
  right:70px;
  top:750px;
  z-index: 1;
  text-align: center;
  background: rgba(0, 31, 112, 0.6);
  border-radius: 4px;
  border: 1px solid #00a1ff;
  color: #fff;
  .screen-list{
    padding: 10px 0px 10px 0px;
    margin: 0;
  }
  .screen-list li{
    list-style: none;
    cursor: pointer;
    padding: 2px 0px 2px 0px;
  }
  .screen-img{
    width: 35px;
    height: 35px;
  }
}
</style>