<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>查看澄清</h3>
            <h5>查看澄清</h5>
        </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">f
	      <div>*公告发布媒体：</div>
	      <div>捷安采官网招投标专区</div>
	    </div> -->
                <div class="flex-item clear-item">
                    <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>
        <!-- 澄清 -->
        <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">
                    <div>澄清问题附件：</div>
                    <ul >
                        <li v-for="item in clarifieslist" :key="item.id">
                            <span>{{ item.fileName }}xxxxx</span>
                            <el-button @click="down(item.fileUrl)">下载</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="centerButton">
            <el-button @click="cancle">返回</el-button>
        </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.noticAccessoryList;
            this.question = data.clarifiesDO;
            this.questionlist = data.clarifiesAccessoryList;
        },
        // 问题详情
        async getquestionDetail(id) {
            const { data, code } = await questionDetail(id);
            console.log(data);
            this.clarifies = data.noticeClarifiesDO;
            this.clarifieslist = data.noticAccessoryList;
            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;
}

.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>
