<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="查询" width="50%"
    :visible.sync="DialogVisible" :before-close="handleCancel">
    <div>
      <div class="box-agreement">
        <el-form label-suffix=":" :rules="rules" label-width="120px" label-position="left" :model="form" ref="form">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="name" label="姓名">
                <el-input clearable v-model.trim="form.name" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item prop="mobile" label="手机号">
                <el-input clearable v-model.trim="form.mobile" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item prop="certNo" label="身份证号">
                <el-input clearable v-model.trim="form.certNo" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item prop="brandName" label="品牌名称">
                <el-input type="textarea" :row="3" maxlength="20" show-word-limit clearable
                  v-model.trim="form.brandName" placeholder="请输入"></el-input>
              </el-form-item>

            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleCancel">取 消</el-button>
      <el-button size="small" type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CreateCredit",
  props: {
    DialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: 'change' }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: 'change' }
        ],
        certNo: [
          { required: true, message: "请输入身份证号", trigger: 'change' }
        ],
        brandName: [
          { required: true, message: "请输入品牌名称", trigger: 'change' }
        ]
      },
      form: {
        "brandName": "",
        "certNo": "",
        "mobile": "",
        "name": ""
      }
    };
  },
  methods: {
    /** 取消 && 关闭弹框 */
    handleCancel() {
      this.$emit('handleClose')
    },
    /** 提交数据 */
    onSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {
          return false
        }

        try {
          const params = this.form;
          const res = await this.$$post('/retrial/add', { ...params })
          if (res.status === 200 && res.data.success) {
            this.$message({ message: '操作成功!', type: 'success' });
            this.$emit('handleCallback')
            setTimeout(() => {
              this.handleCancel()
            }, 1500)
          } else {
            this.$message({ message: res.data.message, type: 'error' });
          }
        } catch (err) {
          this.$message({ message: '异常', type: 'error' });
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.el-dialog__title {
  font-size: 30px;
  font-weight: 700;
}

.box-agreement {
  height: 250px;
  overflow: auto;
  box-sizing: border-box;
  padding: 0 50px;
}

/deep/ .el-upload,
/deep/ .el-upload-list__item {
  width: 80px;
  height: 80px;
  line-height: 90px;
}
</style>
