<!--
  @description: 办结列表-撤回弹框
  @author: lxl
  @date： 2021-5-24 14:52
-->
<template>
  <div>
    <el-dialog
      :visible.sync="recallDialogData.dialogVisible"
      :before-close="handleClose"
      title="撤回"
      width="700px"
      custom-class="el-dialog__body-p0"
      top="calc((100vh - 336px) / 2)"
    >
      <div class="main mb10">
        <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
          <table class="from_table">
            <td>
              <el-form-item label="撤回原因" prop="bizReason" />
            </td>
            <td colspan="3">
              <el-input
                v-model.trim="formData.bizReason"
                :autosize="{ minRows: 3, maxRows: 3 }"
                type="textarea"
                gx-maxlength="varchar500"
                show-word-limit
              />
            </td>
          </table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="btnLoading" @click="ensure('form')">
          确 定
        </el-button>
        <el-button @click="handleClose">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { characters1_auto } from '@/assets/js/validate' // 校验输入内容
export default {
  name: 'RecallDialog',
  props: {
    recallDialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false
        }
      }

    }
  },
  data() {
    return {
      btnLoading: false,
      formData: {
        bizReason: ''
      },
      bizReason: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 撤回原因
    }
  },
  methods: {
    ensure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          '接口'(this.formData).then(res => {
            this.btnLoading = false
            this.$message({
              type: 'success',
              message: '退回成功！'
            })
            // 关闭弹窗
            this.handleClose()
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          this.$message({
            type: 'warning',
            message: '请填写退回意见'
          })
        }
      })
    },
    handleClose() {
      this.recallDialogData.dialogVisible = false
    }
  }
}
</script>
