<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 {
  noticeChange
} from '@api/purchaser/bid'

import dataBreadcrumb from '@components/dataBreadcrumb.vue'

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

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