<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10" v-show="userrole=='reviewer'||userrole==1">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>{{$t('home.authortop')}}</span>
                    </div>
                    <div class="top-content">
                        <span>
                            <p>Welcome to the TMR Publishing Group online manuscript submission and tracking system.</p>
                            <p>Please go through our instructions for authors before submitting.</p>
                            <p><el-link type="primary" href="/articleAdd">Click here</el-link> to submit your manuscript.</p>
                            <el-divider></el-divider>
                            <p>If you experience any problems, please contact us by publisher@tmrjournals.com</p>
                        </span>
                    </div>
                    
                    <!-- <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button> -->
                </el-card>
            </el-col>
            <el-col :span="14">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <el-badge 
                        :value="this.usermsgList.length" 
                        :hidden="this.usermsgList.length>0?false:true" 
                        class="item"
                        >
                        <span>{{$t('home.usermsg')}}</span>
                        </el-badge>
                    </div>
                    <el-table 
                    :data="usermsgList" 
                    border
                    class="msg-table"
                    >
                        <el-table-column label="Date" width="150" :formatter="dateFormate" prop="ctime"></el-table-column>
                        <el-table-column label="Message" prop="content"></el-table-column>
                        <el-table-column label="" width="80" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="show(scope.row)"
                        >To See</el-button>
                    </template>
                </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <!--<el-col :span="12">
                 <el-card shadow="hover">
                    <div>
                    <span>add article</span>
                    <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button>
                    </div>
                    <div>
                    <span>add article</span>
                    <el-button size="medium " type="primary" @click="goaddarticle" >add article</el-button>
                    </div>
                </el-card> 
            </el-col>-->
        </el-row>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            userrole: localStorage.getItem('ms_userrole'),
            userdata: '',
            usermsgList: []
        };
    },
    created: function () {
        // this.getUserdata();
        this.initUserMsg();
    },
    components: {
        Schart
    },
    computed: {
        role() {
            let frag = 'dads';
            switch (this.userrole) {
                case '1':
                    frag = this.$t('total.author');
                    break;
                case '2':
                    frag = this.$t('total.editor');
                    break;
                case 'reviewer':
                    frag = this.$t('total.reviewers') + ' & ' + this.$t('total.author');
                    break;
                case 'admin':
                    frag = this.$t('total.admin');
                    break;
            }
            return frag;
        },
        my_login_time() {
            return this.formatDate(this.userdata.last_login_time);
        }
    },
    methods: {
        // getUserdata() {
        //     this.$api
        //         .post('api/user/getUserdata', {'account':this.name})
        //         .then(res=>{
        //             if(res.code==0){
        //                 this.userdata = res.data;
        //             }else{
        //                 this.$message.error('get userinfo error');
        //                 console.log('error getuserdata');
        //             }
        //         })
        //         .catch(err=>{
        //         });
        // },
        initUserMsg() {
            this.$api.post('api/User/getUserMsg', { account: this.name }).then((res) => {
                this.usermsgList = res;
            });
        },
        dateFormate(row, column, cellValue, index) {
            return this.formatDate(cellValue);
        },
        show(row){
            this.$api.post('api/User/changeMsgState',{id:row.user_msg_id})
            .then(res=>{
                this.initUserMsg();
                this.$router.push(row.url);
            });
        },
        formatDate(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + ' ' + h + ':' + m + ':' + s;
        },
        goaddarticle(){
            this.$router.push('/articleAdd');
        }
    }
};
</script>


<style scoped>
.msg-table{
    text-align: center;
}
.add-button{
    display: block;
    margin: 50px auto;
}
.top-content{
    padding: 2px;
}
.top-content span{
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    padding: 2px;
    font-size: 14px;
    line-height: 1.5;
}
</style>
