<!-- 驳回弹窗 -->
<template>
  <el-dialog
    title="驳回"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleDialogClose"
    custom-class="reject-dialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="驳回原因" prop="rejectReason">
        <el-input
          v-model="form.rejectReason"
          type="textarea"
          :rows="4"
          placeholder="请输入驳回原因"
          resize="none"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="handleSubmit"
        :loading="submitting"
        class="submit-btn"
        >确 定</el-button
      >
      <el-button @click="handleCancel" class="cancel-btn">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "RejectDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      submitting: false,
      form: {
        rejectReason: "",
      },
      rules: {
        rejectReason: [
          { required: true, message: "请输入驳回原因", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitting = true;
          try {
            await this.$emit("confirm", this.form);
          } finally {
            this.submitting = false;
          }
        }
      });
    },
    // 取消
    handleCancel() {
      this.$emit("update:visible", false);
    },
    // 关闭弹窗
    handleDialogClose() {
      this.$refs.form.resetFields();
      this.handleCancel();
    },
  },
};
</script>

<style lang="scss" scoped>
.reject-dialog {
  :deep(.el-dialog__body) {
    padding: 20px 20px 10px 20px;
  }

  :deep(.el-textarea__inner) {
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    border-color: #dcdfe6;

    &:focus {
      border-color: #409eff;
    }

    &:hover {
      border-color: #c0c4cc;
    }
  }

  .dialog-footer {
    text-align: right;
    padding-top: 10px;

    .submit-btn {
      padding: 9px 20px;
      font-size: 14px;
      border-radius: 4px;
      margin-left: 10px;
      transition: all 0.3s;

      &:hover {
        opacity: 0.8;
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }

    .cancel-btn {
      padding: 9px 20px;
      font-size: 14px;
      border-radius: 4px;
      transition: all 0.3s;
      border: 1px solid #dcdfe6;

      &:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}
</style>
