
<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" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-form-item label="公告标题" prop="title">
            <div>{{ruleForm.title}}</div>
          </el-form-item>
          <el-form-item label="公告附件" v-if="ruleForm.accessoryVOList.length>0">
            <ul>
				<li v-for="item in ruleForm.accessoryVOList" :key="item.id" class="flex-item">
					<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="公告内容" prop="content">
            <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 {
  noticeChange
} from '@api/purchaser/bid'

import dataBreadcrumb from '@components/dataBreadcrumb.vue'

export default {
  components: {
    dataBreadcrumb
  },
  data() {
    return {
      editorOption: {},
      breads: ['招标管理', '招标项目管理', '工作台'],
      ruleForm: {
        title: '',
        content: ''
      }

    }
  },
  created() {
    this.changeDetail(1)
  },
  methods: {
	  down(url){
		  window.open(url)
	  },
    cancle() {
      this.$router.go(-1)
    },
    async changeDetail(id) {
      try {
        const {
          data,
          code
        } = await noticeChange(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>
