<template>
    <div class="container" style="padding-bottom: 50px; width: 100%; height: 100%" v-loading="loading">
        <div style="width: 100%; height: auto">
            <div
                style="
                    width: 100%;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                    background-color: #f4f4f5;
                    padding: 10px;
                    font-size: 12px;
                    color: #909399;
                "
            >
                {{ $t('JournalCitationAnalysis.info') }} : {{ $t('JournalCitationAnalysis.wos') }} /
                {{ $t('JournalCitationAnalysis.all') }}
            </div>
            <el-table :data="dataList" border class="msg-table" empty-text="New Data (0)">
                <el-table-column type="index" label="No." width="55" align="center"></el-table-column>
                <!-- <el-table-column type="index" label="Issn" width="100" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.issn }}
                    </template>
                </el-table-column> -->
                <el-table-column :label="$t('JournalCitationAnalysis.journal')" prop="title"> </el-table-column>
                <el-table-column :label="$t('JournalCitationAnalysis.editor')" width="110" prop="realname"></el-table-column>

                <el-table-column
                    :label="
                        lang == 'en'
                            ? `${$t('JournalCitationAnalysis.cite')} ${getMonthName(month)}`
                            : `${month} 月${$t('JournalCitationAnalysis.cite')}`
                    "
                    width="140"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.cite.month_num }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="
                        lang == 'en' ? `${$t('JournalCitationAnalysis.cite')} ${year}` : `${year} 年${$t('JournalCitationAnalysis.cite')}`
                    "
                    width="130"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.cite.year_num }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="
                        lang == 'en'
                            ? `${$t('JournalCitationAnalysis.cite')} ${p_year}`
                            : `${p_year} 年${$t('JournalCitationAnalysis.cite')}`
                    "
                    width="130"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.cite.pre_year_num }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="
                        lang == 'en'
                            ? `${$t('JournalCitationAnalysis.article')} ${year}`
                            : `${year} 年${$t('JournalCitationAnalysis.article')}`
                    "
                    width="130"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.cite.year_aritlce_num }}
                    </template>
                </el-table-column>
                <el-table-column
                    :label="
                        lang == 'en'
                            ? `${$t('JournalCitationAnalysis.article')} ${p_year}`
                            : `${p_year} 年${$t('JournalCitationAnalysis.article')}`
                    "
                    width="130"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.cite.pre_year_article_num }}
                    </template>
                </el-table-column>
                <el-table-column :label="`${$t('JournalCitationAnalysis.factor')}`" width="80" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" width="" trigger="hover">
                            <div class="SameperiodBox">
                                <p style="margin-bottom: 8px">
                                    <span class="title"
                                        >{{ $t('JournalCitationAnalysis.articleNum') }}&nbsp;:&nbsp;&nbsp;<span
                                            style="color: #006699 !important"
                                            >{{ scope.row.cite.yc_article_num }}
                                        </span></span
                                    >
                                </p>
                                <p>
                                    <span class="title"
                                        >{{ $t('JournalCitationAnalysis.citeNum') }}&nbsp;:&nbsp;&nbsp;<span
                                            style="color: #006699 !important"
                                            >{{ scope.row.cite.yc_cite_num }}
                                        </span></span
                                    >
                                </p>
                            </div>
                            <span slot="reference"
                                >{{ scope.row.cite.yc_if && scope.row.cite.yc_if > 0 ? scope.row.cite.yc_if.toFixed(2) : 0 }}
                            </span>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column :label="`${$t('JournalCitationAnalysis.Sameperiod')} ( ${p_year} )`" width="160" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" width="" trigger="hover">
                            <div class="SameperiodBox">
                                <p style="margin-bottom: 8px">
                                    <span class="title"
                                        >{{ $t('JournalCitationAnalysis.articleNum') }}&nbsp;:&nbsp;&nbsp;<span
                                            style="color: #006699 !important"
                                            >{{ scope.row.cite.yc_article_num_q }}
                                        </span></span
                                    >
                                </p>
                                <p>
                                    <span class="title"
                                        >{{ $t('JournalCitationAnalysis.citeNum') }}&nbsp;:&nbsp;&nbsp;<span
                                            style="color: #006699 !important"
                                            >{{ scope.row.cite.yc_cite_num_q }}
                                        </span></span
                                    >
                                </p>
                            </div>
                            <span slot="reference">{{
                                scope.row.cite.yc_if_q && scope.row.cite.yc_if_q > 0 ? scope.row.cite.yc_if_q.toFixed(2) : 0
                            }}</span>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
const jAtableY = () => import('@/components/common/journalArticleTable');

export default {
    data() {
        return {
            lang: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh',
            loading: false,
            dataList: [],
            p_year: new Date().getFullYear() - 1,
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1
        };
    },
    components: {
        jAtableY
    },
    async created() {
        this.loading = true;

        await this.getTableData();
        this.$forceUpdate();
    },
    methods: {
        getMonthName(month) {
            const months = [
                'January',
                'February',
                'March',
                'April',
                'May',
                'June',
                'July',
                'August',
                'September',
                'October',
                'November',
                'December'
            ];
            return months[month - 1];
        },
        // 获取文章列表数据
        async getTableData() {
            await this.$api
                .post(`api/Monitor/getCiteForChief`, {})
                .then(async (res) => {
                    var that = this;
                    if (res.code == 0) {
                        this.dataList = res.data.data;
                        this.loading = false;
                        console.log('this.dataList at line 48:', this.dataList);
                    }
                })
                .catch((err) => {
                    console.log(err, '989898');
                    this.loading = false;
                });
        }
    }
};
</script>

<style scoped>
.container {
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
}
.refresh {
    position: absolute;
    top: 20px;
    right: 0px;
    z-index: 10;
}
.SameperiodBox {
    font-size: 12px;
}
.SameperiodBox .title {
    margin-right: 10px;
    font-weight: 700 !important;
}
</style>
