<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>提出澄清</h3>
      <h5>提出澄清</h5>
    </div>
    <div class="content">
      <div class="describe">澄清公告信息</div>
      <div class="form">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="澄清公告标题" prop="title">
            <el-input v-model.trim="ruleForm.title" placeholder="请输入" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="公告发布媒体" prop="release">
            <el-input v-model="ruleForm.release" disabled></el-input>
          </el-form-item>
          <el-form-item label="澄清文件" prop="file">
            <singleUpload :limit="5" tip="最多上传5个文件，每个文件不超过100M。" @input="getfile"></singleUpload>
          </el-form-item>
          <el-form-item label="公告内容" prop="content">
            <quill-editor ref="text" v-model.trim="ruleForm.content" :options="editorOption" class="myQuillEditor"  />
          </el-form-item>
        </el-form>
        <div class="centerButton">
          <el-button @click="cancle">取消</el-button>
          <el-button type="primary" @click="submit">提交审核</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  forwardClarify
} from '@api/purchaser/bid'
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
import singleUpload from '@components/Upload/Upload.vue'
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    dataBreadcrumb,
    singleUpload,
    quillEditor
  },
  data() {
	  let checkSpace = (rule, value, callback) => {
		  console.log(value.split(" ").join("").length)
	    if (value.split(" ").join("").length == 0) {
	      callback(new Error('请输入'))
	    } else {
	      callback()
	    }
	  }
    return {
      accessoryPOList: [],
      editorOption: {},
      breads: ['招标管理', '招标项目管理', '工作台'],
      ruleForm: {
        title: '',
        release: '捷安采官网招标投专区'
      },
      rules: {
        title: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        release: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        },
		{
		 validator: checkSpace,	
		 trigger: 'blur'
		}]
      }
    }
  },

  methods: {
    getfile(val) {
      for (let item of val) {
        item.accessoryUrl = item.fileUrl
      }
      this.ruleForm.accessoryList = val
    },
    cancle() {
      this.$router.go(-1)
    },
    //提交表单
    async submit() {
      let ruleForm = this.ruleForm
      ruleForm.projectId = localStorage.getItem("projectId")
      ruleForm.companyId = localStorage.getItem("companyId")
      try {
        const valid = await this.$refs['ruleForm'].validate()
        if (valid) {
          const {
            code,
            msg
          } = await forwardClarify(this.ruleForm)
          if (code === 200) {
           this.$message({
                        message: msg,
                        type: 'success',
          			  duration:1500
                      })
          			setTimeout(()=>{
          				 this.$router.go(-1)
          			},1500)
          }
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>


<style scoped>
	.content {
		padding: 0;
		padding-bottom: 100px;
	}


</style>
