<template>
  <div class="control-bottom">
    <div class="control-bottom-item" @click="onStartTask">
      <SymbolIcon icon="yijianrenwu" />
      <span class="dib f8">一键任务</span>
    </div>
    <!--  v-show="iconShow" -->
    <div class="control-bottom-item" @click="onReturnFlight">
      <SymbolIcon icon="yijianfanhang2" />
      <span class="dib f8">一键返航</span>
    </div>
    <!--     v-show="iconShow" -->
    <div class="control-bottom-item" @click="onTaskEnd">
      <SymbolIcon icon="renwujieshu1" />
      <span class="dib f8">任务结束</span>
    </div>
    <template v-if="uav.network === 1">
      <div v-if="controlType === 0" class="control-bottom-item" @click="onModeManual">
        <SymbolIcon icon="zidong" />
        <span class="dib f12">自动</span>
      </div>
      <div v-else-if="controlType === 1" class="control-bottom-item" @click="onModeKeyboard">
        <SymbolIcon icon="shoudong" />
        <span class="dib f12">摇杆</span>
      </div>
      <div v-else-if="controlType === 2" class="control-bottom-item" @click="onModeAuto">
        <img src="../../assets/images/键盘.png" alt />
        <span class="dib f12">键盘</span>
      </div>
    </template>

    <!-- device.isPush =99 代表大疆 -->
    <template v-else>
      <div v-if="controlType === 0" class="control-bottom-item" @click="onModeManual">
        <SymbolIcon icon="zidong" />
        <span class="dib f8">自动</span>
      </div>
      <div v-if="controlType === 1" class="control-bottom-item" @click="onModeAuto">
        <SymbolIcon icon="shoudong" />
        <span class="dib f8">手动</span>
      </div>
      
    </template>
    <!-- 键盘控制 -->
    <div class="key-control" v-if="controlType === 2">
      <div class="head">
        <div class="w200">机身控制</div>
        <div>云台控制</div>
      </div>
      <div class="content">
        <div>
          <div>
            <div
              :class="{active: keycode == 'q'}"
              title="机身左转"
              @mousedown="clickControl({key:'q'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/share.png" alt />
              Q
            </div>
            <div
              :class="{active: keycode == 'w'}"
              title="前进"
              @mousedown="clickControl({key:'w'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/share2.png" alt />
              W
            </div>
            <div
              :class="{active: keycode == 'e'}"
              title="机身右转"
              @mousedown="clickControl({key:'e'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/share3.png" alt />
              E
            </div>
            <div
              class="ml12"
              :class="{active: keycode == 'c'}"
              title="上升"
              @mousedown="clickControl({key:'c'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/share7.png" alt />
              C
            </div>
          </div>
          <div class="mt16">
            <div
              :class="{active: keycode == 'a'}"
              title="左飞"
              @mousedown="clickControl({key:'a'})"
              @mouseup="cancelControl"
            >
              A
              <img src="../../assets/images/share4.png" alt />
            </div>
            <div
              :class="{active: keycode == 's'}"
              title="后退"
              @mousedown="clickControl({key:'s'})"
              @mouseup="cancelControl"
            >
              S
              <img src="../../assets/images/share5.png" alt />
            </div>
            <div
              :class="{active: keycode == 'd'}"
              title="右飞"
              @mousedown="clickControl({key:'d'})"
              @mouseup="cancelControl"
            >
              D
              <img src="../../assets/images/share6.png" alt />
            </div>
            <div
              class="ml12"
              :class="{active: keycode == 'z'}"
              title="下降"
              @mousedown="clickControl({key:'z'})"
              @mouseup="cancelControl"
            >
              Z
              <img src="../../assets/images/share8.png" alt />
            </div>
          </div>
        </div>
        <div class="ml12">
          <div>
            <div :class="{active: keycode == 'j'}" title="急停" @click="clickControl({key:'j'})">J</div>
          </div>
        </div>
        <div class="line ml12"></div>
        <div class="ml12">
          <div>
            <div
              :class="{active: keycode == 'ArrowUp'}"
              title="镜头向上"
              @mousedown="clickControl({key:'ArrowUp'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/向上.png" alt />
            </div>
          </div>
          <div>
            <div
              :class="{active: keycode == 'ArrowLeft'}"
              title="镜头向左"
              @mousedown="clickControl({key:'ArrowLeft'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/向左.png" alt />
            </div>
            <div
              :class="{active: keycode == 'ArrowDown'}"
              title="镜头向下"
              @mousedown="clickControl({key:'ArrowDown'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/向下.png" alt />
            </div>
            <div
              :class="{active: keycode == 'ArrowRight'}"
              title="镜头向右"
              @mousedown="clickControl({key:'ArrowRight'})"
              @mouseup="cancelControl"
            >
              <img src="../../assets/images/向右.png" alt />
            </div>
          </div>
        </div>
        <div class="ml12">
          <div>
            <div
              class="f24"
              :class="{active: keycode == '-'}"
              title="变焦减小"
              @mousedown="clickControl({key:'-'})"
              @mouseup="cancelControl"
            >-</div>
          </div>
          <div class="mt16">
            <div
              class="f24"
              :class="{active: keycode == '+' || keycode == '='}"
              title="变焦增加"
              @mousedown="clickControl({key:'+'})"
              @mouseup="cancelControl"
            >+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { flightTaskAPI, Control_API } from "../../../../../../api";

export default {
  name: "ControlBottom",
  inject:['bus'],
  data() {
    return {
      controlType: 0, //控制类型, 0: 自动 1: 摇杆 2: 键盘
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/uavApplications", [
      "uav",
      "airlineData",
    ]),
  },
  methods: {
    // 无人机接管更新状态
    async updateTakeOver() {
      await Control_API.updateTakeOver(this.uav.id);
    },
    // 一键任务
    onStartTask() {
      this.bus.$emit('startTask');
    },
    fly_control_unlock(key) {
      const seed = Date.now();
      this.$store.commit("MMCFlightControlCenter/uavApplications/setState", {
        key,
        value: seed,
      });
    },
    // 一键返航
    onReturnFlight() {
      this.$confirm("请确认是否进行一键返航操作?", "安全确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        customClass: "uav_controlPane",
        showClose: false,
      }).then((res) => {
        this.updateTakeOver();

        this.$store.dispatch(
          "MMCFlightControlCenter/uavApplications/returnFlight",
          {
            callback: (isOk) => {
              isOk && this.$message.success("发出返航指令成功");
            },
          }
        );
      });
    },
    // 任务结束
    onTaskEnd() {
      this.$confirm("请确认是否进行任务结束操作?", "安全确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        customClass: "uav_controlPane",
        showClose: false,
      }).then((res) => {
        this.updateTakeOver();

        this.$store.dispatch("MMCFlightControlCenter/uavApplications/takeEnd", {
          callback: (isOk) => {
            isOk && this.$message.success("发出任务结束指令成功");
          },
        });
      });
    },
    /**
     * 手动模式
     */
    onModeManual() {
      this.$store.dispatch(
        "MMCFlightControlCenter/uavApplications/modeManual",
        {
          callback: (isOk) => {
            isOk && (this.controlType = 1);
          },
        }
      );
    },
    /**
     * 自动模式
     */
    onModeAuto() {
      this.$store.dispatch(
        "MMCFlightControlCenter/uavApplications/modeAuto",
        {
          callback: (isOk) => {
            isOk && (this.controlType = 0);
          },
        }
      );
    },
    /**
     * 键盘模式
     */
    onModeKeyboard(){
      this.$store.dispatch(
        "MMCFlightControlCenter/uavApplications/modeKeyboard",
        {
          callback: (isOk) => {
            isOk && (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;

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

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

.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>