<template>
    <div>
        <!-- 期刊下拉菜单 -->
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-notebook-1"></i> <span class="top_dao"> Accepted manuscript</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container_l">
            <!-- 期刊下拉菜单 -->
            <el-select
                v-model="query.journal_id"
                filterable
                placeholder="Please select a journal"
                @change="handlejournal"
                style="width: 350px"
            >
                <el-option
                    v-for="item in cate_jour"
                    :key="item.journal_id"
                    :label="item.title"
                    :value="item.journal_id"
                ></el-option> </el-select
            ><br /><br />
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card class="box-card">
                        <el-table
                            :data="tableData2"
                            border
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                            empty-text="New messages (0)"
                        >
                            <el-table-column prop="state" label="Status" width="130" align="center">
                                <template slot-scope="scope">
                                    <el-tag type="info" v-if="scope.row.state == 0">Received</el-tag>
                                    <el-tag type="info" v-if="scope.row.state == 1">With editor</el-tag>
                                    <el-tag type="info" v-if="scope.row.state == 2">Under review</el-tag>
                                    <el-tag type="info" v-if="scope.row.state == 3">Reject</el-tag>
                                    <el-tag type="info" v-if="scope.row.state == 4">Revision</el-tag>
                                    <el-tag type="info" v-if="scope.row.state == 5">Accept</el-tag>
                                    <el-tag type="info" v-if="scope.row.state == 6">Pre-accept</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="title" label="Title"></el-table-column>
                            <!-- <el-table-column prop="journal_title" label="Journal name"></el-table-column> -->
                            <!-- <el-table-column label=" " width="100" align="center">
								<template slot-scope="scope">
									<router-link :to="{path:'/edit_text_ls',query:{Art_id:scope.row.article_id}}">
										<el-button type="primary" plain>Detail</el-button>
									</router-link>
								</template>
							</el-table-column> -->
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                layout="total, prev, pager, next"
                                :current-page="page.pageIndex"
                                :page-size="page.pageSize"
                                :total="Total"
                                @current-change="handlePageChange"
                                class="revi_pag_sty"
                            >
                            </el-pagination>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            Total: 0,
            Direct_log: this.$route.query.act,
            query: {
                user_id: localStorage.getItem('U_id')
            },
            tableData2: [],
            link_Tota2: 0,
            cate_jour: [],
            page: {
                pageIndex: 1,
                pageSize: 10
            }
        };
    },
    mounted() {},
    created() {
        if (this.Direct_log == null) {
            this.getTable();
        } else {
            this.$api
                .post('api/Chief/autoLoginForChief ', {
                    code: this.Direct_log
                })
                .then((res) => {
                    if (res.code == 0) {
                        localStorage.setItem('U_role', res.data.roles);
                        localStorage.setItem('U_name', res.data.user.account);
                        localStorage.setItem('U_id', res.data.user.user_id);
                        localStorage.setItem('U_relname', res.data.userinfo.realname);
                        this.getTable();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        }
    },
    methods: {
        handlePageChange(val) {
            this.$set(this.page, 'pageIndex', val);
            this.getData();
        },

        // 获取数据
        getTable() {
            this.$api
                .post('api/Board/getBoardJournals', this.query)
                .then((res) => {
                    if (res.code == 0) {
                        this.cate_jour = res.data.journals;
                        this.query.journal_id = this.cate_jour[0].journal_id;

                        this.getData();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        getData() {
			const loading = this.$loading({
							lock: true,
							text: 'Loading...',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});	
            this.$api
                .post('api/Board/getBoardHistArticles', { ...this.query, ...this.page })
                .then((res) => {
					loading.close()
                    if (res.code == 0) {
                        for (let i = 0; i < res.data.articles.length; i++) {
                            let date = new Date(parseInt(res.data.articles[i].ctime) * 1000);
                            let Y = date.getFullYear() + '-';
                            let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                            let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                            res.data.articles[i].ctime = Y + M + D;
                        }
                        this.tableData2 = res.data.articles;
                        this.Total = res.data.count;
                    } else {
                        this.$message.error(res.msg);
                    }
					
                })
                .catch((err) => {
					loading.close()
                    this.$message.error(err);
                });
        },

        // 期刊下拉菜单点击
        handlejournal() {
            this.page.pageIndex = 1;

            this.getData();
        }
    },
    watch: {}
};
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}
</style>
