<template>
  <div class="mountBox">
    <div v-if="mountList.length > 0" class="list">
      <div class="mount-item pr mt6" v-for="(item, index) in mountList" :key="index">
        <div class="icon-box" @click="fn(item)">
          <img class="cp dib w30 h30" :src="item.icon" />
        </div>
      </div>
    </div>
    <template v-if="selected_mount">
      <!-- fixed -->
      <component
        v-if="modeFlag"
        v-show="flag"
        :ref="mode_mount.name"
        :payload_data="payload_data"
        :moveType="moveType"
        :selected_mount="mode_mount"
        :device="uav"
        :is="mode_mount.component"
        :title="mode_mount.title"
        @directive="handle_directivev2"
        @controlMode="controlMode"
        :taskId="taskId"
        @take_photo="take_photo"
        @record="record"
        @playAudio="playAudio"
        @showCenter="showCenter"
        @close="mode_mount = null"
        :PoliceKeyCode="this.uav.hardId"
        :payload="
  mode_mount && uavMountsPayload
    ? uavMountsPayload[mode_mount.name]
    : []
        "
      />
      <component
        :keyFlag="keyFlag"
        :payload_data="payload_data"
        :uavMounts="mountList"
        :moveType="moveType"
        :selected_mount="selected_mount"
        :device="uav"
        :is="selected_mount.component"
        :title="selected_mount.title"
        ref="mmcmount"
        @directive="handle_directive"
        @controlMode="controlMode"
        @controlCenter="controlCenter"
        @controlOther="controlOther"
        @controlStop="controlStop"
        :taskId="taskId"
        @take_photo="take_photo"
        @record="record"
        @playAudio="playAudio"
        @showCenter="showCenter"
        @close="selected_mount = null"
        :PoliceKeyCode="this.uav.hardId"
        :payload="
  selected_mount && uavMountsPayload
    ? uavMountsPayload[selected_mount.name]
    : []
        "
      />
    </template>
  </div>
</template>
<script>
// import API from "@/api";
import { mapState } from "vuex";
export default {
  name: "MountsPanel",
  props: {
    uavMountsPayload: {
      type: Array,
      default: () => []
    },
    keyFlag:{
      type:Boolean,
      default: () => false
    }
  },
  data() {
    return {
      selected_mount: {},
      moveType: "wrj",
      payload_data:null,
      modeFlag:false,
      mode_mount:{},
      flag: false
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uavApplications", [
      "uav",
      "airlineData",
      "mountList",
      "airlineId"
    ]),
    taskId(){
      return this.airlineId;
    }
  },
  created() {
    this.tips = "正在识别使用中的挂载....";
  },
  mounted(){
  },
  beforeDestroy() {
    this.$store.commit("device/SET_MOVE_DATA", {});
  },
  methods: {
    //联控模式start
    controlMode(mode){
      this.modeFlag = mode
      this.mountList.forEach(val=>{
        if(val.title != this.selected_mount.title && val.name.includes("Z")){
          console.log(val);
          this.mode_mount = val
        }
      })
    },
    controlCenter(val){
      this.$refs[this.mode_mount.name].handle_change_ptz_mode(val)
    },
    controlOther(type){
      this.$refs[this.mode_mount.name].fangxiang(type)
    },
    controlStop(){
      this.$refs[this.mode_mount.name].stopfxFn()
    },
    //联控模式end
    fn(item) {
      this.selected_mount = item;
      console.log(this.selected_mount,"selected_mount");
      this.$store.commit("fckernel/SET_SELECT_MOUNT", item);
    },
    handle_directive(buffer) {
      let { selected_mount } = this;
      if (selected_mount) {
        if (this.uav.network !== 1) {
          this.$emit(
            "fn",
            {
              type: 514,
              data: {
                mountId: selected_mount.mountId,
                payload: buffer
              }
            },
            "wrj"
          );
        } else {
          let buff = buffer.join(",");
          let data = {
            type: 200,
            systemCode: "mmc",
            state: 1, //0 地面站（无人机），1 客户端或者web ，2 HTTP接口
            username: this.user_info.username,
            height: 0,
            idlingTime: 0,
            data: {
              cmdControlType: 7000, //520
              cmdFunction: null,
              cmdState: null,
              cmdValue: null,
              cmdBuffer: buff,
              cmdName: this.selected_mount.name
            },
            deviceHardId: this.uav.hardId
          };
          this.$emit("fun", data);
        }
      }
    },
    handle_directivev2(buffer) {
      let { mode_mount } = this;
      if (mode_mount) {
        if (this.uav.network !== 1) {
          this.$emit(
            "fn",
            {
              type: 514,
              data: {
                mountId: mode_mount.mountId,
                payload: buffer
              }
            },
            "wrj"
          );
        } else {
          let buff = buffer.join(",");
          let data = {
            type: 200,
            systemCode: "mmc",
            state: 1, //0 地面站（无人机），1 客户端或者web ，2 HTTP接口
            username: this.user_info.username,
            height: 0,
            idlingTime: 0,
            data: {
              cmdControlType: 7000, //520
              cmdFunction: null,
              cmdState: null,
              cmdValue: null,
              cmdBuffer: buff,
              cmdName: this.mode_mount.name
            },
            deviceHardId: this.uav.hardId
          };
          this.$emit("fun", data);
        }
      }
    },
    showCenter(val){
      this.$emit("showCenter",val)
    },
    async playAudio(val){
      if(this.taskId){
        let typeId = val
        let dataRun = {
          taskId: this.taskId,
          typeId: typeId,
          deviceId: this.uav.id
        }
        // let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun)
      }else{
        // console.log(val);
      }
    },

    async take_photo(data){
      // if(!this.taskId || this.taskId == "") return this.$message.error("暂无任务！")
      if(data.data){
        // data.data.data.taskID = this.taskId
        console.log(data,"photo拍照");
        this.$emit("fn",data)  
        this.$message.success("拍照成功！") 
      }
      if(this.taskId){
        let dataRun = {
          taskId: this.taskId,
          typeId: 2,
          deviceId: this.uav.id
        }
        // let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun)
      }
    },
    async record(data){
      // if(!this.taskId  || this.taskId == "") return this.$message.error("暂无任务！")
      // if(data.data){
      //   data.data.data.taskID = this.taskId
      // }
      if(data.data.data.recordControl || data.data.data.status){
        this.$message.success("开始录像！")
        if(this.taskId){
          let dataRun = {
          taskId: this.taskId,
          typeId: 25,
          deviceId: this.uav.id
        }
        // let run = await API.FCKERNEL.saveDeviceRunMonitorLog(dataRun)
        }
      }else{
        this.$message.success("停止录像！")
      }
        console.log(data,"record录像");
      this.$emit("fn",data)
     }
  },
  
  
};
</script>
<style scoped lang="scss">
.mountBox {
  background: rgba(9, 32, 87, 0.7);
  border: 1px solid #70daf9;
  position: absolute;
  // top: -152px;
  top: 63px;
  right: 65px;
  width: 142px;
  height: 48px;

  .list {
    display: flex;
    justify-content: space-around;

    .mount-item {
      width: 30px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #70daf9;
    }
  }
}
</style>
