<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>{{type==1?"编辑":"提出"}}澄清</h3>
            <h5>{{type==1?"编辑":"提出"}}澄清</h5>
		<div v-if="type==1" class="abs" style="width:400px">
               <div>拒绝原因：{{ruleForm.reason}}</div>
		</div>
        </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" :fileList="ruleForm.fileList"></singleUpload>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="content">
                        <quill-editor ref="text" v-model="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="submit1" v-if="type==1">提交修改</el-button>
                    <el-button type="primary" @click="submit" v-else>提交审核</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { forwardClarify,clarifiesDetail,editClarifiesNotice } 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)
        // 	console.log(value.trim().length)
        // 	console.log(value.split(" ").join("").length)
        // 	if (value.split(" ").join("").length == 0) {
        // 		callback(new Error('请输入'))
        // 	} else {
        // 		callback()
        // 	}
        // }
        return {
		  type:"",
            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'
                    }
                ]
            }
        };
    },

    methods: {
        // 查看澄清
        async getclarifiesDetail(clarifiesId) {
            try {
                const { code, data } = await clarifiesDetail(clarifiesId);
                if (code === 200) {
			    data.release="捷安采官网招投标专区"
			    for(let item of data.fileList){
				 item.name=item.fileName
				 item.url=item.fileUrl
			    }
                    this.ruleForm = data;
                }
            } catch (err) {
                console.log(err);
            }
        },
        getfile(val) {
		console.log(val)
            this.ruleForm.fileList = 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);
		}
	  },
	  async submit1() {
            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 editClarifiesNotice(this.ruleForm);
                    if (code === 200) {
                        this.$message({
                            message: msg,
                            type: 'success',
                            duration: 1500
                        });
                        setTimeout(() => {
                            this.$router.go(-1);
                        }, 1500);
                    }
                }
            } catch (err) {
                console.log(err);
		}
	  }
    },
    created() {
	  let type = this.$route.query.type;
	  this.type=type
        if(type==1){
		  let noticeId=this.$route.query.noticeId
		  this.getclarifiesDetail(noticeId)
	  }
    }
};
</script>


<style scoped>
.content {
    padding: 0;
    padding-bottom: 100px;
}
.abs{
   position: absolute;
   right:10px;
   bottom:10px
}
</style>
