<template>
  <div class="task-list">
    <div class="task-list-header">
      <div
        class="task-list-header__item"
        :class="{ active: tabIndex === 0 && useTimedTask }"
        @click="tabIndex = 0"
      >
        <label>常态飞行</label>
      </div>
      <template v-if="useTimedTask">
        <div
          class="task-list-header__item"
          :class="{ active: tabIndex === 1 }"
          @click="tabIndex = 1"
        >
          <label>定时飞行</label>
        </div>
        <div
          class="task-list-header__item"
          :class="{ active: tabIndex === 2 }"
          @click="tabIndex = 2"
        >
          <label>周期飞行</label>
        </div>
        <div
          v-if="isLeapFrogFligh"
          class="task-list-header__item"
          :class="{ active: tabIndex === 3 }"
          @click="tabIndex = 3"
        >
          <label>蛙跳飞行</label>
        </div>
      </template>
    </div>
    <div class="task-list-main">
      <!-- 常态任务 -->
      <NormalTask v-if="tabIndex === 0"></NormalTask>
      <!-- 定时任务 --><!-- 周期任务 -->
      <TimedTask
        v-else-if="tabIndex === 1 || tabIndex === 2"
        :type="tabIndex"
      ></TimedTask>
      <!-- 蛙跳飞行 -->
      <leapFrogFligh v-else></leapFrogFligh>
    </div>
  </div>
</template>

<script>
import NormalTask from "./components/normalTask";
import TimedTask from "./components/timedTask";
import leapFrogFligh from "./components/leapFrogFligh";

import { mapState } from "vuex";

export default {
  name: "hangarTaskList",
  components: {
    NormalTask,
    TimedTask,
    leapFrogFligh,
  },
  data() {
    return {
      tabIndex: 0,
      isLeapFrogFligh: false,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["useTimedTask"]),
  },
  watch: {
    useTimedTask() {
      if (!this.useTimedTask) {
        this.tabIndex = 0;
      }
    },
  },
  created() {
    let tmjData = JSON.parse(localStorage.getItem("tmj"));
    if (tmjData) {
      const userList = this.handleGetMenuList(tmjData.user.menuList);
      // 获取蛙跳权限
      let leapFrogFlighFlag = userList.find((item) => item.id == 3096);
      if (leapFrogFlighFlag) {
        this.isLeapFrogFligh = true;
      }
    }
  },
  mounted() {},
  methods: {
    handleGetMenuList(menuList) {
      const collector = [];

      const flattenMenu = (items) => {
        items.forEach((item) => {
          if (item.children && item.children.length > 0) {
            flattenMenu(item.children);
          } else {
            collector.push(item);
          }
        });
      };

      flattenMenu(menuList);
      return collector;
    },
  },
};
</script>

<style lang="scss" scoped>
.task-list {
  width: 352px;
  height: 254px;
  background: #222222;
  border-radius: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;

  .task-list-header {
    background: #3c3c3c;
    border-radius: 10px 10px 0px 0px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    overflow: hidden;

    .task-list-header__item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: YouSheBiaoTiHei;
      font-size: 16px;
      color: #fff;
      cursor: pointer;

      * {
        cursor: pointer;
      }

      &.active {
        background: #3388ff;
        label {
          font-family: YouSheBiaoTiHei;
          font-size: 20px;
          color: #14faff;
          line-height: 26px;
          text-shadow: 0px 1px 1px rgba(2, 32, 56, 0.2);
          text-align: left;
          font-style: normal;
          background-image: -webkit-linear-gradient(
            right,
            #e3aa77,
            #f5cda9,
            #f9ecd3,
            #fcdbb1,
            #edb07a
          );
          line-height: 32px;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }

  .task-list-main {
    flex: 1;
    // overflow: hidden;
  }
}
</style>