<template>
  <div class="stl-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" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="row" :class="{ single: i % 2 != 0 }" v-for="(item, i) in taskListAll" :key="item.id">
        <div class="row__column flex2">
          <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
            <span class="f12">{{ item.name }}</span>
          </el-tooltip>
        </div>
        <div class="row__column flex2 col-2">
          <el-tooltip class="item" effect="dark" placement="top-start">
            <template #content>
              <div>
                {{ item.taskStartTime }}
                <div v-if="type == 2 &&item.taskEndTime != '/'">
                  {{ item.taskEndTime }}
                </div>
              </div>
            </template>
            <div v-if="type == 2" class="f9">
              <div v-if="item.taskStartTime == '/'">
                /
              </div>
              <div v-else>
                <div>
                  {{ item.taskStartTime }}
                </div>
                {{ item.taskEndTime }}
              </div>
            </div>

            <span class="f9" v-else>{{ item.taskStartTime }}</span>
          </el-tooltip>
        </div>
        <div class="row__column status" style="color: rgb(255, 189, 54)">
          <el-tooltip class="item" effect="dark" :content="item.status" placement="top-start">
            <span class="f12">{{ item.status }}</span>
          </el-tooltip>
        </div>
        <div class="row__column flex2 ctrl">
          <el-tooltip content="查看" placement="top">
            <i class="el-icon-position" style @click="onSwitchAirway(item, true)"></i>
          </el-tooltip>
          <el-tooltip content="计划安排" placement="top">
            <i class="el-icon-date" @click="onOpenPlan(item)"></i>
          </el-tooltip>
          <el-tooltip content="编辑" placement="top" v>
            <i class="el-icon-edit" @click="onOpenEdit(item)" v-if="item.status !== '执行中' && item.status !== '已完成'"></i>
          </el-tooltip>
          <!-- <el-tooltip content="开关" placement="top">
            <i class="el-icon-turn-off"></i>
          </el-tooltip> -->
          <el-tooltip content="删除" placement="top">
            <i v-if="item.status !== '执行中' && item.status !== '已完成'" class="el-icon-delete"
              @click="onDelAirway(item)"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!-- <div class="task-add-btn">
      <div class="task-add__btn" @click="showFlightPlan = true">创建定时任务</div>
    </div>-->

    <FlightPlan v-if="showFlightPlan" :taskId="selectedTask.id" :taskList="taskListAll" @close="showFlightPlan = false">
    </FlightPlan>
    <FlightEdit v-if="showFlightEdit" :task="selectedTask" @close="showFlightEdit = false"></FlightEdit>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { AirLine } from "../../../../../../../../../../api";
import FlightPlan from "./components/flightPlan";
import FlightEdit from "./components/flightEdit";

export default {
  name: "hangarTimedTask",
  components: {
    FlightPlan,
    FlightEdit,
  },
  inject: ["rootNode", "bus"],
  props: {
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showFlightPlan: false,
      showFlightEdit: false,
      taskListAll: [],
      timeHandle: null,
      selectedTask: null, //选中的任务
      loading: false,
      executeFlightRouteId: null,
      airwayId: null,
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter", ["airwayEntities"]),
    ...mapState("MMCFlightControlCenter/hangar", [
      "hangarRealTimeData",
      "hangar",
      "taskList",
    ]),
    // 选中的任务的飞行计划
    selectTaskFlightPlan() {
      return [];
    },
  },
  watch: {
    type: {
      immediate: true,
      handler() {
        // 切换任务列表时清空航线
        this.clearAirwayEntities();
        this.airwayId = null;
        this.executeFlightRouteId = null;
        this.rootNode.$emit("hangarTaskTabChange", {
          type: this.type,
        });
        this.getTaskList();
      },
    },
    showFlightEdit: {
      handler(val) {
        if (!val && !this.showFlightPlan) {
          this.changeflyLogStatus(false);
        } else {
          this.changeflyLogStatus(true);
        }
      },
    },
    showFlightPlan: {
      handler(val) {
        if (!val && !this.showFlightEdit) {
          this.changeflyLogStatus(false);
        } else {
          this.changeflyLogStatus(true);
        }
      },
    },
  },
  created() {
    this.timeHandle = setInterval(() => {
      this.getTaskList();
    }, 5000);
  },
  beforeDestroy() {
    this.clearAirwayEntities();
    clearInterval(this.timeHandle);
  },
  methods: {
    ...mapActions("MMCFlightControlCenter", [
      "createAirwayEntities",
      "clearAirwayEntities",
    ]),
    // 改变飞行日志弹框状态
    changeflyLogStatus(falg) {
      this.$store.commit("MMCFlightControlCenter/setState", {
        key: "flyLogStatus",
        value: falg,
      });
    },
    /**
     * 更新任务列表
     */
    getTaskList() {
      const params = {
        pageNo: 1,
        pageSize: 100,
        type: this.type, // 0: 日常任务, 1: 定时任务, 2: 周期任务
        taskStatus: 11, // 筛选掉审核未通过的
        hangar: this.hangar,
        putDevice: 2,
        callback: this.handleTaskListResponse.bind(this),
      };

      this.rootNode.$emit("taskListGet", params);
    },

    handleTaskListResponse(res) {
      if (res.taskType !== this.type || res.records.length === 0) {
        this.taskListAll = [];
        return;
      }
      this.taskListAll = res.records.sort((a, b) => {
        const aIsExecuting = a.status === "执行中";
        const bIsExecuting = b.status === "执行中";
        return aIsExecuting === bIsExecuting ? 0 : (aIsExecuting ? -1 : 1);
      });
      const executeFlightRoute = this.taskListAll.find(item => item.status === "执行中");
      if (executeFlightRoute && this.executeFlightRouteId !== executeFlightRoute.airwayId) {
        this.executeFlightRouteId = executeFlightRoute.airwayId;
        this.onSwitchAirway(executeFlightRoute);
      }
    },
    /**
     * 显示或隐藏航线
     */
    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 });
            if (this.airwayId != airway.id) {
              this.createAirwayEntities({
                polyline: airway.content,
                id: airway.id,
              });
              this.airwayId = airway.id;
            }
          } else {
            this.createAirwayEntities({
              polyline: airway.content,
              id: airway.id,
            });
            this.airwayId = airway.id;
          }
        },
      });
    },
    async onDelAirway(item) {
      try {
        await this.$confirm("请确认是否删除该任务?", "安全确认", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          customClass: "uav_controlPane",
          showClose: false,
        });
        this.loading = true;
        this.rootNode.$emit("taskDel", {
          task: item,
          type: 0, // 0: 日常任务 1.定时任务 2.周期任务
          callback: () => {
            this.getTaskList();
            this.loading = false;
          },
        });
      } catch (e) {
        console.log(e);
      }
    },

    /**
     * 打开飞行计划
     */
    onOpenPlan(item) {
      this.selectedTask = item;
      this.showFlightPlan = true;
      this.showFlightEdit = false;
    },
    /**
     * 打开飞行编辑
     */
    onOpenEdit(item) {
      this.selectedTask = item;
      this.showFlightEdit = true;
      this.showFlightPlan = false;
    },
  },
};
</script>

<style lang="scss">
.stl-timed-task {
  height: 230px;
  display: flex;
  flex-direction: column;
  padding: 16px 4px;
  gap: 0px;
  box-sizing: border-box;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    width: calc(100% - 5px);
    height: calc(100% - 24px);
    border-radius: 4px;
    border: 1px solid #4b4b4b;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .timed-task-header {
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 42px;
    background: #343434;
    font-family: YouSheBiaoTiHei;
    font-size: 16px;
    color: #ebf9ff;

    .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;
    z-index: 1;

    .row {
      display: flex;
      color: #fff;
      min-height: 52px;
      background-color: #222222;
      align-items: center;
      gap: 3px;

      &.single {
        background-color: #343434;
      }

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

        &.col-2 {
          text-overflow: initial;
          font-size: 14px;
        }

        &.flex2 {
          flex: 2;
        }

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

          i {
            cursor: pointer;
            font-size: 20px;

            &.loading {
              opacity: 0.5;
            }
          }
        }

        &.status {
          flex: initial;
          width: 70px;
          font-size: 14px;
        }
      }
    }
  }

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