<!--
  @description:供应商-不良记录查询-申请解除弹框
  @Modifier: qrf
  @routerPath:
  @date:2020/11/04-14:27
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    title="申请解除不良记录"
    width="700px"
    custom-class="el-dialog__body-p0"
  >
    <div class="main mb10">
      <el-form
        ref="supplierFormData"
        :model="supplierFormData"
        :rules="rules"
        :inline-message="true"
      >
        <table class="from_table">
          <tr>
            <td><el-form-item prop="supplierName" label="供应商名称" /></td>
            <td>{{ dialogData.supplierName }}</td>
          </tr>
          <tr>
            <td><el-form-item label="申请解除原因" prop="removalReason" /></td>
            <td>
              <gx-input
                v-model.trim="supplierFormData.removalReason"
                gx-maxlength="varchar4000"
                placeholder="请输入申请解除原因"
                type="textarea"
                style="width:100%"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="说明附件" prop="descriptionFile" /></td>
            <td>
              1
            </td>
          </tr>
          <tr>
            <td><el-form-item label="申请人" prop="contactPerson" /></td>
            <td>
              <gx-input
                v-model.trim="supplierFormData.contactPerson"
                gx-maxlength="varchar20"
                placeholder="请输入申请人"
                style="width:100%"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="联系电话" prop="contactPersonPhone" /></td>
            <td>
              <gx-input
                v-model.trim="supplierFormData.contactPersonPhone"
                gx-maxlength="varchar20"
                placeholder="请输入联系电话"
                style="width:100%"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="电子邮箱" prop="email" /></td>
            <td>
              <gx-input
                v-model.trim="supplierFormData.email"
                gx-maxlength="varchar100"
                placeholder="请输入联系电话"
                style="width:100%"
              />
            </td>
          </tr>
        </table>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="entry">
        提交
      </el-button>
      <el-button @click="dialogData.dialog=false">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
/* api*/
import { submitBadSearchAddDialog } from '@/api/supplier/supplierBad' // 提交解除申请
/* 公共方法*/
import { linkerName, phone, email, characters1_auto } from '@assets/js/validate'// 校验规则
import { supplierBadGroupMixin } from '../mixin/supplierBadGroupMixin' // 获取字典信息
export default {
  name: 'SupplierEnterprisePayDialog',
  mixins: [supplierBadGroupMixin],
  props: {
    dialogData: {
      type: Object,
      default() {
        return {
          dialog: false
        }
      }
    }
  },
  data() {
    return {
      supplierFormData: {
        removalReason: '', // 解除原因
        contactPerson: '', // 申请人
        contactPersonPhone: '', // 联系人手机
        email: '' // 联系人邮箱
      },
      rules: {
        removalReason: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        contactPerson: [{ required: true, validator: linkerName, trigger: 'blur' }], // 联系人
        contactPersonPhone: [{ required: true, validator: phone, trigger: 'blur' }], // 联系人手机
        email: [{ required: true, validator: email, trigger: 'blur' }] // 邮箱
      }
    }
  },
  methods: {
    // 提交
    entry() {
      this.$refs.supplierFormData.validate(valid => {
        if (valid) {
          const data = {
            ...this.supplierFormData
          }
          this.loading = true
          submitBadSearchAddDialog(data).then(res => {
            this.loading = false
            this.dialogData.dialog = false
            this.$emit('change')
          }).catch(() => {
            this.loading = false
            this.$emit('change')
          })
        }
      })
    }
  }
}
</script>

