<template>
  <div class="task-list">
    <div class="task-list-header">
      <div
        class="task-list-header__item"
        :class="{active: tabIndex === 0}"
        @click="tabIndex = 0"
      >常态飞行</div>
      <div
        class="task-list-header__item"
        :class="{active: tabIndex === 1}"
        @click="tabIndex = 1"
      >定时飞行</div>
      <div
        class="task-list-header__item"
        :class="{active: tabIndex === 2}"
        @click="tabIndex = 2"
      >周期飞行</div>
    </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';

export default {
  name: "hangarTaskList",
  components: {
    NormalTask,
    TimedTask,
    PeriodTask
  },
  data() {
    return {
      tabIndex: 0,
    };
  },
  mounted(){

  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
.task-list {
  width: 416px;
  height: 254px;
  background: rgba(9, 32, 87, 0.7);
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;

  .task-list-header {
    border-radius: 10px 10px 0 0;
    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;

      &.active {
        box-shadow: inset 0 0 10px 2px #3f9dff;
        font-size: 20px;
        font-family: YouSheBiaoTiHei;
        color: #14faff;
        line-height: 32px;
        text-shadow: 0 1px 1px rgba(2, 32, 56, 0.2);
        background: linear-gradient(
          135deg,
          #e3aa77,
          #f5cda9 38%,
          #f9ecd3 58%,
          #fcdbb1 79%,
          #edb07a
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

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