<template>
    <div class="home">
        <div class="header">
            <span class="header-nav">项目名称:{{itemTitle}}</span>
            <span class="header-nav">项目编号:{{itemCode}}</span>
            <span>发布日期:{{itemTime}}</span>
        </div>
        <h2>{{itemTitle}}</h2>
        <div class="form" v-html="contentList">
            <div></div>
        </div>
        <div class="sty" v-for="item in fileList" :key="item.id">
          <span>附件下载:</span>
          <span>{{item.fileName}}</span>
          <a :href="item.accessoryUrl">
            <el-button size="mini">下载</el-button>
          </a>
        </div>
        <div class="flex-center" style="margin-top:30px">
            <el-button @click="prev"
                >返回</el-button
              >
        </div>
    </div>
</template>

<script>
import {getChangeDetails} from '@/common/list.js'
export default {
    data(){
        return{
            contentList:'',
            itemTitle:'',
            itemCode:'',
            itemTime:'',
            fileList:[]
        }

    },
    mounted(){
        let id = this.$route.query.id
        console.log(id)
        this.getChangeDetails(id)
    },
    methods:{
        prev() {
            window.history.go(-1)
        },
        async getChangeDetails(id){
            const {data} = await getChangeDetails(id)
            this.itemTitle = data.nameAndCodeVO.projectName
            this.itemCode = data.nameAndCodeVO.projectCode
            this.contentList = data.content
            this.itemTime = data.createTime.slice(0,10)
            this.fileList = data.accessoryVOList
        }
    },
}
</script>

<style>
.header{
    display: flex;
    justify-content: space-between
}
.header-nav{
    margin-right: 30px;
}
h2{
    margin-top:30px;
    margin-bottom: 30px;
    text-align: center;
}
.home{
    width:9.3rem
}
.form{
    margin-top:50px;
    margin-left:40px;
    width:9.3rem
}
.sty{
    margin-left:200px;
    margin-top:50px;
    margin-bottom: 50px;
}
</style>