<template>
  <div class="control-right">
    <!-- 挂载-警灯-无人机  -->
    <div class="control-list" style="top: 13%">
      <div
        class="control-item"
        :class="showHealth ? 'active' : ''"
        @click="onSwitchShow('showHealth')"
      >
        <img src="./assets/images/health.svg" />
        <span class="">健康管理</span>
      </div>
      <!-- 机库信息 -->
      <slot name="hangar"></slot>
      <div
        class="control-item"
        :class="showMount ? 'active' : ''"
        @click="onSwitchShow('showMount')"
      >
        <img src="./assets/images/mount.svg" />
        <span class="">挂载</span>
      </div>
      <div
        class="control-item"
        :class="showControlList ? 'active' : ''"
        @click="onSwitchShow('showControlList')"
      >
        <img src="./assets/images/uav.svg" />
        <span class="">无人机</span>
      </div>
      <div
        v-if="!isHangar && uav.network === 2"
        class="control-item"
        :class="showAlarmLamp ? 'active' : ''"
        @click="onSwitchShow('showAlarmLamp')"
      >
        <img src="./assets/images/lamp.svg" />
        <span class="">警灯</span>
      </div>
      <div
        class="control-item"
        :class="showViewLib ? 'active' : ''"
        @click="onSwitchShow('showViewLib')"
      >
        <img src="./assets/images/files.svg" />
        <span class="">视图库</span>
      </div>
      <ViewLib v-if="showViewLib"></ViewLib>
    </div>
    <ControlList
      @clearId="$emit('clearId')"
      @closeIconShow="iconShow = false"
      @exit="showControlList = false"
      v-if="showControlList"
      :isHangar="isHangar"
    ></ControlList>
    <Health v-if="showHealth" @exit="showHealth = false"></Health>
    <Mount v-if="showMount"></Mount>
    <!-- 喊话器 -->
    <MMCGimbalP1
      class="PagerP1"
      v-show="showMMCGimbalP1"
      ref="MMCGimbalP1"
      @close="showMMCGimbalP1 = false"
    />
    <MountController
      @webscoketFn="(data) => fun(data)"
      v-if="uav && uav.deviceId"
      ref="MountControllerRef"
    />
    <AlarmLamp v-if="showAlarmLamp" :uav="uav" @close="showAlarmLamp = false" />
    <slot name="dialog"></slot>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { flightTaskAPI, Control_API } from "../../../../../../api";
import Health from "./components/health";
import ControlList from "./components/controlList";
import MountController from "./components/mountController";
import Mount from "./components/mount";
import MMCGimbalP1 from "./components/PagerP1";
import ViewLib from "./components/viewLib";
import AlarmLamp from "./components/alarmLamp";

export default {
  name: "ControlRight",
  components: {
    Health,
    ControlList,
    MountController,
    Mount,
    MMCGimbalP1,
    ViewLib,
    AlarmLamp,
  },
  props: {
    // 是否机库页面使用
    isHangar: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showAlarmLamp: false, //展示警示灯面板
      showHealth: false, //健康管理面板
      showMMCGimbalP1: false, //显示喊话器面板
      showMount: false, //展示挂载面板
      showControlList: false, //展示控制列表面板
      showViewLib: false, //展开视图库面板
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", ["uav", "airlineData"]),
  },
  methods: {
    hideAll(key) {
      let arr = [
        "showAlarmLamp",
        "showHealth",
        "showMMCGimbalP1",
        "showMount",
        "showControlList",
        "showViewLib",
      ];
      arr.forEach((key1) => {
        if (key !== key1) {
          this[key1] = false;
        }
      });
    },
    /**
     * 切换展示
     */
    onSwitchShow(key) {
      this.$emit("switchCallback");
      this.hideAll(key);
      this[key] = !this[key];
    },
  },
};
</script>

<style lang="scss" scoped>
.control-right {
  position: absolute;
  top: 70px;
  right: 30px;
  z-index: 1;

  .control-list::v-deep {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .control-item {
      width: 48px;
      height: 48px;
      background: #ffffff;
      border-radius: 2px;
      color: #000;
      font-size: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      box-sizing: border-box;

      > img {
        width: 24px;
      }

      &:hover {
        transform: scale(1.1);
      }

      &.active {
        border: 1px solid #3C3C3C;
      }
    }
  }
}
</style>