<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)" size="mini">
                <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 }}
 <el-button
                            size="mini"
                            type="primary"
                            plain
                            icon="el-icon-edit"
                            @click="openDrawer(scope.row, 'currentMonth')"
                            style="margin-left: 10px; padding: 4px; float: right"
                            > {{ $t('JournalCitationAnalysis.edit') }}</el-button
                        >
                       
                        <!-- <el-button type="primary" size="mini" @click="openDrawer(scope.row)" style="">
                          
                        </el-button> -->
                        <!-- <p
                            style="padding: 0px 6px;display: inline-block;cursor: pointer; color: #409eff; background: #ecf5ff; border: 1px solid #b3d8ff"
                           
                        >
                            {{ scope.row.cite.month_num }}
                        </p> -->
                    </template>
                </el-table-column>

                <el-table-column
                    :label="
                        lang == 'en'
                            ? `${$t('JournalCitationAnalysis.cite')} ${getMonthName(lastMonth)}${
                                  lastMonth == 12 ? ' ' + lastMonthYear : ''
                              }`
                            : `${lastMonth == 12 ? lastMonthYear + '年' : ''}${lastMonth} 月${$t('JournalCitationAnalysis.cite')}`
                    "
                    width="200"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.cite.p_month_num }}
                        <el-button
                            size="mini"
                            type="primary"
                            plain
                            icon="el-icon-edit"
                            @click="openDrawer(scope.row, 'lastMonth')"
                            style="margin-left: 10px; padding: 4px; float: right"
                            > {{ $t('JournalCitationAnalysis.edit') }}</el-button
                        >
                        
                        <!-- <el-button type="primary" size="mini" @click="openDrawer(scope.row)" style="">
                          
                        </el-button> -->
                        <!-- <p
                            style="padding: 0px 6px;display: inline-block;cursor: pointer; color: #409eff; background: #ecf5ff; border: 1px solid #b3d8ff"
                           
                        >
                            {{ scope.row.cite.month_num }}
                        </p> -->
                    </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="70" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.cite.yc_if && scope.row.cite.yc_if > 0 ? scope.row.cite.yc_if.toFixed(2) : 0 }}
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-drawer :title="drawerTitle" :visible.sync="drawer" direction="rtl" :before-close="handleClose" size="78%">
            <div style="padding: 0 20px; box-sizing: border-box">
                <el-table
                size="mini"
                    v-loading="JournalListLoad"
                    height="88vh"
                    :data="JournalList"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    empty-text="New messages (0)"
                >
                    <el-table-column label="No." align="center" width="50">
                        <template slot-scope="scop">
                            {{ scop.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" :label="$t('JournalCitationAnalysis.ArticleInfo')">
                        <template slot-scope="scope">
                            <p style="padding: 0px 8px;">
                                <span style="font-size: 14px; color: #006699; font-weight: 500">Doi : </span>
                                <span style="font-size: 13px; color: #006699 !important; font-weight: 500; margin-left: 5px">{{
                                    scope.row.doi
                                }}</span>

                                <span style="float: right" v-if="scope.row.stage_info">
                                    <span style="font-size: 13px; font-weight: 500; color: #006699"
                                        >{{ $t('paperArticleCount.Periodroll') }} :
                                    </span>

                                    <span style="font-size: 13px; color: #006699">( {{ scope.row.stage_info }} )</span>
                                </span>
                            </p>
                            <p style="color: #333; margin-bottom: 15px;padding: 0px 8px;">
                                <!-- <span style="font-size: 14px; font-weight: 600">Tiltle : </span> -->

                                <span style="font-size: 14px;font-weight: bold;"> {{ scope.row.title }}</span>
                            </p>

                            <div
                                style="
                                    background-color:#aaaaaa30;
                                    padding: 4px 8px;
                                    box-sizing: border-box;
                                    border-radius: 4px;
                                "
                            ><p>
                                    <span style="font-size: 14px; color: #333; font-weight: 500">Doi : </span>
                                    <span style="font-size: 13px; color: #333 !important; font-weight: 500; margin-left: 5px">{{
                                        scope.row.article_doi
                                    }}</span>

                                    <span style="float: right">
                                        <span style="font-size: 13px; font-weight: 500; color: #888"
                                            >{{ $t('paperArticleCount.Periodroll') }} :
                                        </span>

                                        <span style="font-size: 13px; color: #888">( {{ scope.row.vol }} )</span>
                                    </span>
                                </p>
                                <p style="color: #333; margin-bottom: 4px">
                                    <!-- <span style="font-size: 14px; font-weight: 600">Tiltle : </span> -->

                                    <span style="font-size: 13px;font-weight: bold;"> {{ scope.row.article_name }}</span>
                                </p>
                                <p style="color: #333; margin-bottom: 4px;line-height: 14px;margin-top: 10px;" v-if="scope.row.author">
                                    <span style="font-size: 14px; color: #888; font-weight: 500">Author : </span>

                                    <span style="font-size: 14px;color: #888;"> {{ scope.row.author }}</span>
                                </p>
                                
                            </div>
                            <p style="margin-top: 10px;padding: 0px 8px;">
                                <span style="font-size: 13px; font-weight: 500; color: #333; margin-right: 10px"
                                    >Email sending statistics :
                                </span>
                                <span style="margin-right: 10px"
                                    >Success:
                                    <span style="color: rgb(103, 194, 58); font-size: 14px">
                                        {{ !scope.row.email_success ? 0 : scope.row.email_success }}
                                    </span>
                                </span>
                                <span
                                    >Fail:<span style="color: #cb160a; font-size: 14px">
                                        {{ !scope.row.email_fail ? 0 : scope.row.email_fail }}
                                    </span></span
                                >
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('citeList.is_wos')" width="80" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_wos == 0">{{ $t('citeList.is_china0') }}</span>
                            <p v-if="scope.row.is_wos == 1">{{ $t('citeList.yes') }}</p>
                            <p v-if="scope.row.is_wos == 2">{{ $t('citeList.no') }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('citeList.is_china')" width="80" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.is_china == 0">{{ $t('citeList.is_china0') }}</span>
                            <p v-if="scope.row.is_china == 1">{{ $t('citeList.yes') }}</p>
                            <p v-if="scope.row.is_china == 2">{{ $t('citeList.no') }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('citeList.factor')" width="70" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.factor ? scope.row.factor : '' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="" width="70" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="addCite(scope.row)" type="primary">Edit</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>
        <common-cite-list
            ref="commonCiteList"
            :doiInfo="this.doiInfo"
            :monthType="monthType"
            :journal="currentData"
            @refresh="getJournalList"
        ></common-cite-list>
    </div>
</template>

<script>
const jAtableY = () => import('@/components/common/journalArticleTable');
const commonCiteList = () => import('@/components/page/components/JournalCitationAnalysis/citeList.vue');
// 获取当前日期

export default {
    data() {
        return {
            drawerTitle: '',
            drawer: false,
            lang: !localStorage.getItem('langs') || localStorage.getItem('langs') == 'en' ? 'en' : 'zh',
            loading: false,
            dataList: [],
            JournalList: [],
            JournalListLoad: false,
            currentData: {},
            doiInfo: {},
            p_year: new Date().getFullYear() - 1,
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            lastMonth: '',
            lastMonthYear: ''
        };
    },
    components: {
        jAtableY,
        commonCiteList
    },
    async created() {
        const currentDate = new Date();
        // 获取上个月的年份

        // 获取上个月的月份（注意：月份是从0开始计数的，所以需要加1）
        const lastMonth = currentDate.getMonth();

        if (lastMonth === 0) {
            console.log('lastMonth at line 270:', lastMonth);

            this.lastMonth = 12;
            this.lastMonthYear = currentDate.getFullYear() - 1;
        } else {
            this.lastMonth = lastMonth;
            this.lastMonthYear = currentDate.getFullYear();
        }

        this.loading = true;

        await this.getTableData();
        this.$forceUpdate();
    },
    methods: {
        addCite(data) {
            console.log('this.currentData at line 221:', this.currentData);
            console.log('data at line 220:', data);
            this.doiInfo = {
                doi: data.article_doi,
                is_china: data.is_china,
                is_wos: data.is_wos,
                factor: data.factor,
                article_id: data.article_id,
                article_title: data.article_name,
                journal_title: data.journal_name,
                author: data.author,
                vol: data.vol,
                article_cite_id: data.article_cite_id
            };
            this.$nextTick(() => {
                this.$refs.commonCiteList.showDialogSpecial();
            });

            // this.$router.push({
            //     name: 'publishRefernceEditor',
            //     query: {
            //         id: this.articleId,
            //         pid: this.UpHtpFIle.p_article_id
            //     }
            // });
        },
        getJournalList(month) {
            console.log('month at line 314:', month);
            this.JournalListLoad = true;
            this.JournalList = [];

            this.$api
                .post(month == 'currentMonth' ? 'api/Monitor/getCiteListForEditorMonth' : 'api/Monitor/getCiteListForEditorPMonth', {
                    issn: this.currentData.issn
                })
                .then(async (res) => {
                    this.JournalListLoad = false;
                    if (res.code == 0) {
                        this.JournalList = res.data.list;
                        console.log('this.AssociatedJournalList at line 234:', this.AssociatedJournalList);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.JournalListLoad = false;
                    this.$message.error(err);
                });
        },
        openDrawer(data, month) {
            console.log('month at line 335:', month);
            this.monthType = month;
            this.currentData = data;
            if (this.currentData) {
                if (month == 'currentMonth') {
                    this.drawerTitle = `${this.currentData.title}  ${
                        this.lang == 'en'
                            ? this.$t('JournalCitationAnalysis.cite') + this.getMonthName(this.month)
                            : this.month + '月' + this.$t('JournalCitationAnalysis.cite')
                    } ( ${this.currentData.cite.month_num} )`;
                } else {
                    this.drawerTitle = `${this.currentData.title}  ${
                        this.lang == 'en'
                            ? `${this.$t('JournalCitationAnalysis.cite')} ${this.getMonthName(this.lastMonth)}${
                                  this.lastMonth == 12 ? ' ' + this.lastMonthYear : ''
                              }`
                            : `${this.lastMonth == 12 ? this.lastMonthYear + '年' : ''}${this.lastMonth} 月${this.$t(
                                  'JournalCitationAnalysis.cite'
                              )}`
                    } ( ${this.currentData.cite.p_month_num} )`;
                }
            }

            this.drawer = true;
            this.getJournalList(month);
        },
        handleClose() {
            this.drawer = false;
        },
        getMonthName(month) {
            console.log('month at line 344:', 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/getCiteForEditor`, {
                    user_id: localStorage.getItem('U_id')
                })
                .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;
}
</style>
