<template>
  <div class="cpt-observe-mspace-dashboard-control">
    <div class="control-inner">
      <div
        v-for="item in list"
        :key="item.id"
        class="fn-box"
        @click="handeClick(item)"
      >
        <div class="icon-box">
          <SymbolIcon :icon="item.icon" />
        </div>
        <div class="text-box">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import SymbolIcon from "@/components/observe/fckernel/common/symbol-icon";
import methods from "./methods";
export default {
  components: { SymbolIcon },
  props: {
    uavcontrol: {
      type: Object,
      default: () => ({}),
    },
    flag: {
      type: Boolean,
      default: () => ({}),
    },
  },
  data() {
    return {
      jhFlag: false,
      list: [
        {
          id: 1,
          label: "激活无人机",
          icon: "jiesuowurenji",
          data: { data: 1, type: 527 },
        }, //x85 使用
        {
          id: 2,
          label: "一键起飞",
          icon: "yijianqifei",
          data: { data: 0, type: 522 },
        },
        {
          id: 3,
          label: "暂停航线",
          icon: "zantingfeihang",
          data: { type: 523 },
        },
        { id: 4, label: "继续航线", icon: "jixuhangxian", data: { type: 524 } },
        { id: 5, label: "结束任务", icon: "yijianqifei", data: { type: 525 } },
        {
          id: 6,
          label: "一键返航",
          icon: "yijianfanhang",
          data: { type: 517 },
        },
        {
          id: 7,
          label: "安全降落",
          icon: "anquanjiangla",
          data: { type: 516 },
        },
      ],
    };
  },
  inject: ["uav_This"],
  methods: {
    ...methods,
    handeClick(item) {
      let { id } = this.$store.state.task.controlPanelData;
      let deviceHardId = this.uavcontrol.deviceHardId;
      if (id == undefined) return this.$message.warning("请选择任务");
      switch (item.id) {
        case 1:
          return this.jhwrj(item, { deviceHardId, id });
        case 2:
          return this.yjqf(item, { deviceHardId, id });
        case 3:
          return this.stop(item, { deviceHardId, id });
        case 4:
          return this.continue(item, { deviceHardId, id });
        case 5:
          return this.end(item, { deviceHardId, id });
        case 6:
          return this.yjfh(item, { deviceHardId, id });
        case 7:
          return this.aqjl(item, { deviceHardId, id });
        default:
          console.log(11);
      }
 
    },
  },
};
</script>

<style lang="scss" scoped>
.cpt-observe-mspace-dashboard-control {
  width: 300px;

  .control-inner {
    display: flex;
    flex-wrap: wrap;
    height: 100%;

    .fn-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      width: 25%;
      height: 35%;
      box-sizing: border-box;

      &:last-child {
        margin-right: 0px;
      }

      .icon-box {
        .iconfont {
          font-size: 28px;
          color: #08ffff;
        }
      }

      .text-box {
        font-family: MicrosoftYaHei;
        font-size: 10px;
        color: #ebf5ff;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        margin-top: 4px;
      }
    }
  }
}
</style>