<template>
  <div>
    <div class="content-head">
      <dataBreadcrumb :breads="breads"></dataBreadcrumb>
      <h3>查看</h3>
      <h5>查看</h5>
    </div>
	<!-- 澄清 -->
    <div class="content" v-if="clarifies">
      <div class="describe">澄清公告信息</div>
      <div class="clear-message">
        <div class="flex-item clear-item">
          <div>澄清公告标题：</div>
          <div>{{clarifies.title}}</div>
        </div>
        <div class="flex-item clear-item">
          <div>公告发布媒体：</div>
          <div>捷安采官网招投标专区</div>
        </div>
        <div class="flex-item clear-item" v-if="clarifieslist.length>0">
          <div>澄清文件：</div>
          <ul>
            <li v-for="item in clarifies.clarifieslist"  :key="item.id">
              <span>{{item.fileName}}</span>
              <el-button @click="down(item.accessoryUrl)">下载</el-button>
            </li>
          </ul>
        </div>
		<div class="flex clear-item">
		  <div>澄清内容：</div>
		  <div v-html="clarifies.content" style="width:80%;"></div>
		</div>
      </div>
	  <div class="button">
	    <el-button @click="cancle">返回</el-button>
	  </div>
    </div>
	<!-- 问题详情 -->
	<div class="content" v-if="question">
	  <div class="describe">问题信息</div>
	  <div class="clear-message">
	    <div class="flex-item clear-item">
	      <div>问题标题：</div>
	      <div>{{question.title}}</div>
	    </div>
	    <div class="flex-item clear-item">
	      <div>公告发布媒体：</div>
	      <div>捷安采官网招投标专区</div>
	    </div>
	    <div class="flex-item clear-item" v-if='questionlist.length>0'>
	      <div>问题文件：</div>
	      <ul>
	        <li v-for="item in questionlist"  :key="item.id">
	          <span>{{item.fileName}}</span>
	          <el-button @click="down(item.accessoryUrl)">下载</el-button>
	        </li>
	      </ul>
	    </div>
		<div class="flex clear-item">
		  <div>问题内容：</div>
		  <div v-html="question.content" style="width:80%;"></div>
		</div>
	  </div>
	  <div class="button">
	    <el-button @click="cancle">返回</el-button>
	  </div>
	</div>
  </div>
</template>

<script>
	import { clarifiesDetail,questionDetail} from '@api/supply/bid'
import dataBreadcrumb from '@components/dataBreadcrumb.vue'
import multiUpload from '@components/Upload/multiUpload.vue'
import dataTable from '@components/nopageTable.vue'
export default {
  components: {
    dataBreadcrumb,
    multiUpload,
    dataTable
  },
  data() {
    return {
	   question:"",
	   clarifies:"",
      breads: ['投标管理', '我参与的项目', '工作台'],
      ruleForm: {
        content:""
      },
    }
  },
  methods: {
	  down(url){
		  window.open(url)
	  },
    cancle() {
      this.$router.go(-1)
    },
	// 澄清公告详情
	async getclarifiesDetail(id) {
	      const {
	        data,
	        code
	      } = await clarifiesDetail(id)
			this.clarifies=data.noticeClarifiesDO
			this.clarifieslist=data.noticeClarifiesDO
			this.question=data.clarifiesDO
			this.questionlist=data.clarifiesAccessoryList

	  },
	  // 问题详情
	  async getquestionDetail(id) {
	        const {
	          data,
	          code
	        } = await questionDetail(id)
	  		this.clarifies=data.noticeClarifiesDO
	  		this.clarifieslist=data.noticeClarifiesDO
	  		this.question=data.clarifiesDO
	  		this.questionlist=data.clarifiesAccessoryList
	    }
  },
  created() {
	 let type=this.$route.query.type;
	 let id='';
   if(type=="question"){
	   id=this.$route.query.questionId
	   this.getquestionDetail(id)
   }else{
	    id=this.$route.query.noticeId
		this.getclarifiesDetail(id)
   }
  }
}
</script>


<style scoped>
	.table {
		padding: 30px
	}

	.content {
		padding: 0;
		padding-bottom: 100px;
	}

	.button {
		width: 200px;
		margin: 0 auto
	}

	.clear-message {
		margin-left: 70px;
		/* width: 350px */
	}

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

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

/* 	.clear-item>div:last-child {
		width: 200px;

	}
 */
	.clear-item>div:first-child {
		margin-right: 30px;
	
	}

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

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