<template>
    <div class="content-main">
        <div class="divss">
            <span>{{tableModel.wjmc}}</span>
           
            <div class="divcen">
                <ul>
                    <li>
                        时间 ：<span>{{tableModel.fbsj}}</span>
                    </li>
                    <li style="cursor: pointer;">
                        字体大小 ：<span :style="{'background-color': colorOne,'color':fontColor}" class="font" @click="handlclickOne()">大</span>
                        <span class="font" :style="{'background-color': colorTwo,'color':fontColor2}"  @click="handlclickTwo()">中</span>
                    </li>
                    <li>
                        来源 ：<span>{{tableModel.fbr}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <span class="borderClass"> &nbsp;</span>
        <span class="iconfont iconquxiao" id="divBox"  @click="scalePlanReturn"></span>
        <div class="div-center">
            <p class="p-center">{{tableModel.wjmc}}</p>
            <p class="fbsj">（{{formDate(tableModel.fbsj)}}）</p>
            <span class="text" :style="{fontSize:fontSize + 'px'}">{{tableModel.wjnr}}</span>
        </div>
       
    </div>
</template>
<script>
import { selectTransactionInfoNoticeDetail } from "@/api/grainCirculationPrice/tradingCenter/tradeBulletin";

export default {
    data(){
        return{
            activeName: 'first',
            tabLabel:1,
            pageForm: {
                page: 1,
                size: 10,
                total: 0
            },
            colorOne: null,
            colorTwo:null,
            fontColor:null,
            fontColor2:null,
            fontSize:15,
            tableModel:{
                fbsj:null
            },
            tableOne:[],
            tableTwo:[],
            tableThree:[]
            
        }
    },
    methods:{
        


        scalePlanReturn() {
            this.$router.go(-1);
        },
         handlclickOne(){
            this.colorOne = 'gray';
            this.fontSize = 20;
            this.colorTwo = 'white'
            this.fontColor = 'white'
            this.fontColor2 = 'black'
        },
        handlclickTwo(){
            this.fontSize = 15;
            this.colorTwo = 'gray'
            this.colorOne = 'white'
            this.fontColor2 = 'white'
            this.fontColor = 'black'
        },
        getData(){
            selectTransactionInfoNoticeDetail({ggbm:this.$route.query.id}).then(res=>{
                if(res.infoCode == 200){
                    this.tableModel = res.data
                    this.tableModel.fbsj = res.data.fbsj
                    }
                })
        },
        returnList(){
            this.$router.go(-1);
        },
        formDate(time) {
            let str = this.tableModel.fbsj//一个字符串日期例如'2019-02-05'
                let regTimes = []
                if (str) {
                    regTimes = str.split('-')
                    if (regTimes.length === 3) {
                        let year = regTimes[0]
                        let month = regTimes[1]
                        let date = regTimes[2]
                        month = month.replace(/^0/, '')
                        date = date.replace(/^0/, '');
                    return year + '年' + month + '月' + date + '日'
                    }
                }
                return ''
            },
    },
    created(){
        this.getData()
    }
}
</script>

<style scoped>
/* changeColorOne{
    color:white;
    background: gray;
    border-radius: 5px;
}
changeColorTwo{
    color:white;
    background: gray;
    border-radius: 5px;
} */

.iconquxiao{
    font-size: 30px;
}
.fbsj{
    text-align: center;
    font-size: 15px;
    line-height: 25px;
}
.p-center{
    font-size: 25px;
    text-align: center;
}
.text{
    border-radius: 5px;
}
.div-center{
    margin-bottom: 20%;
}

.font{
    border-radius: 5px;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 10px;
}
.borderClass {
        position: relative;
        top: -10px;
        display: inline-block;
        width: 100%;
        border-bottom: 1px #000000 dashed;
        margin-bottom: 25px;
    }
.divcen{
    
    height: 30px;
    margin-top: 15px;
}
.divcen ul {
        margin: 0 auto;
        width: 630px;
}
.divcen li {
    border-right: 1px solid;
    padding-right: 15px;
    float: left;
    margin-right: 20px;
    
}
.divcen li:nth-child(3){
    border-right: 0px;
}
.text{
    margin-left: 65px;
}
.content-main{
    height:500px;
    position: relative;
}
.divss{
    font-size: 35px;
    text-align: center;
    padding-top: 10px;
}
#divBox{
    position: absolute;right: 6px;top: 0;z-index: 1000;
}
</style>