<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-select>
        </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){
      // 定时
      this.form.time = Moment(this.task.taskStartTime).format('YYYY-MM-DD HH:mm:ss');
    } else {
      // 周期
      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 = params.taskEndTime = Moment(this.form.time).valueOf();
        } 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;
  // border: 1px solid #70daf9;
  position: absolute;
  top: -5px;
  left: 550px;
  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>