<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>查看澄清问题</h3>
			<h5>投标方回复招标方澄清问题</h5>
		</div>
		<div class="othercontent">
			<div>
				<div class="describe">澄清问题</div>
				<div class="clear-message">
					<div class="flex clear-item">
						<div>澄清问题标题：</div>
						<div>{{ questiondetail.title }}</div>
					</div>
					<div class="flex clear-item">
						<div>澄清问题内容：</div>
						<div v-html="questiondetail.content"></div>
					</div>
                    <div class="flex clear-item">
						<div>问题发布时间</div>
						<div>{{questiondetail.startTime}}</div>
					</div>
                    <div class="flex clear-item">
						<div>澄清回复截止时间</div>
						<div>{{questiondetail.endTime}}</div>
					</div>
					<div class="flex">
						<div>澄清问题附件：</div>
						<ul>
							<li>
								<span>{{questiondetail.fileName}}</span>
								<el-button size="mini" @click="down(questiondetail.fileUrl)">下载</el-button>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div>
				<h3 class="describe">澄清问题回复</h3>
				<div class="clear-message">
					<div class="flex clear-item">
						<div>回复内容：</div>
						<div>{{ replydetail.replyContent }}</div>
					</div>
					<div class="flex">
						<div>澄清问题附件：</div>
						<ul>
							<li>
								<span>{{replydetail.fileName}}</span>
								<el-button size="mini" @click="down(replydetail.fileUrl)">下载</el-button>
							</li>
						</ul>
					</div>
				</div>
				<div class="centerButton">
					<el-button @click="cancle" type="primary">返回</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		question,
		reply
	} from '@api/supply/bid'

	import dataBreadcrumb from '@components/dataBreadcrumb.vue'


	export default {
		components: {
			dataBreadcrumb,
		},
		data() {
			return {
				breads: ['投标管理 ', '我参加的项目', '工作台'],
				questiondetail: "",
				replyId: "",
				questionId: "",
				replydetail: ""
			}
		},
		created() {
			this.questionId = this.$route.query.questionId;
			this.replyId = this.$route.query.replyId;
			this.getquestion();
			this.getreply()
		},
		methods: {
			down(url) {
				window.open(url)
			},
			getfile(val) {
				this.ruleForm.filePOList = val
			},
			cancle() {
				this.$router.go(-1)
			},

			//查看回复内容
			async getquestion() {
				try {
					const {
						code,
						data
					} = await question(this.questionId)
					if (code === 200) {
						this.questiondetail = data
					}
				} catch (err) {
					console.log(err)
				}
			},
			// 查看问题
			async getreply() {
				try {
					const {
						code,
						data
					} = await reply(this.replyId)
					if (code === 200) {
						this.replydetail = data
					}
				} catch (err) {
					console.log(err)
				}
			},
		}
	}
</script>


<style scoped>
    .othercontent>div{
		background: #fff;
	   margin-bottom: 20px;
	   padding-bottom:1px;
	}


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

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

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

	/* 	.clear-item>div:last-child {
		width: 100px
	}
 */
	.clear-item>div:first-child {
		margin-right: 20px;
	}

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

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