<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">状态</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">{{item.time}}</div>
        <div class="row__column" 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="showTaskAdd = false"></TaskAdd>
  </div>
</template>

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

export default {
  name: "hangarTimedTask",
  components: {
    TaskAdd,
  },
  inject: ["rootNode", "bus"],
  data() {
    return {
      showTaskAdd: false,
      taskListAll: []
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
    ...mapState("MMCFlightControlCenter/hangar", [
      "hangarRealTimeData",
      "hangar",
      "taskList",
    ]),
  },
  created() {
    this.rootNode.$emit("hangarTaskTabChange", {
      type: 2,
    });
    this.updateTaskList();
    //todo 通过iframe嵌入时, 不知道为什么无法监听this.$store.state.MMCFlightControlCenter.hangar.taskList的变化, 会导致任务列表不更新, 通过事件方式强制更新
    this.bus.$on("updateHangarTaskList", this.updateTaskList);
  },
  beforeDestroy() {
    this.clearAirwayEntities();
    this.bus.$off("updateHangarTaskList", this.updateTaskList);
  },
  methods: {
    ...mapActions("MMCFlightControlCenter", [
      "createAirwayEntities",
      "clearAirwayEntities",
    ]),
    /**
     * 更新任务列表
     */
    updateTaskList() {
      console.log("updateTaskList");
      this.taskListAll = [
        ...(this.$store.state.MMCFlightControlCenter.hangar.taskList.timed ||
          []),
      ];
    },
    /**
     * 将任务中航线对象补充完整
     */
    async getAirway(item) {
      if (!item.airway) {
        let res = await AirLine.routeDetail({
          id: item?.airwayId,
        });
        if (res.code === 200) {
          item.airway = res.data;
        }
      }
    },
    /**
     * 显示或隐藏航线
     */
    async onSwitchAirway(item) {
      await this.getAirway(item);
      let find = this.airwayEntities.find(
        (item1) => item1.airwayId === item.airwayId
      );
      if (find) {
        this.clearAirwayEntities({ id: find.airwayId });
      } else {
        let airway = JSON.parse(item.airway.content);
        this.createAirwayEntities({
          polyline: airway.content,
          id: item.airwayId,
        });
      }
    },
    async onDelAirway(item) {
      try {
        await this.$confirm("请确认是否删除该任务?", "安全确认", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          customClass: "uav_controlPane",
          showClose: false,
        });
        this.rootNode.$emit("hangarTaskDel", {
          task: item,
          type: 2, // 1: 日常任务 2: 定时任务 3:周期任务
        });
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</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;
      }
    }
  }

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

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

    .task-add__btn {
      width: 122px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      margin: 0 auto;
      margin-bottom: 10px;
      background-image: linear-gradient(
        180deg,
        #9198ff,
        rgba(45, 81, 153, 0.22) 40%,
        #05091a
      );
      border: 1px solid #70daf9;
      box-shadow: inset 0 0 10px 2px #3f9dff;
      cursor: pointer;
      color: #fff;
    }
  }
}
</style>