<template>
  <div class="control-bottom">
    <div class="control-bottom-item" @click="onStartTask">
      <img src="./assets/images/start.svg" />
      <span class="dib">一键任务</span>
    </div>
    <div class="control-bottom-item" @click="onReturnFlight">
      <img src="./assets/images/return.svg" />
      <span class="dib">一键返航</span>
    </div>
    <div class="control-bottom-item" @click="onLand" v-if="isHangar">
      <img src="./assets/images/end.svg" />
      <span class="dib">紧急迫降</span>
    </div>
    <div class="control-bottom-item" @click="onTaskEnd" v-else>
      <img src="./assets/images/end.svg" />
      <span class="dib">任务结束</span>
    </div>
    <template v-if="uav.network === 2">
      <div v-if="controlType === 0" class="control-bottom-item" @click="onModeManual">
        <img src="./assets/images/auto.svg" />
        <span class="dib">自动</span>
      </div>
      <div v-else-if="controlType === 1"
        :class="manualControlStatus ? 'active control-bottom-item' : 'control-bottom-item'" @click="onModeKeyboard">
        <img :src="require(`./assets/images/${manualControlStatus ? 'manual' : 'manual1'}.svg`)" />
        <span class="dib">摇杆 </span>
      </div>
      <div v-else-if="controlType === 2" class="control-bottom-item" @click="onModeAuto">
        <img src="../../assets/images/keyboard.png" alt />
        <span class="dib">键盘</span>
      </div>
    </template>

    <template v-else>
      <div v-if="controlType === 0" class="control-bottom-item" @click="onModeManual">
        <SymbolIcon icon="zidong" />
        <span class="dib">自动</span>
      </div>
      <div v-if="controlType === 1" class="control-bottom-item" @click="onModeAuto">
        <SymbolIcon icon="shoudong" />
        <span class="dib">手动</span>
      </div>
    </template>
    <!-- 键盘控制 -->
    <KeyControl v-if="controlType === 2" @close="onModeAuto"></KeyControl>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { flightTaskAPI, Control_API } from "../../../../../../api";
import KeyControl from "./components/keyControl";
import joystick from "../../../../../../mixins/joystick";

export default {
  name: "ControlBottom",
  mixins: [joystick],
  components: {
    KeyControl,
  },
  inject: ["bus"],
  props: {
    // 是否是机库组件
    isHangar: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 摇杆手动控制状态
      manualControlStatus: false,
      controlType: 0, //控制类型, 0: 自动 1: 摇杆 2: 键盘
    };
  },
  watch: {
    // 状态改变时摇杆会切换为手动模式
    "onModeManualState": {
      handler(val) {
        if (val) {
          this.onModeManual()
        }
      }
    },
    "manualControlStatus": {
      handler(val) {
        if (val) {
          this.$message.success("手动模式已开启");
        }
        this.$store.commit("MMCFlightControlCenter/joystick/setState", {
          key: "manualControlStatus",
          value: val,
        });
      },
    },
    immediate: true,
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uav", ["uav", "airlineData"]),
    ...mapState("MMCFlightControlCenter/joystick", ["onModeManualState"]),
  },
  methods: {
    /**
     * 接管判断, 机库模块中不需要判断接管
     */
    async isTakeOver() {
      if (this.isHangar) {
        return await this.$store.dispatch(
          "MMCFlightControlCenter/hangar/isTakeOver"
        );
      } else {
        return await this.$store.dispatch(
          "MMCFlightControlCenter/uav/isTakeOver"
        );
      }
    },
    // 一键任务
    onStartTask() {
      this.bus.$emit("startTask");
    },
    // 一键返航
    async onReturnFlight() {
      // 判断是否已接管
      if (!(await this.isTakeOver())) {
        this.$message.warning("请先接管设备");
        return;
      }
      this.$confirm("请确认是否进行一键返航操作?", "安全确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        customClass: "uav_controlPane",
        showClose: false,
      }).then((res) => {
        this.$store.dispatch("MMCFlightControlCenter/uav/returnFlight", {
          callback: (isOk) => {
            isOk && this.$message.success("发出返航指令成功");
          },
        });
      });
    },
    // 任务结束
    async onTaskEnd() {
      // 判断是否已接管
      if (!(await this.isTakeOver())) {
        this.$message.warning("请先接管设备");
        return;
      }
      this.$confirm("请确认是否进行任务结束操作?", "安全确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        customClass: "uav_controlPane",
        showClose: false,
      }).then((res) => {
        this.$store.dispatch("MMCFlightControlCenter/uav/takeEnd", {
          callback: (isOk) => {
            isOk && this.$message.success("发出任务结束指令成功");
          },
        });
      });
    },
    // 紧急降落
    async onLand() {
      // 判断是否已接管
      if (!(await this.isTakeOver())) {
        this.$message.warning("请先接管设备");
        return;
      }
      this.$confirm("请确认是否进行紧急降落操作?", "安全确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        customClass: "uav_controlPane",
        showClose: false,
      }).then((res) => {
        this.$store.dispatch("MMCFlightControlCenter/uav/land", {
          callback: (isOk) => {
            isOk && this.$message.success("发出紧急降落指令成功");
          },
        });
      });
    },
    /**
     * 手动模式
     */
    async onModeManual() {
      // 判断是否已接管
      if (!(await this.isTakeOver())) {
        this.$message.warning("请先接管设备");
        return;
      }

      this.$message.success("切换手动模式中请稍后!");
      this.$store.dispatch("MMCFlightControlCenter/uav/modeManual", {
        callback: (isOk) => {
          if (isOk) { }
          isOk && (this.controlType = 1);
        },
      });
      // 打开软件
      let a = document.createElement("a");
      a.href = "JoystickTools://";
      a.click();
      setTimeout(() => {
        this.initJoystick();
      }, 5000);
    },

    /**
     * 自动模式
     */
    async onModeAuto() {
      // 判断是否已接管
      if (!(await this.isTakeOver())) {
        this.$message.warning("请先接管设备");
        return;
      }
      this.$store.dispatch("MMCFlightControlCenter/uav/modeAuto", {
        callback: (isOk) => {
          isOk && (this.controlType = 0);
        },
      });
      this.closeJoystick();
    },
    /**
     * 键盘模式
     */
    async onModeKeyboard() {
      // 判断是否已接管
      if (!(await this.isTakeOver())) {
        this.$message.warning("请先接管设备");
        return;
      }
      this.controlType = 2;
    },
    /**
     * 键盘控制
     */
    clickControl() { },
    /**
     * 停止键盘控制
     */
    cancelControl() { },
  },
};
</script>

<style lang="scss" scoped>
.control-bottom {
  position: absolute;
  left: 50%;
  bottom: 150px;
  transform: translate(-50%, 0);
  display: flex;
  gap: 34px;
  z-index: 1;

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

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

  .active {
    background-color: #0cc81f;
  }
}

.key-control {
  position: fixed;
  right: 100px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  height: 120px;
  background: rgba(32, 32, 30, 0.8);
  border-radius: 10px;
  padding: 8px;

  .head {
    width: 360px;
    color: #fff;
    text-indent: 16px;
    line-height: 32px;
    display: flex;
  }

  .content {
    display: flex;
    align-items: center;

    >div {
      flex-direction: column;
      display: flex;
      align-items: center;

      >div {
        display: flex;

        div {
          background: #333;
          width: 32px;
          height: 32px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
          color: #ffffff;
          font-style: normal;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .active {
          background: #ead91b;
        }
      }
    }

    .line {
      width: 1px;
      height: 60px;
      border: 1px solid;
      border-image: linear-gradient(180deg,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)) 1 1;
    }
  }
}
</style>