  <!--
  @description: 不合格供应商管理-移除黑名单
  @Modifier: qink/haofengxian
  @routerPath:
  @date: 2020-2-25 13:20:35
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialog"
    :close-on-click-modal="false"
    title="不合格供应商"
    width="700px"
  >
    <h6 class="page-title">
      1.加入黑名单
    </h6>
    <blacklistInfoComDetail ref="blacklistInfoComp" />
    <h6 class="page-title">
      2.移除黑名单
    </h6>
    <el-form ref="form" :model="formData" :rules="rules" :inline-message="true">
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="移除原因" prop="cancelRemarks" />
          </td>
          <td>
            <el-input v-model="formData.cancelRemarks" :rows="2" type="textarea" placeholder="请输入内容" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="附件" prop="remarks" />
          </td>
          <td>
            <upload
              v-if="dialog"
              ref="upload"
              :data="principalData"
              :auto-delete="true"
              :auto-upload="true"
              title=""
              file-ref="fileRef"
              accept="image/jpg,image/jpeg,image/png"
              tip-text="请上传盖章说明文件（格式jpg、png，pdf）"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure('form')">提交</el-button>
      <el-button @click="dialog = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口*/
import { saveCancelBlacklistInfo } from '@/api/supplier/supplierUnqualified'
/* 组件*/
import upload from '@comp/common/updownload/upload'// 文件上传组件
import blacklistInfoComDetail from './blacklistInfoComp-detail'// 供应商黑名单查看
/* 混入 */
import { declareHegSupperMixins } from '@/views/supplier/editorDeclaration/mixins/declareHegSupperMixins'// 供应商-公用方法参数
export default {
  name: 'SupplierUnqualifiedRemoveDialog',
  components: {
    upload,
    blacklistInfoComDetail
  },
  mixins: [declareHegSupperMixins],
  data() {
    return {
      principalData: {
        bizId: '', // 业务主键Id
        fileType: 'cancel_blackList_Attr' // 移除黑名单文件类型
      },
      dialog: false, // 是否打开移除黑名单弹框
      formData: {
        cancelRemarks: '', // 取消黑名单说明
        id: '' // 主键
      },
      // 校验输入内容
      rules: {
        cancelRemarks: [{ required: true, message: '请输入', trigger: 'blur' }] // 移除原因
      }
    }
  },
  methods: {
    // 父组件触发-打开弹框获取详情
    open(id) {
      this.formData.id = id
      this.dialog = true
      // DOM渲染完成获取不合格供应商组件详情
      this.$nextTick(() => {
        this.$refs.blacklistInfoComp.getBlacklistInfo(id) // 获取详情
      })
    },
    // 提交
    ensure(formName) {
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        if (valid) { // 校验通过
          saveCancelBlacklistInfo(this.formData).then(res => {
            this.dialog = false
            this.$emit('call-back') // 操作成功时，触发父组件重载列表
          }).catch(() => [
          ])
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
