<template>
  <div id="boat-single-item"  class="map-tool-model">
    <common-map-tool-title @close="close" :title="tempBoat.attributes.BOATNAME"/>
    <div class="main_content  p20">
      <div class="single-info">
        <span class="info_title">船长</span>
        <span class="info_value">{{ tempBoat.attributes.SHIPLENGTH!==''?tempBoat.attributes.SHIPLENGTH:'--' }}米</span>
        <span class="info_title">船宽</span>
        <span class="info_value">{{ tempBoat.attributes.SHIPBREADTH!==''?tempBoat.attributes.SHIPBREADTH:'--' }}米</span>
      </div>
      <div class="single-info">
        <span class="info_title">船首向</span>
        <span class="info_value">{{ tempBoat.attributes.DIRECTION!==''?tempBoat.attributes.DIRECTION:'--' }}度</span>
        <span class="info_title">船深</span>
        <span class="info_value">{{ tempBoat.attributes.SHIPDEPTH!==''?tempBoat.attributes.SHIPDEPTH:'--' }}米</span>
      </div>
      <div class="single-block">
        <span class="info_title">开始时间</span>
        <el-date-picker
            v-model="startTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd  HH:mm:ss"
            style="width: 70%"
        />
      </div>
      <div class="single-block">
        <span class="info_title">结束时间</span>
        <el-date-picker
            v-model="endTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd  HH:mm:ss"
            style="width: 70%"
        />
      </div>
      <div class="bottom-btn">
        <div class="btn single_button" style="margin-right: 60px" @click="showHistoryPath" >查看</div>
        <div v-show="playType==''" class="btn single_button" @click="playHistoryPath('start')">播放</div>
        <div v-show="playType=='start'" class="btn single_button" @click="playHistoryPath('pause')">暂停</div>
        <div v-show="playType=='pause'" class="btn single_button" @click="playHistoryPath('resume')">继续播放</div>
        <div v-show="playType !==''" class="btn single_button" @click="playHistoryPath('stop')">停止</div>
      </div>
      <!--      <div class="single_content">-->
      <!--        <button @click="selectSingleType" class="single_button">绘制视线</button>-->
      <!--      </div>-->
      <!--      <div class="single_content">-->
      <!--        <button @click="runPerspectiveArea" class="single_button">可视域分析</button>-->
      <!--      </div>-->
      <!--      <div class="single_content">-->
      <!--        <button @click="clearPerspectiveArea" class="single_button">清除</button>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import {createNamespacedHelpers} from "vuex";
import {getBoatRealTimePosition, getBoatToken, getSingleBoatRealTimePosition} from "@/service/show-platform";
import {playBoatHistory, setBoatGPS, setBoatHistory, setMapClick} from "@/units/map/AddLayer";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "boatSingleItem",
  components:{
    CommonMapToolTitle
  },
  computed:{
    ...mapState({
      boatChosenId:'boatChosenId'
    })
  },
  data(){
    return{
      allData:[],
      tempBoat:null,
      playType:'',
      startTime:null,
      endTime:null,
    }
  },
  methods:{
    close(){
      this.$emit('setToolDetailType','');
      this.playHistoryPath('stop')
      this.singleBoatAnalysis(true)
    },
    singleBoatAnalysis(show){
      if(show){
        this.allData = [];
        this.getSingleBoatData(1);
      }else{
        setBoatGPS(false)
      }
    },
    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)
                setMapClick('','')
              }
            }
          })
        }
      })
    },
    currentTime(type) {
      let date
      if(type =="current"){
        date = new Date();
      }else if(type =="before"){
        date = new Date(new Date().getTime() - 1 * 120 * 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
    },
    showHistoryPath(){
      getBoatToken().then(res =>{
        if(res.status =="success"){
          let token = res.data.token;
          let params = {
            "deviceId":this.tempBoat.id,
            "startTime":this.startTime,
            "endTime":this.endTime,
            "token":token
          }
          debugger
          getSingleBoatRealTimePosition(params).then(res =>{
            console.log(res)
            if(res.status == "success"){
              //setBoatHeatmap(true,res.Result.data)
              setBoatHistory(res.Result.data)
            }
          })
        }
      })
    },
    playHistoryPath(type){
      switch (type){
        case 'start':
          this.playType = 'start';
          break;
        case 'pause':
          this.playType = 'pause';
          break;
        case 'resume':
          this.playType = 'start';
          break;
        case 'stop':
          this.playType = '';
          break;
      }
      playBoatHistory(type)
    }
  },
  watch:{
    boatChosenId:{
      immediate:true,
      handler(val){
        this.tempBoat = val;
        this.startTime = this.currentTime("before");
        this.endTime =this.currentTime("current")
      }
    },
  }
}
</script>

<style scoped lang="scss">
#boat-single-item{
  position: absolute;
  z-index: 1;
  width: 320px;
  top: 89px;
  right: 120px;
  .main_content{
    .single-info{
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding-bottom: 10px;
      .info_title{
        color: #fff;
        width: 25%;
      }
      .info_value{
        color: #00d8ff;
        width: 25%;
      }
    }
    .single-block {
      flex-direction: row;
      justify-content: center;
      padding-bottom: 10px;
      .info_title{
        color: #fff;
        width: 25%;
        padding-right: 5%;
      }

    }

    .single_button{
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
</style>