<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>查看澄清问题</h3>
			<h5>查看投标方回复的澄清问题</h5>
		</div>
		<div class="content">
			<div class="message">
				<div class='message-item'>
					<h4>澄清问题</h4>
					<div class="flex-between">
						<div>澄清质询标题：{{replyDetail.title}}</div>
						<div>澄清质询类型：{{replyDetail.type}}</div>
					</div>
					<div class="flex-between">
						<div>问题发布时间：{{replyDetail.createTime}}</div>
						<div>澄清回复截止时间：{{replyDetail.cutOffTime}}</div>
					</div>
					<div>澄清问题内容：{{replyDetail.content}}</div>
					<div class="flex-item">
						<div>澄清问题文件:</div>
						<ul class="upload" v-if="replyDetail.fileName">
							<li class="flex-item">
								<span>{{replyDetail.fileName}}</span>
								<el-button size="mini" @click='download(replyDetail.fileUrl)'>下载</el-button>
							</li>
						</ul>
						<div v-else>无</div>
					</div>
				</div>
				<div  v-if="replystate" class="message-item">
					<h4>回复问题</h4>
					<div class="flex">
						<div>投标人：</div>
						<div>{{questionDetail.createBy}}</div>
					</div>
					<div class="flex">
						<div>回复内容：</div>
						<div>{{questionDetail.replyContent}}</div>
					</div>
					<div class="flex-item">
						<div>回复附件:</div>
						<ul class="upload" v-if="questionDetail.fileName">
							<li class="flex-item">
								<div>{{questionDetail.fileName}}</div>
								<el-button size="mini" @click="download(questionDetail.fileUrl)">下载</el-button>
							</li>
						</ul>
						<div v-else>无</div>
					</div>
				</div>
			</div>
			<div class="button">
				<el-button @click="back">返回</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {expertquestionDetail,expertreplyDetail} from '@api/purchaser/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	export default {
		components: {
			dataBreadcrumb
		},
		data() {
			return {
				replystate:true,
				questionDetail:'',
				replyDetail:'',
				breads: ["招标管理", "招标项目管理", "工作台"]
			}
		},
		created() {
			let id=this.$route.query.id;
			this.getquestionDetail(id);
			this.getreplyDetail(id);
		},
		methods: {
			download(url){
				window.open(url)
			},
			back(){
				this.$router.go(-1)
			},
			// 查看问题详情
             async getquestionDetail(id) {
                 try {
                   const {
                     data,
                     code
                   } = await expertquestionDetail(id)
                   if (code === 200) {
                     this.replyDetail=data;
                   }
                 } catch (e) {
                   console.log(e)
                 }
               },
			   // 查看回复详情
			   async getreplyDetail(id) {
			       try {
			         const {
			           data,
			           code
			         } = await expertreplyDetail(id)
			         if (code === 200) {
						 if(data.length==0){
							 this.replystate=false
						 }else{
							 this.questionDetail=data[0];
						 }
			         }
			       } catch (e) {
			         console.log(e)
			       }
			     }
		}

	}
</script>


<style scoped>
	.button {
		width: 200px;
		margin: 50px auto
	}

	.message {
		width: 60%;
	}

	.message-item>h4 {
		margin-bottom: 30px;
		font-weight: bold;

	}

	.message-item>div {
		margin-bottom: 30px;
	}

	.upload span {
		color: #113DEE
	}
</style>
