<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/hea.png" />
        <span class="dib f8">健康管理</span>
      </div>
      <!-- 机库信息 -->
      <slot name="hangar"></slot>
      <div
        class="control-item"
        :class="showMount ? 'active' : ''"
        @click="onSwitchShow('showMount')"
      >
        <SymbolIcon icon="guazai1" />
        <span class="dib f8">挂载</span>
      </div>
      <div
        class="control-item"
        :class="showControlList ? 'active' : ''"
        @click="onSwitchShow('showControlList')"
      >
        <SymbolIcon icon="wurenji2" />
        <span class="dib f8">无人机</span>
      </div>
      <div
        v-if="!isHangar && uav.network === 1"
        class="control-item"
        :class="showAlarmLamp ? 'active' : ''"
        @click="onSwitchShow('showAlarmLamp')"
      >
        <div>
          <svg
            width="22px"
            height="23px"
            viewBox="0 0 22 23"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <title>警示灯</title>
            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="1-视频1" transform="translate(-1875.000000, -375.000000)" fill-rule="nonzero">
                <g id="警示灯" transform="translate(1875.000000, 375.500000)">
                  <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="22" height="22" />
                  <path
                    d="M5,12.5 C5,9.18650001 7.6865,6.50000001 11,6.50000001 C14.3135,6.50000001 17,9.18650001 17,12.5 L17,20 L5,20 L5,12.5 Z"
                    id="路径"
                    fill="#FFFFFF"
                  />
                  <polygon
                    id="路径"
                    fill="#FFD500"
                    transform="translate(11.000000, 14.000000) rotate(-345.000000) translate(-11.000000, -14.000000) "
                    points="11 9 8 14.0049142 10.9820496 15.2536857 9.50006698 19 14 14.0049142 10.9820496 12.7561428"
                  />
                  <path
                    d="M3.99999999,12.5 C3.99999999,8.63400002 7.13399998,5.5 11,5.5 C14.866,5.5 18,8.63399999 18,12.5 L18,20 C18,20.5522848 17.5522847,21 17,21 L4.99999999,21 C4.44771526,21 3.99999999,20.5522848 3.99999999,20 L3.99999999,12.5 Z M11,7.49999999 C8.2385,7.49999999 6.00000001,9.73849998 6.00000001,12.5 L6.00000001,19 L16,19 L16,12.5 C16,9.73850001 13.7615,7.49999999 11,7.49999999 Z"
                    id="形状"
                    fill="#FFFFFF"
                  />
                  <path
                    d="M2.50000001,19 L19.5,19 C20.0522848,19 20.5,19.4477153 20.5,20 C20.5,20.5522847 20.0522848,21 19.5,21 L2.50000001,21 C1.94771526,21 1.50000001,20.5522847 1.50000001,20 C1.50000001,19.4477153 1.94771526,19 2.50000001,19 Z M12,2 L12,4 L12,4 L9.99999999,4 L9.99999999,2 C9.99999999,1.44771525 10.4477152,1 11,1 C11.5522847,1 12,1.44771525 12,2 Z M18.7070833,5.70708332 L17.293,7.1215 L17.293,7.1215 L15.8785,5.707 L17.2929167,4.29291667 C17.6834415,3.9024839 18.3165212,3.90252121 18.707,4.293 C19.0974788,4.6834788 19.0975161,5.31655851 18.7070833,5.70708332 Z M4.70708331,4.29291667 L6.12150001,5.707 L6.12150001,5.707 L4.70700001,7.1215 L3.29291668,5.70708332 C2.90248391,5.31655851 2.90252121,4.6834788 3.293,4.293 C3.68347879,3.90252121 4.3165585,3.9024839 4.70708331,4.29291667 Z"
                    id="形状"
                    fill="#FFFFFF"
                  />
                </g>
              </g>
            </g>
          </svg>
        </div>
        <span class="dib f8">警灯</span>
      </div>
      <div
        class="control-item"
        :class="showViewLib ? 'active' : ''"
        @click="onSwitchShow('showViewLib')"
      >
        <img src="../../assets/images/stk.png" alt />
        <span class="dib f8">视图库</span>
      </div>
      <ViewLib v-if="showViewLib"></ViewLib>
    </div>
    <ControlList
      @clearId="$emit('clearId')"
      @closeIconShow="iconShow = false"
      @exit="showControlList = false"
      v-if="showControlList"
    ></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.hardId"
      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: 3px;

    .control-item {
      box-sizing: border-box;
      width: 60px;
      height: 60px;
      background: rgba(9, 32, 87, 0.7);
      border: 1px solid transparent;
      color: #fff;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;

      > img {
        width: 28px;
      }

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

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