<!--
@description: ysg 多轮报价 填写否决原因-弹框
@Modifier: ysg
procurementevalutionvetoReasonDialogVue-dialog
@date: 2020-10-12 19:15
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.dialog"
    :close-on-click-modal="false"
    append-to-body
    title="否决详情"
    custom-class="el-dialog_table_open_man"
  >
    <section class="p8">
      <el-form
        ref="form"
        :model="auditInfoParam"
        :rules="rules"
        :inline-message="true"
      >
        <table class="from_table" style="margin-bottom:30px;">
          <tr class="heauto">
            <td>
              <span>供应商</span>
            </td>
            <td colspan="3">
              <span>{{ radioVal.supplierName }}</span>
            </td>
          </tr>
          <tr class="heauto">
            <td>
              <el-form-item label="否决原因" prop="reasonContent" />
            </td>
            <td colspan="3">
              <el-form :model="auditInfoParam">
                <el-form-item prop="reasonContent">
                  <el-input
                    v-model="auditInfoParam.reasonContent"
                    :rows="4"
                    type="textarea"
                    placeholder="请填写否决原因"
                    maxlength="500"
                    show-word-limit
                  />
                </el-form-item>
              </el-form>
            </td>
          </tr>
        </table>
      </el-form>
    </section>
    <!--底部操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button
        :loading="confirmLoading"
        type="primary"
        @click="savneVeto('form')"
      >
        确 定
      </el-button>
      <el-button @click="dialogData.dialog = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 公共方法
import { procurementOfferGroupMixin } from '../../procurementOffer/mixins/procurementOffGroupMixin'
export default {
  name: 'ProcurementevalutionvetoReasonDialogVue',
  mixins: [procurementOfferGroupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {}
    },
    radioVal: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      auditInfoParam: {
        reasonContent: '' // 原因
      },
      // 校验规则
      rules: {
        reasonContent: [{ required: true, message: '请填写否决原因', trigger: 'blur' }] // 结束时间
      }
    }
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.dialog'(val) {
      if (val) {
        // 弹框已打开
        // 清空元数据
        this.clearData()
      }
    }
  },
  methods: {
    savneVeto(formName) {
      this.$refs[formName].validate((valid, field) => {
        if (valid) {
          this.dialogData.dialog = false
          this.$confirm('确定否决吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          })
            .then(() => {
              this.$emit('vetoReasonSave', this.auditInfoParam.reasonContent)
              this.auditInfoParam.reasonContent = ''
            })
            .catch(() => {})
        }
      })
    },
    // 清除数据
    clearData() {
      this.auditInfoParam.reasonContent = ''
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    }
  }
}
</script>

<style lang='less' scoped>
/deep/.el-dialog_table_open_man{
  width: 60%;
}
.heauto{
  height: 80px;
}
</style>
