<template>
  <div>
    <ProjectInfo :info="projectInfo" />

    <el-form inline style="margin-top: 10px;">
      <el-form-item label="项目延期日期" prop="postPoneDate">
        <el-date-picker v-model="postPoneDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择项目延期日期" />
      </el-form-item>

      <el-form-item label="责任人签名" prop="signing">
        <el-input v-model="signing" :placeholder="'请您确认签名: ' + nickname" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handlePostPone">确认延期</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getProject, postPoneProject } from "@/api/oa/project";

import ProjectInfo from "@/components/fad-service/ProjectInfo/index.vue";

export default {
  name: "PostPone",
  components: { ProjectInfo },
  props: {
    projectId: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      postPoneDate: "",
      projectInfo: {},
      nickname: this.$store.getters.nickName,
      signing: "",
    }
  },
  watch: {
    projectId: {
      handler (newVal) {
        if (newVal) {
          getProject(newVal).then((response) => {
            this.projectInfo = response.data;
          });
        }
      },
      immediate: true
    }
  },
  methods: {
    handlePostPone () {
      if (!this.postPoneDate) {
        this.$message.error("请选择项目延期日期");
        return;
      }
      if (!this.signing) {
        this.$message.error("请输入责任人签名");
        return;
      }
      if (this.signing !== this.nickname) {
        this.$message.error("签名错误");
        return;
      }
      this.$confirm("确认延期项目吗？", "确认提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        // 确认延期项目
        postPoneProject({
          projectId: this.projectId,
          tempTime: this.postPoneDate,
        }).then((response) => {
          this.$message({
            message: "项目已延期",
            type: "success"
          });
          this.$emit('finish');
        })
      })
    },
  }
}
</script>