<template>
  <div class="task-add dialog1027" v-interact>
    <div class="dialog-header">
      <div class="dialog-header__title">飞行编辑</div>
      <div class="dialog-header__close" @click="close">关闭</div>
    </div>
    <div class="dialog-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-date-picker
          v-model="form.time"
          :type="task.taskType == 1 ? 'datetime' : 'datetimerange'"
          range-separator="至"
          start-placeholder="请选择任务开始时间"
          end-placeholder="请选择任务结束时间"
          placeholder="选择日期时间"
          size="mini"
          popper-class="mmc"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          style="margin-bottom: 24px; width: 100%"
        ></el-date-picker>
        <el-form-item label="任务库：" prop="taskId">
          {{ task.name }}
        </el-form-item>
        <el-form-item label="航线名称：" prop="airwayId">
          {{ task.airwayName }}
        </el-form-item>
      </el-form>
      <div class="task-add-btn">
        <el-button
          type="danger"
          size="medium"
          class="btn btn--cancel"
          @click="close"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="medium"
          :loading="confirmLoading"
          class="btn btn--ok"
          @click="onConfirm"
          >确认</el-button
        >
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "TaskAdd",
  inject: ["rootNode"],
  props: {
    task: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        time: [],
      },
      rules: {},
      pickerOptions: {
        disabledDate: (time) => {
          // 日期选择限制
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      confirmLoading: false,
    };
  },
  computed: {},
  watch: {},
  async mounted() {
    if (this.task.taskType == 1) {
      if (this.task.taskStartTime == "/") {
        this.form.time = null;
      } else if (this.task.taskStartTime) {
        // 定时
        this.form.time = Moment(this.task.taskStartTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
    } else {
      if (this.task.taskStartTime == "/" || this.task.taskEndTime == "/") {
        this.form.time = null;
      } else if (this.task.taskStartTime && this.task.taskEndTime) {
        // 周期
        this.form.time = [
          Moment(this.task.taskStartTime).format("YYYY-MM-DD HH:mm:ss"),
          Moment(this.task.taskEndTime).format("YYYY-MM-DD HH:mm:ss"),
        ];
      }
    }
  },
  methods: {
    /**
     * 确认事件
     */
    onConfirm() {
      this.$refs["form"].validate((valid) => {
        let params = {
          id: this.task.id,
        };
        if (this.task.taskType == 1) {
          params.taskStartTime = Moment(this.form.time).valueOf();
          params.taskEndTime = null;
        } else {
          params.taskStartTime = Moment(this.form.time[0]).valueOf();
          params.taskEndTime = Moment(this.form.time[1]).valueOf();
        }

        if (valid) {
          this.confirmLoading = true;
          this.rootNode.$emit("taskInfoUpdateTime", {
            data: params,
            callback: (res) => {
              console.log("taskInfoUpdateTime res", res);
              this.confirmLoading = false;
              if (res.code === 0) {
                this.$message.success("更改时间完成");
                this.$emit("close");
              } else {
                this.$message.warning(res.error.msg);
              }
            },
          });
        } else {
          return false;
        }
      });
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.task-add::v-deep {
  width: 526px;
  height: 268px;
  background: #222;
  position: fixed;
  top:25%; 
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -25%); /* 使用 transform 进行精确居中 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;

  &.more {
    height: 376px;
  }

  .dialog-header {
    padding-left: 16px !important;
    flex-shrink: 0;
  }

  .dialog-content {
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .task-add-main {
    padding: 20px 20px 0 10px;
  }

  .task-add-btn {
    flex-shrink: 0;
    display: flex;
    justify-content: center;

    .btn {
      box-sizing: border-box;
      width: 112px;
      height: 32px;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 14px;

      &.btn--cancel {
        color: #ff4040;
        border: 1px #ff4040 solid;
        background-color: transparent;
      }

      &.btn--ok {
        margin-left: 23px;
      }
    }
  }

  .task-add-more {
    background-color: rgba(13, 82, 143, 0.6);
    height: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  $height: 32px;

  .el-form-item__content {
    line-height: $height;
    height: $height;
  }

  .el-form-item__label {
    line-height: $height;
  }
}
</style>
