<template>
  <div class="control-right">
    <!-- 挂载-警灯-无人机  -->
    <div class="control-list" style="top: 13%">
      <div class="control-item" :class="showHealth ? 'active' : ''" @click="onSwitchShow('showHealth')">
        <img :class="{ active: showHealth }" src="./assets/images/health.svg" />
        <span class="">{{ $t('common.健康管理') }}</span>
      </div>
      <!-- 机库信息 -->
      <slot name="hangar"></slot>
      <div class="control-item" :class="showMount ? 'active' : ''" @click="onSwitchShow('showMount')">
        <img :class="{ active: showMount }" src="./assets/images/mount.svg" />
        <span class="">{{ $t('common.挂载') }}</span>
      </div>
      <div class="control-item" :class="showControlList ? 'active' : ''" @click="onSwitchShow('showControlList')">
        <img :class="{ active: showControlList }" src="./assets/images/uav.svg" />
        <span class="">{{ $t('common.无人机') }}</span>
      </div>
      <div v-if="!isHangar && uav.network === 2" class="control-item" :class="showAlarmLamp ? 'active' : ''"
        @click="onSwitchShow('showAlarmLamp')">
        <img :class="{ active: showAlarmLamp }" src="./assets/images/lamp.svg" />
        <span class="">{{ $t('common.警灯') }}</span>
      </div>
      <div class="control-item" :class="showViewLib ? 'active' : ''" @click="onSwitchShow('showViewLib')">
        <img :class="{ active: showViewLib }" src="./assets/images/files.svg" />
        <span class="">{{ $t('common.视图库') }}</span>
      </div>
      <ViewLib v-if="showViewLib"></ViewLib>
    </div>
    <ControlList @clearId="$emit('clearId')" @closeIconShow="iconShow = false" @exit="showControlList = false"
      :show="showControlList" :isHangar="isHangar"></ControlList>
    <Health v-if="showHealth" @exit="showHealth = false"></Health>
    <Mount v-if="showMount" :isHangar="isHangar" :show="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", ["showAirwayEdit"]),
    ...mapState("MMCFlightControlCenter/uav", ["uav", "airlineData", 'uavRealTimeData']),
  },
  watch: {
    // 打开航线编辑时关闭所有窗口
    showAirwayEdit(newVal) {
      if (newVal) {
        this.showAlarmLamp = false;
        this.showHealth = false;
        this.showMMCGimbalP1 = false;
        this.showMount = false;
        this.showControlList = false;
        this.showViewLib = false;
      }
    }
  },
  methods: {
    network() {
      let { uavRealTimeData } = this;
      let name = null;
      if (uavRealTimeData && uavRealTimeData.link) {
        for (let i = 0; i < uavRealTimeData.link.length; i++) {
          const k = uavRealTimeData.link[i];
          if (k.priority == 2 && k.using) {
            return this.$t('common.专网');
          } else if (k.priority == 3 && k.using) {
            return this.$t('common.公网');
          } else if (k.priority == 1 && k.using) {
            return this.$t('common.图传');
          }
        }
      }
      return name || this.$t('common.离线');
    },
    /**
 * 接管判断, 机库模块中不需要判断接管
 */
    async isTakeOver() {
      if (this.isHangar) {
        return await this.$store.dispatch(
          "MMCFlightControlCenter/hangar/isTakeOver"
        );
      } else {
        return await this.$store.dispatch(
          "MMCFlightControlCenter/uav/isTakeOver"
        );
      }
    },
    hideAll(key) {
      let arr = [
        "showAlarmLamp",
        "showHealth",
        "showMMCGimbalP1",
        "showMount",
        "showControlList",
        "showViewLib",
      ];
      arr.forEach((key1) => {
        if (key !== key1) {
          this[key1] = false;
        }
      });
    },
    /**
     * 切换展示
     */
    async onSwitchShow(key) {
      // 判断是否已接管
      if (!(await this.isTakeOver() )&& key != 'showViewLib') {
        this.$message.warning(this.$t('common.请先接管设备'));
        return;
      }
      let networkType = this.network()
      if (key == 'showHealth' && networkType == this.$t('common.离线') && key != 'showViewLib') {
        return this.$message.info(this.$t('common.无人机不在线'));
      }
      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;
      overflow: hidden;
      text-align: center;

      >img {
        width: 24px;
      }

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

      &.active {
        border: 1px solid #3C3C3C;
        color: #3388ff;
      }

      .active {
        filter: drop-shadow(#3388ff 100px 0);
        transform: translateX(-100px);
      }
    }
  }
}
</style>