<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>回复问题</h3>
			<h5>回复问题</h5>
		</div>
		<div class="content">
			<div class="describe">澄清问题</div>
			<div class="clear-message">
				<div class="flex clear-item">
					<div><span>*</span>澄清问题标题：</div>
					<div>{{ detail.title }}</div>
				</div>
				<div class="flex clear-item">
					<div><span>*</span>澄清问题内容：</div>
					<div>{{ detail.content }}</div>
				</div>
				<div v-if="detail.accessoryList" class="flex">
					<div><span>*</span>澄清问题附件：</div>
					<ul>
						<li v-for="(item,index) in detail.accessoryList" :key="index">
							<span>{{ item.fileName }}</span>
							<el-button @click="download(item.accessoryUrl)">下载</el-button>
						</li>
					</ul>
				</div>
			</div>
			<h3 class="title">澄清内容</h3>
			<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="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" :disabled="isSubmit">提交审核</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		questionDetail,
		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() {
			return {
				isSubmit:false,
				questionId: 1,
				accessoryPOList: [],
				detail: '',
				editorOption: {},
				breads: ['招标管理', '招标项目管理', '工作台'],
				ruleForm: {
					title: '',
					release: '捷安采官网招标投专区',
					content: ''
				},
				rules: {
					title: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}],
					release: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}],

					content: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}]
				}
			}
		},
		created() {
			this.id = this.$route.query.questionId
			this.getquestionDetail()
		},
		methods: {
			getfile(val) {
				for (let item of val) {
					item.accessoryUrl = item.fileUrl
				}
				this.ruleForm.accessoryList = val
			},
			download(url) {
				window.open(url)
			},
			cancle() {
				this.$router.go(-1)
			},
			// 查看问题详情
			async getquestionDetail() {
				try {
					const {
						code,
						data
					} = await questionDetail(this.id)
					if (code === 200) {
						this.detail = data
					}
				} catch (err) {
					console.log(err)
				}
			},
			//提交澄清
			async submit() {
				let ruleForm = this.ruleForm
				ruleForm.questionId = this.id
				ruleForm.companyId = localStorage.getItem("companyId")
				ruleForm.projectId = localStorage.getItem("projectId")
				try {
					const valid = await this.$refs['ruleForm'].validate()
					if (valid) {
						this.isSubmit=true
						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;
	}



	.clear-message {
		margin-left: 70px;
		width:80%
	}

	.clear-message>div>span {
		color: #FF0000;
		margin-right: 5px;
	}

	.title {
		font-weight: 600;
		margin: 20px 0 20px 20px
	}

	.clear-item>div:last-child {
		width: 300px;

	}

	.clear-message>div {
		margin-bottom: 50px;
	}

	.clear-message ul>li>span {
		margin-right: 10px;
	}
</style>
