<template>
  <div class="task-add dialog1027" v-interact>
    <div class="task-add-header dialog-header">
      <img
        class="dialog-header__icon"
        src="../../../../../../assets/images/mount_head.png"
      />
      <div class="header__title dialog-header__title">飞行计划</div>
      <div class="header-right dialog-header__close">
        <el-select
          placeholder="请选择任务场景"
          v-model="selectedTask"
          class="select"
          popper-class="mmc"
        >
          <el-option
            v-for="item in taskList"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <div class="header-right__close" @click="$emit('close')">关闭</div>
      </div>
    </div>
    <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 flex2">状态</div>
        <div class="header__column flex2">异常状态</div>

        <div class="header__column">操作</div>
      </div>
      <div class="timed-task-main">
        <div
          class="row"
          :class="{ single: i % 2 != 0 }"
          v-for="(item, i) in flightPlan"
          :key="item.id"
        >
          <div class="row__column flex2 col-2">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.putStartTime"
              placement="top-start"
            >
              <span>{{ item.putStartTime }}</span>
            </el-tooltip>
          </div>
          <div class="row__column flex2">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.reouteName"
              placement="top-start"
            >
              <span>{{ item.reouteName }}</span>
            </el-tooltip>
          </div>
          <div class="row__column flex2">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.status"
              placement="top-start"
            >
              <span v-if="item.abnormal == 1 || item.abnormal == 0">{{
                abnormalType[item.abnormal]
              }}</span>
              <span v-else> 暂无 </span>
            </el-tooltip>
          </div>
          <div class="row__column flex2">
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.abnormalName"
              placement="top-start"
            >
              <span
                style="color: red"
                v-if="item.abnormal == 2 || item.abnormal < 0"
                >{{ item.abnormalName }}</span
              >
              <span v-else>暂无</span>
            </el-tooltip>
          </div>
          <div class="row__column ctrl">
            <el-tooltip content="删除" placement="top">
              <i class="el-icon-delete" @click="onDel(item)"></i>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { AirLine } from "../../../../../../../../../../../../api";
import Moment from "moment";

export default {
  name: "TaskAdd",
  inject: ["rootNode"],
  props: {
    taskId: {
      type: Number,
      default: 0,
    },
    /**
     * 任务列表
     */
    taskList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      abnormalType: {
        0: "完成",
        1: "待执行",
      },
      flightPlan: [
        /*  {
          id: 30616,
          deviceId: "TMJ",
          deviceName: "无人机",
          flightSortieName: "TMJ",  // 	架次名称
          taskInfoId: 21480,  // 	任务id
          taskInfoName: "任务123",
          reouteId: 16462,  // 	航线id
          reouteName: "航线123",
          projectId: 12,  // 	项目Id
          projectName: "",
          status: 2,  // 默认0 表示架次未结束；1表示架次完整。
          sequence: 0, // 周期任务有多次执行，执行顺序
          putStartTime: "", // 	任务执行开始时间
          putEndTime: "",
          createTime: "",
        }, */
      ], // 飞行计划列表
      selectedTask: "", // 当前选择的任务
    };
  },
  computed: {
    ...mapState("MMCFlightControlCenter/hangar", ["hangar"]),
    ...mapState("MMCFlightControlCenter", ["airwayEntities", "useTask"]),
  },
  watch: {
    taskId: {
      immediate: true,
      handler() {
        this.selectedTask = this.taskId;
      },
    },
    selectedTask: {
      immediate: true,
      handler() {
        this.getList();
      },
    },
  },
  mounted() {},
  methods: {
    ...mapActions("MMCFlightControlCenter", []),
    getList() {
      this.rootNode.$emit("taskRecordPageGet", {
        id: this.selectedTask,
        callback: (res) => {
          console.log("taskRecordPageGet res", res);
          if (res.code === 0) {
            this.flightPlan = res.records.map((item) => {
              return {
                ...item,
                putStartTime: Moment(item.putStartTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ),
              };
            });
          }
        },
      });
    },
    /**
     * 删除的任务
     */
    async onDel(item) {
      await this.$confirm("请确认是否删除该飞行计划?", "安全确认", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        customClass: "uav_controlPane",
        showClose: false,
      });
      this.rootNode.$emit("taskInfoRecordDel", {
        id: item.id,
        callback: () => {
          this.getList();
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.task-add::v-deep {
  min-height: 232px;
  position: fixed;
  top: 20%; /* 设置为 0 */
  left: 0; /* 设置为 0 */
  right: 0; /* 设置为 0 */
  bottom: 0; /* 设置为 0 */
  margin: auto; /* 自动边距实现居中 */
  width: 660px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;

  .task-add-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
    padding: 0 20px 0 0;

    .header__title {
      font-family: MicrosoftYaHei-Bold;
      font-size: 16px;
      color: #70daf9;
      letter-spacing: 0;
      font-weight: 700;
    }

    .header-right {
      display: flex;
      gap: 20px;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      color: #70daf9;
      letter-spacing: 0;
      font-weight: 400;

      .select {
        border-radius: 2px;
        border: 1px solid #4b4b4b;
        width: 150px;
        $height: 24px;

        .el-input__inner {
          height: $height;
          font-size: 14px;
          color: #86909c;
        }

        .el-input__suffix {
          top: 0px;
          display: flex;
          align-items: center;
        }
      }
      .header-right__close {
        font-size: 16px;
        cursor: pointer;
      }
    }
  }

  .stl-timed-task {
    height: 340px;
    flex-grow: 1;
  }

  .task-add-btn {
    flex-shrink: 0;
    text-align: center;

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

  .task-add-more {
    background-color: #191919;
    height: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
