<template>
  <div>
    <!-- 设置项目状态对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="项目阶段" prop="projectStage">
          <el-select
            v-model="form.projectStage"
            ref="selectLable"
            placeholder="请选择项目阶段"
          >
            <el-option
              @click.native="handleProjectSelect(index, dict)"
              v-for="(dict, index) in dict.type.project_stage"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态" prop="projectState">
          <el-select
            ref="selectState"
            v-model="form.projectState"
            placeholder="请选择项目状态"
          >
            <el-option
              @click.native="handleProjectStateSelect(dict)"
              v-for="dict in project_state"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.projectState == 'e'"
          label="立项通过日期"
          prop="projectDate"
          :rules="[
            { required: verifyProjectDate, trigger: 'blur', message: '请选择' },
          ]"
        >
          <el-date-picker
            clearable
            v-model="form.projectDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择立项通过日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-if="form.projectState == 'i'"
          label="投决通过日期"
          prop="decisionDate"
          :rules="[
            {
              required: verifyDecisionDate,
              trigger: 'blur',
              message: '请选择',
            },
          ]"
        >
          <el-date-picker
            clearable
            v-model="form.decisionDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择投决通过日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-preventReClick
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { editStage } from "@/api/invest/pool";
import { mapGetters } from "vuex";
export default {
  props: {},
  dicts: ["project_stage", "project_state"],
  watch: {
    "form.projectState": function (newValue, oldValue) {
      // 项目立项通过
      if (newValue == "e") {
        this.verifyProjectDate = true;
      } else {
        this.verifyProjectDate = false;
      }
      // 项目投决通过
      if (newValue == "i") {
        this.verifyDecisionDate = true;
      } else {
        this.verifyDecisionDate = false;
      }
    },
  },
  data() {
    return {
      project_state: [],
      rules: {
        projectStage: [
          { required: true, trigger: "change", message: "请选择项目阶段" },
        ],
        projectState: [
          { required: true, trigger: "change", message: "请选择项目状态" },
        ],
      },
      verifyProjectDate: false,
      verifyDecisionDate: false,
      form: {
        id: null,
        projectStage: "",
        projectState: "",
        stageName: "",
        stateName: "",
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      projectStage_org: "",
      projectState_org: "",
    };
  },
  computed: {
    ...mapGetters(["projectState"]),
  },
  methods: {
    // 下拉框改变
    handleProjectSelect(index, dict) {
      this.form.projectState = null;
      this.project_state = this.projectState[index];
      // 给个默认值
      this.form.projectState = this.project_state[0].dictValue;
      this.form.stateName = this.project_state[0].dictLabel;
      if (dict && dict.label) {
        this.form.stageName = dict.label;
      }
    },
    // 修改业务节点
    handleBusinessUpdate(row) {
      //   console.log("row=", row);
      this.projectStage_org = row.projectStage;
      this.projectState_org = row.projectState;
      this.reset();
      let index = parseInt(row.projectStage) - 1;
      this.handleProjectSelect(index, row);
      this.form = row;
      this.open = true;
      this.title = "设置项目阶段";
      setTimeout(() => {
        this.form.stageName = this.$refs.selectLable.selected.label;
        this.form.stateName = this.$refs.selectState.selected.label;
      }, 300);
    }, // 设置项目状态表单重置
    reset() {
      this.form = {
        id: null,
        projectStage: null,
        projectState: null,
        stageName: null,
        stateName: null,
      };
      this.resetForm("form");
    },
    handleProjectStateSelect(dict) {
      if (dict && dict.dictLabel) {
        this.form.stateName = dict.dictLabel;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 修改项目状态提交按钮 */
    submitForm() {
      let that = this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (
            this.projectStage_org === this.form.projectStage &&
            this.projectState_org === this.form.projectState
          ) {
            that.$modal.msgSuccess("修改成功");
            that.open = false;
          } else {
            if (this.projectStage_org !== this.form.projectStage) {
              if (this.form.stageName === "项目立项") {
                this.form.approvalFlag = "0";
              } else if (this.form.stageName === "尽职背调") {
                this.form.investigateFlag = "0";
              } else if (this.form.stageName === "项目投决") {
                this.form.decisionFlag = "0";
              }
            }
            editStage(this.form).then((response) => {
              that.$modal.msgSuccess("修改成功");
              that.open = false;
              that.$emit("getList");
              this.$store.dispatch("getReviewNumber"); //初始化评估考察代办数量
              this.$store.dispatch("getApprovalNumber"); //初始化项目立项代办数量
              this.$store.dispatch("getInvestigateNumber"); //初始化尽职背调代办数量
              this.$store.dispatch("getDecisionNumber"); //初始化项目投决代办数量
            });
          }
        }
      });
    },
  },
};
</script>
