<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 } from "vuex";
import mount from "../../../../../../../../../MMCMount";
// 所有的挂载组件
const mountComponents = {};
mount.list.forEach((item) => {
  mountComponents[item.name] = item.component;
});

export default {
  name: "MountsPanel",
  components: {
    ...mountComponents,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    uavMountsPayload: {
      type: Array,
      default: () => [],
    },
    keyFlag: {
      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?.warningLevel === "NORMAL";
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onSelectMount(item) {
      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>
