<!-- 同意/驳回 -->
<template>
  <el-dialog :title="newKey==4 ? '同意':'驳回'" :visible.sync="dialogVisible" width="500px" top="30vh" :before-close="handleClose" append-to-body destroy-on-close>
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="理由" prop="reason">
            <el-input type="textarea" size="small" v-model="form.reason" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { approveTask, rejectTask } from "@/api/bpm/task";
export default {
  name: '',
  props: {
    isOpen: Boolean,
    accessId: [Number, String],
    newKey: [Number, String], // 4 同意 5 驳回
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        reason: ''
      },
      // 表单校验
      rules: {
        reason: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    }
  },
  watch: {
    isOpen: {
      handler(val) {
        if (val) {
          this.handleInitForm()
        }
        this.dialogVisible = val
      },
      deep: true,
      immediate: true
    },
  },
  components: {},

  computed: {},

  methods: {
    handleInitForm() {
      this.$nextTick(() => {
        // this.$refs.form && this.$refs.form.resetField()
      })
    },
    handleConfirm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        let obj = {
          id: this.accessId,
          reason: this.form.reason
        }
        this.$modal.loading("提交中，请稍候...");
        if (this.newKey == 4) {
          approveTask(obj).then(() => {
            this.$emit('onConfirm')
            this.$modal.closeLoading()
            history.back()
          }).catch(() => {
            this.$modal.closeLoading()
          })
        } else {
          rejectTask(obj).then(() => {
            this.$emit('onConfirm')
            this.$modal.closeLoading()
            history.back()
          }).catch(() => {
            this.$modal.closeLoading()
          })
        }
      })
    },
    handleClose() {
      this.$emit('onCancel')
    },
  }
}

</script>
<style lang='scss' scoped>
</style>