<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/hangar.svg" />
      <span class="dib">机库</span>
    </div>
    <div slot="dialog">
      <div class="hangar-ctrl dialog1027" v-if="showHangar">
        <div class="dialog-header">
          <img class="dialog-header__icon" src="../../../../../../assets/images/mount_head.png" />
          <span class="dialog-header__title">操作区域</span>
          <span class="dialog-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", ["showAirwayEdit", "flyLogStatus"]),
    ...mapState("MMCFlightControlCenter/uav", ["uavRealTimeData"]),
    ...mapState("MMCFlightControlCenter/hangar", ["hangarRealTimeData"]),
  },
  watch: {
    flyLogStatus: {
      handler(val) {
          if (val) {
            this.showLogger = false
          } else {
            this.showLogger = true
          }
      },
      immediate: true,
    },
    // 打开航线编辑时关闭所有窗口
    showAirwayEdit(newVal) {
      if (newVal) {
        this.showHangar = false;
        this.showLogger = false;
        this.showMonitor = false;
      }
    },
  },
  methods: {
    ...mapActions("MMCFlightControlCenter/hangar", [
      "hangar",
      "isTakeOver",
      "out",
      "in",
      "chargeStart",
      "chargeEnd",
      "warmUp",
      "dormancy",
      "processExit",
    ]),
    /**
     * 切换展示
     */
    async onSwitchShow(key) {
      if (!await this.isTakeOver()) {
        this.$message.warning("请先接管设备");
        return;
      }
      this.$refs.controlRight.hideAll(key);
      this[key] = !this[key];
      this.showMonitor = false;
    },
    /**
     * 命令点击事件
     * @param {number} i this.ctrlList被点击元素的索引
     */
    async onClickCMD(i) {
      if (!await this.isTakeOver()) {
        this.$message.warning("请先接管设备");
        return;
      }
      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;
  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;

    .hangar-ctrl-header__title {}

    .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;
    padding: 8px 16px 14px;
    display: flex;
    width: 100%;
    gap: 28px;
    flex-wrap: wrap;

    .hangar-ctrl-item {
      width: 54px;
      height: 54px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #3e3e3e;
      border-radius: 4.5px;
      cursor: pointer;
      gap: 3px;

      .hangar-ctrl-item__icon {
        width: 22px;
        height: 22px;
        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>