<template>
  <div id="fly-way">
    <div class="fly_title">
      <span class="fly_title_name">飞行路线</span>
      <i class="el-icon-circle-plus-outline"  @click="chooseSingle('')"></i>
    </div>
    <ul>
      <li v-for="item in flyList" class="fly_item" :key="item.UUID">
        <span class="fly_name" :title="item.NAME" @click="showFlyWay(item)">{{item.NAME}}</span>
        <i class="el-icon-edit fly_icon" @click="chooseSingle(item)"></i>
        <i class="el-icon-delete fly_icon" @click="deleteSingle(item.UUID)"></i>
      </li>
    </ul>
  </div>
</template>

<script>

import {deleteFlyItem, getFlyWayList} from "@/service/show-platform";
import {SetViewGoto} from "@/units/map/AddLayer";
import {createNamespacedHelpers} from "vuex";
import {
  CHANGE_CURRENT_FLY_ITEM_ID_ACTION
} from "@/view/show-platform/store/action-constant";
import {nanoid} from "nanoid";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "FlyWay",
  computed:{
    ...mapState({
      currentFlyItemId:'currentFlyItemId',
      flyWayRefresh:'flyWayRefresh'
    }),
  },
  data(){
    return{
      flyList:[
      ]
    }
  },
  mounted() {
   this.origionData()
  },
  methods:{
    origionData(){
      getFlyWayList('').then(res =>{
        let data = res.msg[0].Rows;
        this.getFlyWayList(data)
      })
    },
    getFlyWayList(data){
      for(let i=0;i<data.length;i++){
        data[i].status = false;
      }
      this.flyList = data
    },
    chooseSingle(item){
      this.$emit('setToolDetailType','flyItem')
      if(item !==''){
        this[CHANGE_CURRENT_FLY_ITEM_ID_ACTION](item.UUID)
      }else{
        this[CHANGE_CURRENT_FLY_ITEM_ID_ACTION]('')
      }

    },
    showFlyWay(item){
      for(let i=0;i<this.flyList.length;i++){
        if(item.UUID ===this.flyList[i].UUID){
          this.flyList[i].status =  !this.flyList[i].status;
          this.getFlyItem(this.flyList[i].status,this.flyList[i].UUID)
        }else{
          this.flyList[i].status = false;
        }
      }
    },
    getFlyItem(state,UUID){
      let pointArr = [];
      getFlyWayList(UUID).then(res =>{     //修改赋值
        let data = res.msg[0].Rows[0];
        for(let i=0;i<data.LIST.length;i++){
          let temp = {
            camera:{
              heading:parseFloat(data.LIST[i].HEADING),
              tilt:parseFloat(data.LIST[i].TILT),
              position:{
                x:parseFloat(data.LIST[i].LOCATION_X),
                y:parseFloat(data.LIST[i].LOCATION_Y),
                z:parseFloat(data.LIST[i].LOCATION_Z)
              }
            },
            time:parseFloat(data.LIST[i].FLY_TIME) * 1000,
            stayTime:parseFloat(data.LIST[i].STAY_TIME) * 1000,
          }
          pointArr.push(temp)
        }
        SetViewGoto(state,pointArr)
      })
    },
    deleteSingle(UUID){
      deleteFlyItem(UUID).then(res =>{
        if(res.msg[0].success =="true"){
          this.origionData()
        }
      })
    },
    ...mapActions({
      [CHANGE_CURRENT_FLY_ITEM_ID_ACTION]:CHANGE_CURRENT_FLY_ITEM_ID_ACTION
    }),
  },
  watch:{
    flyWayRefresh:{
      handler(){
        this.origionData()
      }
    }
  }
}
</script>

<style scoped lang="scss">
#fly-way{
  position: absolute;
  right:90px;
  top:120px;
  z-index: 1;
  text-align: center;
  min-width: 200px;
  background: rgba(0, 31, 112, 0.6);
  border-radius: 4px;
  border: 1px solid #00a1ff;
  color: #fff;
  .fly_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-radius: 4px;
    border-bottom: 1px solid rgba(0, 170, 255, 0.4);
    .fly_title_name{
      width: 120px;
      text-align: left;
    }
  }
  >ul{
    list-style-type: none;
    padding: 0px;
    margin:0px 24px;
    .fly_item{
      display: flex;
      padding: 12px 0px;
      .fly_name{
        width: 140px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .fly_icon{
        padding-left: 24px;
      }
    }

  }
}
</style>
