<template>
  <div id="fly-item" class="map-tool-model">
    <common-map-tool-title @close="close" title="飞行路线"/>
    <div class="main-content p20">
      <div class="my-block">

        <common-num-title title="输入路线名称" :num="1"/>
        <div>
          <el-input type="text" v-model="form.NAME" class="w100"></el-input>
        </div>
      </div>

      <div class="my-block">

        <common-num-title title="当前地图定位信息" :num="2"/>
        <div class="current-position">
          <div class="single-item">
            <span>X轴坐标：</span>
            <span>{{camera.position.x.toFixed(4)}}</span>
          </div>
          <div  class="single-item">
            <span>Y轴坐标：</span>
            <span>{{camera.position.y.toFixed(4)}}</span>
          </div>
          <div  class="single-item">
            <span>高度：</span>
            <span>{{camera.position.z.toFixed(4)}}</span>
          </div>
          <div  class="single-item">
            <span>视角：</span>
            <span>{{camera.tilt.toFixed(4)}}</span>
          </div>
          <div  class="single-item">
            <span>朝向：</span>
            <span>{{camera.heading.toFixed(4)}}</span>
          </div>
        </div>
      </div>

      <div class="my-block">
        <common-num-title title="飞行路线节点" :num="3">
          <span style="vertical-align: sub" @click="showDialog('add','')"><img src="../../../../../assets/imgs/mainPage/加号.png" alt="">
          </span>
        </common-num-title>
        <div class="content-body">
          <div class="event-content">
            <div class="other">
              <div v-for="item in form.LIST.slice(0,form.LIST.length -1)" :key="item.UUID">
                <div class="point"></div>
                <div class="time-k map-tool-model" v-if="">
                  <input type="text" v-model="item.FLY_TIME" class="w100">
                  <span class="unit">秒</span>
                </div>
              </div>
              <div v-for="item in form.LIST.slice(-1)" :key="item.UUID">
                <div class="point"></div>
                <div class="time-k map-tool-model" v-if="false">
                  <input type="text" v-model="item.FLY_TIME" class="w100">
                  <span class="unit">秒</span>
                </div>
              </div>
            </div>
            <div class="events">
              <div class="event-item" v-for="item in form.LIST" :key="item.UUID">
                <div class="top">
                  <span class="event-name">{{ item.NODE_NAME }}</span>
                  <span class="line-edit cur-point"  @click="showDialog('edit',item)"><img src="../../../../../assets/imgs/mainPage/飞行路线-编辑.png" alt=""></span>
                  <span class="cur-point" @click="deleteFlyItem(item.UUID)"><img src="../../../../../assets/imgs/mainPage/飞行路线-关闭.png" alt=""></span>

                </div>
                <div class="event-info">

                  <div class="info-right">
                    <div>停留时间：{{ item.STAY_TIME }}秒</div>
                    <div>
                      <span>X轴坐标：{{parseFloat(item.LOCATION_X).toFixed(2)}}</span>
                      <span>Y轴坐标：{{parseFloat(item.LOCATION_Y).toFixed(2)}}</span>
                    </div>
                    <div>
                      <span>高度：{{ parseFloat(item.LOCATION_Z).toFixed(2) }}</span>
                      <span>视角：{{ parseFloat(item.TILT).toFixed(2) }}</span>
                    </div>
                    <div>
                      <span>朝向：{{ parseFloat(item.HEADING).toFixed(2) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="bottom-btn">
      <div class="btn single_button" @click="saveFlyItem">保存</div>
      <div class="btn" @click="close">取消</div>
    </div>
    <el-dialog title="飞行路线" :visible.sync="dialogFormVisible" width="80%" top="8vh" :modal-append-to-body = 'false' :append-to-body="false" :center="true">
      <div class="p20 main">
        <div style="width: 100%">
          <div class="top-title">节点名称：</div>
          <div class="">
            <el-input type="text" v-model="singleNode.NODE_NAME"></el-input>
          </div>
        </div>
        <div>
          <div class="top-title">停留时间(秒)：</div>
          <div class="">
            <el-input type="text" v-model="singleNode.STAY_TIME"></el-input>
          </div>
        </div>
        <div>
          <div class="top-title">经度：</div>
          <div class="">
            <el-input v-model="tempCamera.x" disabled type="text"></el-input>
          </div>
        </div>
        <div>
          <div class="top-title">纬度：</div>
          <div class="">
            <el-input v-model="tempCamera.y" disabled type="text"></el-input>
          </div>
        </div>
        <div>
          <div class="top-title">高度：</div>
          <div class="">
            <el-input v-model="tempCamera.z" disabled type="text"></el-input>
          </div>
        </div>
        <div>
          <div class="top-title">视角：</div>
          <div class="">
            <el-input v-model="tempCamera.tilt"  disabled type="text"></el-input>
          </div>
        </div>
        <div>
          <div class="top-title">朝向：</div>
          <div class="">
            <el-input v-model="tempCamera.heading" disabled type="text"></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveNode">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonNumTitle from "@/components/common/CommonNumTitle";
import CommonMapToolTitle from "@/components/common/CommonMapToolTitle";
import {createNamespacedHelpers} from "vuex";
import {editFlyItem, getFlyWayList} from "@/service/show-platform";
import { nanoid } from 'nanoid'
import {importantAreaPosition} from "@/units/map/AddLayer";
import {
  CHANGE_FLY_WAY_REFRESH_ACTION
} from "@/view/show-platform/store/action-constant";
const {mapState,mapActions} = createNamespacedHelpers('platform')
export default {
  name: "FlyItem",
  components:{
    CommonNumTitle,CommonMapToolTitle
  },
  computed:{
    ...mapState({
      camera:'camera',
      currentFlyItemId:'currentFlyItemId',
      flyWayRefresh:'flyWayRefresh',
    }),
    tempCamera(){
      return {
        x:this.camera.position.x,
        y:this.camera.position.y,
        z:this.camera.position.z,
        tilt: this.camera.tilt,
        heading: this.camera.heading
      }
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      form: {
        UUID:'',
        NAME: '',
        LIST:[]
      },
      singleNode:{
        NODE_NAME:'',
        STAY_TIME:'',
      },
      formLabelWidth: '120px',
    }
  },
  methods:{
    getSingleItem(val){
      if(val==''){   //新增置空

      }else{
        getFlyWayList(val).then(res =>{     //修改赋值
          let data = res.msg[0].Rows[0];
          for(let i=0;i<data.LIST.length;i++){
            data.LIST[i].UUID = nanoid()
          }
          this.setSingleItem(data)
        })
      }
    },
    saveFlyItem(){
      for(let i=0;i<this.form.LIST.length;i++){
        this.form.LIST[i].SORT_RN = i+1
      }
      editFlyItem(this.form.UUID,this.form.NAME,'',this.form.LIST).then(res =>{
        if(res.msg[0].success =="true"){
          this[CHANGE_FLY_WAY_REFRESH_ACTION](!this.flyWayRefresh)
          this.close()
        }
      })
    },
    saveNode(){
      let type = 'add';
      let temp = {
        UUID:this.singleNode.UUID,
        NODE_NAME:this.singleNode.NODE_NAME,
        STAY_TIME:this.singleNode.STAY_TIME,
        HEADING:this.camera.heading,
        TILT:this.camera.tilt,
        LOCATION_X:this.camera.position.x,
        LOCATION_Y:this.camera.position.y,
        LOCATION_Z:this.camera.position.z,
      }
      for(let i=0;i<this.form.LIST.length;i++){
        if(this.form.LIST[i].UUID ===temp.UUID){
          type = 'edit'
          this.form.LIST[i] = temp;
        }
      }
      if(type==='add'){
        this.form.LIST.push(temp)
      }
      this.dialogFormVisible = false
    },
    deleteFlyItem(UUID){
      for(let i=0;i<this.form.LIST.length;i++){
        if(this.form.LIST[i].UUID ==UUID){
          this.form.LIST.splice(i,1)
        }
      }
    },
    setSingleItem(data,item){
      this.form = data
    },
    showDialog(type,item){
      if(type=='add'){
        this.singleNode.UUID = nanoid();
        this.singleNode.NODE_NAME = '';
        this.singleNode.STAY_TIME = '';
      }else{
        this.singleNode.UUID = item.UUID;
        this.singleNode.NODE_NAME = item.NODE_NAME;
        this.singleNode.STAY_TIME = item.STAY_TIME;
        importantAreaPosition(item.LOCATION_X,item.LOCATION_Y,item.LOCATION_Z,item.HEADING,item.TILT);
      }
      this.dialogFormVisible = true
    },
    close(){
      this.$emit('setToolDetailType','')
    },
    ...mapActions({
      [CHANGE_FLY_WAY_REFRESH_ACTION]:CHANGE_FLY_WAY_REFRESH_ACTION
    }),
  },
  watch:{
    currentFlyItemId:{
      immediate:true,
      handler(val){
        this.getSingleItem(val)
      }
    }
  }
}
</script>

<style scoped lang="scss">
#fly-item{
  ::v-deep{
    .el-input.is-disabled .el-input__inner{
      background-color: transparent;
    }
    .el-dialog{
      background-color: rgba(0, 31, 112, 0.8);
    }
    .el-dialog__title{
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
      color: #fff;
    }
    .el-dialog__wrapper{
      position: absolute !important;
    }
    .v-modal{
      position: absolute !important;
    }
  }
  .main-content{
    height: 600px;
  }
  .single_button{
    margin:0px 10px;
    cursor: pointer;
  }
  .current-position{
    display: flex;
    flex-wrap: wrap;
    .single-item{
      width: 45%;
      padding-left: 5%;
      >span:first-child{
        color: #fff;
      }
      >span:last-child{
        color: #9ACDFF;
        font-size: 14px;
      }
    }
  }
  .content-body{
    max-height:380px;
    overflow: auto;
  }
  .event-content{
    display: flex;
    padding-left: 30px;
    padding-top: 10px;
    .events{
      margin-left: 20px;
      width: 300px;
      .event-item{
        .event-info{
          color: rgba(255,255,255,0.5);
          margin-bottom: 20px;
          font-size: 14px;
          .info-right{
            >div{
              >span{
                display: inline-block;
                margin-left: 2%;
                width: 48%;
              }
            }
          }
        }
        .line-edit{
          margin: 0 4px;
        }
        .top{
          .event-name{
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }
          position: relative;
          top: -12px;
          .cur-point{
            vertical-align:middle;
          }
        }

      }
    }
    .other    {

      margin-left: 30px;

      //margin-top: 10px;
      display: flex;
      flex-direction: column;
      >div{
        margin-top: -1px;
        .point{
          position: absolute;
          margin-top: -6px;
          margin-right: -6px;
          top: 0px;
          right: 0px;
          width: 9px;

          height: 9px;
          border-radius: 50%;
          background-color: #fff;
          border: 2px solid #00aaff;
        }
        position: relative;
        .time-k{
          .unit{
            position: absolute;
            right: 0;
            height: 100%;
            line-height: 32px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            width: 30px;
            background: rgba(255,255,255,0.15);
          }
          input{
            height: 100%;
            border: none;
            background: transparent;
          }
          padding-right: 36px;
          box-sizing: border-box;
          position: absolute;
          height: 32px;
          width: 90px;
          top: 0;
          bottom: 0;
          left: -91px + 45px;
          margin: auto;

          background: rgba(0, 38, 115, 1);
        }
        width: 70px;
        box-sizing: border-box;
        &:not(:last-child) {
          border: 1px dashed rgba(255,255,255,0.6);
          border-right-style: solid;
        }
        border-right: 1px solid rgba(255,255,255,0.6);
        flex: 1;
      }

    }
  }

  .position-info{
    display: flex;
    flex-wrap: wrap;
    .item{
      line-height: 30px;
      .key{
        font-size: 16px;
        color: #fff;
      }
      .value{
        font-size: 14px;
        color: #9acdff;
      }
      width: 50%;
    }
  }
  position: absolute;
  z-index: 1;
  width: 510px;
  top: 89px;
  left: 578px;
  .main{
    .stay-time{
      position: relative;
      .stay-time-select{
        //text-align: left;

        position: absolute;
        //padding-left: 15px;
        width: 50px;
        right: 0;
        height: 100%;
        top: 0;
      }
    }
    display: flex;
    justify-content: space-between;
    >div{
      margin-bottom: 20px;
      input{
        width: 100%;
      }
      .top-title{
        margin-bottom: 10px;
        font-size: 16px;
        color: #fff;
      }

      width: 48%;
    }
    flex-wrap: wrap;
  }
  ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb{
    background-color: #028aab;
    border-radius: 3px;
  }
}
</style>
