<template>
  <div class="mountBox">
    <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>
    <template v-if="selectMount">
      <component
        :is="selectMount.gimbalName"
        v-if="selectMount"
        class="mount-panel"
        @directive="mountDirective"
        @take_photo="mountTakePhoto"
        @close="mountClose"
      />
    </template>
  </div>
</template>
<script>
// import API from "@/api";
import { mapState } from "vuex";
import mount from "../../../../../../../mount";
// 所有的挂载组件
const mountComponents = {};
mount.list.forEach((item) => {
  mountComponents[item.name] = item.component;
});

export default {
  name: "MountsPanel",
  components: {
    ...mountComponents,
  },
  props: {
    uavMountsPayload: {
      type: Array,
      default: () => [],
    },
    keyFlag: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {};
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", [
      "uav",
      "mountList",
      "airlineId",
      "selectMount",
    ]),
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onSelectMount(item) {
      this.$store.commit("MMCFlightControlCenter/uav/setState", {
        key: "selectMount",
        value: item,
      });
    },
    /**
     * 挂载指令事件
     */
    mountDirective(buffer) {
      this.$store.dispatch(
        "MMCFlightControlCenter/uav/mountDirective",
        {
          buffer,
          mountId: this.selectMount.mountId,
        }
      );
    },
    /**
     * 挂载拍照
     */
    mountTakePhoto(name) {
      console.log("挂载拍照 ", name);
    },
    /**
     * 挂载窗口关闭
     */
    mountClose() {
      this.$store.commit("MMCFlightControlCenter/uav/setState", {
        key: "selectMount",
        value: null,
      });
    },
  },
};
</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;
  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;
        }
      }
    }
  }
}
</style>
