<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>
      </template>
    </div>
    <div class="task-list-main">
      <!-- 常态任务 -->
      <NormalTask v-if="tabIndex === 0"></NormalTask>
      <!-- 定时任务 -->
      <TimedTask v-else-if="tabIndex === 1"></TimedTask>
      <!-- 周期任务 -->
      <PeriodTask v-else-if="tabIndex === 2"></PeriodTask>
    </div>
  </div>
</template>

<script>
import NormalTask from "./components/normalTask";
import TimedTask from "./components/timedTask";
import PeriodTask from "./components/periodTask";
import { mapState } from "vuex";

export default {
  name: "hangarTaskList",
  components: {
    NormalTask,
    TimedTask,
    PeriodTask,
  },
  data() {
    return {
      tabIndex: 0,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["useTimedTask"]),
  },
  watch: {
    useTimedTask() {
      if (!this.useTimedTask) {
        this.tabIndex = 0;
      }
    },
  },
  mounted() {},
  methods: {},
};
</script>

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

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

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