<!--
  @description:供应商-供应商不良记录管理-新增不良记录弹框
  @Modifier: qrf
  @routerPath:
  @date:2020/11/04-14:27
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    title="新增不良记录"
    width="750px"
    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 label="来源" prop="badSource" /></td>
            <td>
              <el-radio
                v-for="(item, index) in badSourceList"
                :key="index"
                v-model="supplierFormData.badSource"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </td>
          </tr>
          <tr>
            <td><el-form-item prop="supplierName" label="供应商名称" /></td>
            <td>
              <el-input v-model="supplierFormData.supplierName" disabled style="width: calc(100% - 156px );" />
              <!-- 请选择 -->
              <el-button type="primary" @click="changeSelect('0')">
                选择
              </el-button>
              <el-button type="primary" plain @click="clearSelect('0')">
                清空
              </el-button>
            </td>
          </tr>
          <tr>
            <td><el-form-item label="处罚意见" prop="penaltyOpinions" /></td>
            <td>
              <el-radio
                v-for="(item, index) in penaltyOpinionsList"
                :key="index"
                v-model="supplierFormData.penaltyOpinions"
                :label="item.typecode"
              >
                {{ item.typename }}
              </el-radio>
            </td>
          </tr>
          <tr>
            <td><el-form-item label="原因" prop="badReason" /></td>
            <td>
              <el-select v-model="supplierFormData.badReason" placeholder="请选择" style="width: 220px">
                <el-option
                  v-for="item in badReasonList"
                  :key="item.typecode"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td><el-form-item label="处罚期限" prop="penaltyPeriod" /></td>
            <td>
              <el-select v-model="supplierFormData.penaltyPeriod" placeholder="请选择" style="width: 220px">
                <el-option
                  v-for="item in penaltyPeriodList"
                  :key="item.typecode"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <tr>
            <td><el-form-item label="处罚范围" prop="penaltyScope" /></td>
            <td>
              <el-radio
                v-model="supplierFormData.penaltyPeriod"
                label="00"
              >
                一年内不允许申报集采
              </el-radio>
            </td>
          </tr>
          <tr>
            <td><el-form-item prop="associatedOrder" label="关联订单" /></td>
            <td>
              <el-input v-model="supplierFormData.associatedOrder" disabled style="width: calc(100% - 156px );" />
              <!-- 请选择 -->
              <el-button type="primary" @click="changeSelect('0')">
                选择
              </el-button>
              <el-button type="primary" plain @click="clearSelect('0')">
                清空
              </el-button>
            </td>
          </tr>
          <tr>
            <td><el-form-item prop="eventDescription" label="事件说明" /></td>
            <td>
              <el-input v-model="supplierFormData.eventDescription" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="附件" prop="uploadFile" />
            </td>
            <td colspan="3">
              <upload
                ref="upload"
                :data="upLoadData"
                :auto-delete="true"
                :auto-upload="true"
                title=""
                file-ref="fileRef"
              />
            </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 { submitSupplierBadRecording } from '@/api/supplier/supplierBad' // 提交企业年审费用
/* 公共方法*/
import { characters1_auto } from '@assets/js/validate'// 校验规则
import upload from '@comp/common/updownload/upload' // 附件
export default {
  name: 'SupplierEnterprisePayDialog',
  components: {
    upload // 附件
  },
  props: {
    dialogData: {
      type: Object,
      default() {
        return {
          dialog: false
        }
      }
    }
  },
  data() {
    return {
      supplierFormData: {
        badSource: '', // 来源
        supplierName: '', // 供应商名称
        penaltyOpinions: '', // 处罚意见
        badReason: '', // 原因
        penaltyPeriod: '', // 处罚期限
        penaltyScope: '', // 处罚范围
        associatedOrder: '', // 关联订单
        eventDescription: '' // 事件说明
      },
      rules: {
        badSource: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        supplierName: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        penaltyOpinions: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        badReason: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        penaltyPeriod: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        penaltyScope: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        associatedOrder: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 支付方式
        eventDescription: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 支付方式
      }
    }
  },
  methods: {
    // 选择课程分类弹框
    changeSelect() {

    },
    // 提交
    entry() {
      this.$refs.supplierFormData.validate(valid => {
        if (valid) {
          const data = {
            ...this.supplierFormData
          }
          this.loading = true
          submitSupplierBadRecording(data).then(res => {
            this.loading = false
            this.dialogData.dialog = false
            this.$emit('change')
          }).catch(() => {
            this.loading = false
            this.$emit('change')
          })
        }
      })
    }
  }
}
</script>
