<template>
  <div class="timed-task">
    <div class="timed-task-header">
      <div class="header__column flex2">名称</div>
      <div class="header__column flex2">时间</div>
      <div class="header__column status">状态</div>
      <div class="header__column flex2">操作</div>
    </div>
    <div class="timed-task-main">
      <div class="row" v-for="item in taskListAll" :key="item.id">
        <div class="row__column flex2">
          <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
            <span>{{item.name}}</span>
          </el-tooltip>
        </div>
        <div class="row__column flex2">
          <el-tooltip
            class="item"
            effect="dark"
            :content="`${item.taskStartTime}至${item.taskEndTime}`"
            placement="top-start"
          >
            <span>{{`${item.taskStartTime}至${item.taskEndTime}`}}</span>
          </el-tooltip>
        </div>
        <div class="row__column status" style="color: rgb(255, 189, 54);">{{item.status}}</div>
        <div class="row__column flex2 ctrl">
          <el-tooltip content="查看" placement="top">
            <span
              class="icon-chakan1 iconfont icon"
              style="color: #ffffff; font-size: 10px;"
              @click="onSwitchAirway(item)"
            ></span>
          </el-tooltip>
          <!--   <el-tooltip content="历史" placement="top">
            <img class="icon" style="width: 15px;" src="../../assets/images/history.png" />
          </el-tooltip>-->
          <!--    <el-tooltip content="禁用" v-if="!item.enable" placement="top">
            <img class="icon" style="width: 18px;" src="../../assets/images/enable.png" />
          </el-tooltip>
          <el-tooltip content="启用" v-if="item.enable" placement="top">
            <img class="icon" style="width: 15px;" src="../../assets/images/able.png" />
          </el-tooltip>-->
          <el-tooltip content="删除" placement="top">
            <span class="icon-shanchu iconfont icon" @click="onDelAirway(item)"></span>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="task-add-btn">
      <div class="task-add__btn" @click="showTaskAdd = true">创建周期任务</div>
    </div>

    <TaskAdd v-if="showTaskAdd" @close="onTaskAddClose" @addDone="onAddDone"></TaskAdd>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { AirLine } from "../../../../../../../../../../api";
import TaskAdd from "./components/taskAdd";

export default {
  name: "hangarPeriodTask",
  components: {
    TaskAdd,
  },
  inject: ["rootNode", "bus"],
  data() {
    return {
      showTaskAdd: false,
      taskListAll: [],
      timeHandle: null,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
    ...mapState("MMCFlightControlCenter/hangar", [
      "hangarRealTimeData",
      "hangar",
    ]),
  },
  watch: {
  },
  created() {
    this.rootNode.$emit("hangarTaskTabChange", {
      type: 3,
    });
    this.getTaskList();
    this.timeHandle = setInterval(() => {
      this.getTaskList();
    }, 5000);
  },
  beforeDestroy() {
    this.clearAirwayEntities();
    clearInterval(this.timeHandle);
  },
  methods: {
    ...mapActions("MMCFlightControlCenter", [
      "createAirwayEntities",
      "clearAirwayEntities",
    ]),
    /**
     * 更新任务列表
     */
    getTaskList() {
      console.log("getTaskList", this.taskListAll);
      this.rootNode.$emit("taskListGet", {
        pageNo: 1,
        taskStatus: 11,//筛选掉审核未通过的
        pageSize: 100,
        type: 3, // 1: 日常任务 2: 定时任务 3:周期任务
        hangar: this.hangar,
        callback: (res) => {
          this.taskListAll = res.records || [];
        },
      });
    },
    /**
     * 显示或隐藏航线
     */
    async onSwitchAirway(item) {
      this.rootNode.$emit("airwayGet", {
        airwayId: item.airwayId,
        callback: (airway) => {
          let find = this.airwayEntities.find(
            (item1) => item1.airwayId === airway.id
          );
          if (find) {
            this.clearAirwayEntities({ id: airway.id });
          } else {
            this.createAirwayEntities({
              polyline: airway.content,
              id: airway.id,
            });
          }
        },
      });
    },
    async onDelAirway(item) {
      try {
        if (item.loading) {
          return;
        }
        await this.$confirm("请确认是否删除该任务?", "安全确认", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          customClass: "uav_controlPane",
          showClose: false,
        });
        item.loading = true;
        this.rootNode.$emit("taskDel", {
          task: item,
          type: 3, // 1: 日常任务 2: 定时任务 3:周期任务
          callback: () => {
            this.getTaskList();
          },
        });
      } catch (e) {
        console.log(e);
      }
    },
    onTaskAddClose() {
      this.showTaskAdd = false;
    },
    onAddDone() {
      this.getTaskList();
    },
  },
};
</script>

<style lang="scss" scoped>
.timed-task {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 5px 10px 5px;
  gap: 8px;
  box-sizing: border-box;

  .timed-task-header {
    display: flex;
    flex-shrink: 0;
    font-family: MicrosoftYaHei-Bold;
    font-size: 14px;
    color: #b5e5ff;
    padding: 5px 0;
    letter-spacing: 0;
    font-weight: 700;
    background: rgba(87, 96, 138, 0.2);
    border: 1px solid rgba(207, 234, 255, 0.33);
    gap: 3px;

    .header__column {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      &.flex2 {
        flex: 2;
      }

      &.status {
        flex: initial;
        width: 70px;
      }
    }
  }

  .timed-task-main {
    color: #fff;
    overflow-y: auto;
    flex: 1;

    .row {
      display: flex;
      color: #fff;
      background: url("../../assets/images/listBg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 33px;
      line-height: 33px;
      padding-left: 4px;
      margin-bottom: 16px;
      gap: 3px;

      .row__column {
        flex: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.flex2 {
          flex: 2;
        }

        &.ctrl {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 5px;

          .icon {
            cursor: pointer;

            &.loading {
              opacity: 0.5;
            }
          }
        }

        &.status {
          flex: initial;
          width: 70px;
        }
      }
    }
  }

  .task-add-btn {
    text-align: center;

    .task-add__btn {
      width: 124px;
      height: 36px;
      background: #3388ff;
      border-radius: 2px;
      text-align: center;
      line-height: 32px;
      margin: 0 auto;
      margin-bottom: 10px;
      cursor: pointer;
      color: #fff;
    }
  }
}
</style>