<template>
  <div>    
    <el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header"  style="font-size: 14px;"
			empty-text="New messages (0)" v-loading="loading">
			<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
			<el-table-column  label="Journals" prop="jabbr" align="center"></el-table-column>
            <el-table-column  label="Number" prop="yboard_count"  align="center"></el-table-column>
            <el-table-column  label="Hindex"  align="center">
                <template slot-scope="scope">
                    <div class="lieitem flexbox">
                    <span>Hindex: <em>{{scope.row.index_num}} / {{ scope.row.yboard_count }}</em></span><br/>
                    <span>Median: <em>{{scope.row.median}}</em></span><br/>
                    <span>Avg: <em>{{scope.row.avg}}</em></span><br/>
                </div>
                </template>
            </el-table-column>
            <!-- <el-table-column  label="平均H指数" prop="H"   align="center"></el-table-column>
            <el-table-column  label="国际化" prop="H"   align="center"></el-table-column>
            <el-table-column  label="不活跃系数" prop="H"   align="center"></el-table-column> -->
            <el-table-column width="160"  align="center">
                <template slot-scope="scope">
                    <router-link :to="{path:'/superYoungScientistList',query:{id:scope.row.journal_id}}">
                    <el-button type="primary" plain >Detail</el-button></router-link>
                </template>
            </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data(){
        return{
            loading:false,
            query: {
					username: localStorage.getItem('U_name'),
					// journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem('ms_journal_alias')) : 0,
					journal: 0,
					name: '',
					state: 0,
					pageIndex: 1,
					pageSize: 10
				},
                tableData:[],
                Total:0,
        }
    },
    created(){
        this.getdata();
    },
    methods:{
        // 获取文章列表数据        
			getdata() {
                this.loading = true
				this.$api
					.post('api/Monitor/getJournalYBoards')
					.then(res => {
                        if(res.code == 0){ 

                            this.tableData = res.data.journals
                        }
                        this.loading = false
					})
					.catch(err => {
						console.log(err);
                        this.loading = false
					});
			},
    }
}
</script>

<style  scoped>
.flexbox{display: flex; justify-content: space-between;}
.lieitem span{
    display: inline-block; width: 30%;
}
.lieitem em{font-style: normal; font-weight: bold; font-size: 14px; color: #409EFF; background: #ecf5ff; border-radius: 10px; padding: 4px;}
    

</style>