<template>
  <ControlRight
    ref="controlRight"
    isHangar
    @switchCallback="showHangar = false; showMonitor = false;"
  >
    <div
      slot="hangar"
      class="control-item"
      :class="showHangar ? 'active' : ''"
      @click="onSwitchShow('showHangar')"
    >
      <!-- <img src="../../assets/images/hea.png" /> -->
      <SymbolIcon icon="yingchao2" />
      <span class="dib f8">机库</span>
    </div>
    <div slot="dialog">
      <div class="hangar-ctrl" v-if="showHangar">
        <div class="hangar-ctrl-header">
          <span class="hangar-ctrl-header__title">
            <img
              class="hangar-ctrl-header__icon"
              src="../../../../../../assets/images/mount_head.png"
            />操作区域
          </span>
          <span class="hangar-ctrl-header__close" @click="showHangar = false;">关闭</span>
        </div>
        <div class="hangar-ctrl-list">
          <div
            class="hangar-ctrl-item"
            v-for="(item, i) in ctrlList"
            :key="i"
            @click="onClickCMD(i)"
          >
            <SymbolIcon v-if="item.icon" :icon="item.icon" class="hangar-ctrl-item__icon" />
            <img v-else :src="item.img" class="hangar-ctrl-item__icon" />
            <div class="hangar-ctrl-item__title">{{item.label}}</div>
          </div>
        </div>
      </div>
      <Logger
        class="logger"
        @exit="showLogger = false"
        v-if="showLogger"
      ></Logger>
      <HangarMonitor
        :uavMsg="uavRealTimeData.msg"
        :weatherStation="hangarRealTimeData.weatherStation"
        :hangarData="hangarRealTimeData"
        v-if="showMonitor"
      ></HangarMonitor>
    </div>
  </ControlRight>
</template>

<script>
import ControlRight from "../../../../../uavApplications/components/controlPanel/components/controlRight";
import { mapActions, mapState } from "vuex";
import svgFXJJ from "./assets/images/fxjj.svg";
import Logger from "./components/logger";
import HangarMonitor from "./components/hangarMonitor";

export default {
  name: "HangarControlRight",
  components: {
    ControlRight,
    Logger,
    HangarMonitor,
  },
  data() {
    return {
      showHangar: false, // 显示机库列表
      ctrlList: [
        {
          icon: "chucang1",
          label: "出舱",
          key: "out",
        },
        {
          icon: "rucang1",
          label: "入舱",
          key: "in",
        },
        {
          icon: "kaishichongdian",
          label: "开始充电",
          key: "chargeStart",
        },
        {
          icon: "jieshuchongdian",
          label: "结束充电",
          key: "chargeEnd",
        },
        {
          icon: "yure",
          label: "预热",
          key: "warmUp",
        },
        {
          icon: "xiumian",
          label: "休眠",
          key: "dormancy",
        },
        {
          icon: "yunhangrizhi2",
          label: "运行日志",
          key: "switchLogger",
          noConfirm: true,
        },
        {
          icon: "tuichuliucheng",
          label: "退出流程",
          key: "processExit",
        },
        {
          icon: "guiji",
          label: "运行监测",
          key: "switchMonitor",
          noConfirm: true,
        },
        {
          img: svgFXJJ,
          label: "飞行解禁",
          key: "",
        },
      ],
      showLogger: true, // 显示日志
      showMonitor: false, // 显示机库监测
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData"]),
    ...mapState("MMCFlightControlCenter/hangar", ["hangarRealTimeData"]),
  },
  methods: {
    ...mapActions("MMCFlightControlCenter/hangar", [
      "out",
      "in",
      "chargeStart",
      "chargeEnd",
      "warmUp",
      "dormancy",
      "processExit",
    ]),
    /**
     * 切换展示
     */
    onSwitchShow(key) {
      this.$refs.controlRight.hideAll(key);
      this[key] = !this[key];
      this.showMonitor = false;
    },
    /**
     * 命令点击事件
     * @param {number} i this.ctrlList被点击元素的索引
     */
    async onClickCMD(i) {
      let item = this.ctrlList[i];
      let label = item.label;
      let key = item.key;
      let noConfirm = item.noConfirm;
      try {
        if (noConfirm) {
          this[key]();
        } else {
          await this.$confirm(`请确认是否进行${label}操作?`, "安全确认", {
            cancelButtonText: "取消",
            confirmButtonText: "确定",
            customClass: "uav_controlPane",
            showClose: false,
          });

          this[key]({
            callback: () => {
              this.$message.success(label + "指令发送成功");
            },
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    switchLogger() {
      this.showLogger = !this.showLogger;
    },
    switchMonitor() {
      this.showMonitor = !this.showMonitor;
      if (this.showMonitor) {
        this.showHangar = false;
      }
    },
    
  },
};
</script>

<style lang="scss" scoped>
.hangar-ctrl {
  width: 416px;
  min-height: 100px;
  background: rgba(9, 32, 87, 0.7);
  position: absolute;
  right: 71px;
  top: 50px;
  bottom: auto !important;
  width: 416px;
  border-radius: 10px;

  .hangar-ctrl-header {
    display: flex;
    justify-content: space-between;
    height: 32px;
    background: linear-gradient(
      180deg,
      #9198ff,
      rgba(45, 81, 153, 0.45) 40%,
      #05091a
    );
    box-shadow: inset 0 0 10px 2px #3f9dff;
    border-radius: 10px 10px 0 0;
    border: 1px solid #427dff;

    .hangar-ctrl-header__title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      color: #14faff;
      line-height: 26px;
      text-shadow: 0 1px 1px rgba(2, 32, 56, 0.2);
      background: linear-gradient(
        135deg,
        #e3aa77,
        #f5cda9 38%,
        #f9ecd3 58%,
        #fcdbb1 79%,
        #edb07a
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hangar-ctrl-header__close {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #d2dfff;
      margin-right: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
  .hangar-ctrl-list {
    box-sizing: border-box;
    justify-content: center;
    padding: 10px 0px;
    display: flex;
    width: 100%;
    gap: 15px;
    flex-wrap: wrap;

    .hangar-ctrl-item {
      width: 48px;
      height: 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 5px;
      background-image: linear-gradient(
        179deg,
        #1773b6,
        #3484c3 36%,
        #2a7abd 56%,
        #084681
      );
      box-shadow: 0 0 5px 0 #0c1c47;
      border-radius: 4.5px;
      cursor: pointer;

      .hangar-ctrl-item__icon {
        width: 28px;
        height: 28px;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        color: #fff;
      }

      .hangar-ctrl-item__title {
        font-size: 10px;
        color: #fff;
      }
    }
  }
}

.logger {
  position: absolute;
  left: -1200px;
}
</style>