<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>查看流标公告</h3>
			<h5>查看流标公告</h5>
		</div>
		<div class="content">
			<div class="describe">变更公告</div>
			<div class="form">
				<el-form ref="ruleForm" :model="ruleForm" label-width="120px" class="demo-ruleForm">
					<el-form-item label="公告标题">
						<div>{{ruleForm.title}}</div>
					</el-form-item>
					<el-form-item label="上传附件" v-if="ruleForm.accessoryVOList">
						<ul>
							<li v-for="(item,index) in ruleForm.accessoryVOList" :key="index" class="flex">
								<div style="margin-right: 10px;">{{item.fileName}}</div>
								 <el-button size="mini" @click="down(item.accessoryUrl)">下载</el-button>
							</li>
						</ul>
					</el-form-item>
					<el-form-item label="公告内容">
						<div v-html="ruleForm.content"></div>
					</el-form-item>
				</el-form>
				<div class="button">
					<el-button @click="cancle">返回</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		noticeAbortive
	} from '@api/purchaser/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import multiUpload from '@components/Upload/multiUpload.vue'
	export default {
		components: {
			dataBreadcrumb,
			multiUpload,
		},
		data() {
			return {
				editorOption: {},
				breads: ['招标管理', '招标项目管理', '工作台'],
				ruleForm: {
					title: '',
					content: ''
				},
				rules: {
					title: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}],
					release: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}],
					file: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}],
					content: [{
						required: true,
						message: '请输入',
						trigger: 'blue'
					}]
				}
			}
		},
		created() {
			let id = this.$route.query.id;
			this.abortiveDetail(id)
		},
		methods: {
			cancle() {
				this.$router.go(-1)
			},
			async abortiveDetail(id) {
				try {
					const {
						data,
						code
					} = await noticeAbortive(id)
					if (code === 200) {
						this.ruleForm = data
					}
				} catch (e) {
					console.log(e)
				}
			}
		}

	}
</script>


<style scoped>
	.content {
		padding: 0;
		padding-bottom: 100px;
	}

	.button {
		width: 200px;
		margin: 150px auto 0
	}
</style>
