<template>
  <div class="mountBox">
    <div class="main" v-if="show">
      <div v-if="mountList.length > 0" class="list">
        <div class="mount-item pr mt6" :class="{
          active:
            (selectMount && selectMount.gimbalName) === item.gimbalName,
        }" v-for="(item, index) in mountList" :key="index">
          <div class="icon-box" @click="onSelectMount(item)">
            <img class :src="item.icon" />
          </div>
        </div>
      </div>
    </div>
    <template v-if="selectMount">
      <component :is="selectMount.gimbalName" v-if="selectMount" class="mount-panel" :keyFlag="nxNormal"
        :payload_data="selectMountPayload" @directive="mountDirective" @take_photo="mountTakePhoto"
        @record="mountRecord" @close="mountClose" />
    </template>
  </div>
</template>
<script>
// import API from "@/api";
import { mapState, mapGetters, mapActions } from "vuex";
import mount from "../../../../../../../../../MMCMount";
// 所有的挂载组件
const mountComponents = {};
mount.list.forEach((item) => {
  mountComponents[item.name] = item.component;
});

export default {
  name: "MountsPanel",
  components: {
    ...mountComponents,
  },
  props: {
    // 是否机库页面使用
    isHangar: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: false,
    },
    uavMountsPayload: {
      type: Array,
      default: () => [],
    },
    keyFlag: {
      type: Boolean,
      default: () => false,
    },
    isHangar: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", [
      "uav",
      "mountList",
      "airlineId",
      "selectMount",
      "uavRealTimeData",
      "isQingLiu",
    ]),
    ...mapGetters("MMCFlightControlCenter/uav", ["selectMountPayload"]),
    nxNormal() {
      return this.uavRealTimeData?.healthData?.NX?.code === "0x2110000";
    },
  },
  created() { },
  mounted() { },
  beforeDestroy() { },
  methods: {
    ...mapActions("MMCFlightControlCenter/uav", ["isTakeOver"]),
    isTakeOverHangar() {
      return this.$store.dispatch("MMCFlightControlCenter/hangar/isTakeOver");
    },
    async isTake() {
      // 判断是否已接管
      let isTakeOver = this.isTakeOver;
      if (this.isHangar) {
        isTakeOver = this.isTakeOverHangar;
      }
      if (!(await isTakeOver())) {
        this.$message.warning("请先接管设备");
        return false;
      }
      return true;
    },
    async onSelectMount(item) {
      if (await this.isTake()) {
        this.$store.commit("MMCFlightControlCenter/uav/setState", {
          key: "selectMount",
          value: item,
        });
      }
    },
    /**
     * 挂载指令事件
     */
    mountDirective(buffer) {
      console.log("挂载指令事件", buffer);
      this.$store.dispatch("MMCFlightControlCenter/uav/mountDirective", {
        buffer,
        mountId: this.selectMount.mountId,
        callback: () => {
          // this.$message.success('操作完成');
        },
      });
    },
    /**
     * 挂载拍照
     */
    mountTakePhoto(name) {
      console.log("挂载拍照", name);
      this.$store.dispatch("MMCFlightControlCenter/uav/takePhotos", {
        isQingLiu: this.isQingLiu,
        videoID: 1, // 视频通道ID（需保持唯一）
        callback: (isOk) => {
          isOk && this.$message.success(`拍照完成`);
        },
      });
    },
    /**
     * 挂载录像
     */
    mountRecord(streamData) {
      console.log("挂载录像", streamData);
      let recordControl =
        streamData.data.data.status ||
        streamData.data.data.recordControl ||
        false;
      this.$store.dispatch("MMCFlightControlCenter/uav/videoTranscribe", {
        recordControl: recordControl,
        callback: () => {
          if (recordControl) {
            this.$message.success(`录像开始`);
          } else {
            this.$message.success(`录像结束`);
          }
        },
      });
    },
    /**
     * 挂载窗口关闭
     */
    mountClose() {
      this.$store.commit("MMCFlightControlCenter/uav/setState", {
        key: "selectMount",
        value: null,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.mountBox {
  position: absolute;
  // top: -152px;
  top: 63px;
  right: 65px;

  .main {
    background: #222222;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    min-width: 142px;
    height: 48px;
    padding: 0 5px;
  }

  .list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    gap: 5px;

    .mount-item {
      flex-shrink: 0;
      width: 30px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #70daf9;
      cursor: pointer;

      .icon-box {
        img {
          width: 30px;
          height: 30px;
        }
      }
    }
  }

  .mount-panel {
    position: absolute;
    top: 50px;
    right: 0;
  }
}
</style>
