<template>
  <el-dialog
    title="申请处理"
    :visible="true"
    width="30%"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      :rules="formRules"
      label-width="40px"
    >
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入驳回理由"
          maxlength="300"
          show-word-limit
          rows="9"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit()">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  userBeautifulNumberApplyTable,
  handleBeautifulNumberApplyState
} from "@/api/user";

export default {
  name: "ApplyHandle",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    }
  },

  data() {
    const commonRules = [
      { required: true, message: "必填字段不可为空", trigger: "blur" }
    ];
    return {
      loading: false,
      form: {
        id: this.userId,
        state: 2,
        remark: ""
      },
      formRules: {
        // remark: commonRules
      }
    };
  },

  methods: {
    // 关闭窗口
    handleClose() {
      this.$emit("close");
    },

    // 提交按钮
    submit() {
      const that = this;
      that.$refs.form.validate(valid => {
        if (!valid) {
          console.error("error submit!!");
          return false;
        }

        that.loading = true;
        handleBeautifulNumberApplyState(
          that.form.id,
          that.form.state,
          that.form.remark
        )
          .then(res => {
            that.loading = false;
            that.$emit("success");
          })
          .catch(er => {
            console.error(er);
            that.loading = false;
          });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.el-textarea ::v-deep .el-input__count {
  background-color: transparent !important;
  bottom: -27px !important;
}
</style>
