<template>
    <div id="llxxKinds">
        <div class="head">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基础知识" name="基础知识">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="理论研究" name="理论研究">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="经典战教训" name="经典战教训">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="地缘政治" name="地缘政治">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="政情社情" name="政情社情">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="话语体系" name="话语体系">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="重要文件" name="重要文件">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="前沿技术" name="前沿技术">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
                <el-tab-pane label="人文社科" name="人文社科">
                    <table>
                        <thead>
                            <tr>
                                <td>文件名</td>
                                <td>上传时间</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in literatureList">
                                <td v-text="item.originName" @click="viewLiterature(item)"></td>
                                <td v-text="item.createTime"></td>
                            </tr>
                        </tbody>
                    </table>
                </el-tab-pane>
            </el-tabs>
            <div class="pagination-div">
                <el-pagination class="myPagination" background layout="prev, pager, next" :page-size="100" :current-page="currentPage" :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
html,
body,
#llxxKinds {
    width: 100%;
    height: 100%;
    color: white;
    overflow: hidden;
    background-image: url(../../assets/img/main/background.png);
    background-size: 100% 100%;
    .head {
        width: 100%;
        float: flex;
        margin: 0 auto;
        .el-tabs {
            .el-tabs__header {
                height: 60px;
                .el-tabs__nav-wrap {
                    &::after {
                        display: none;
                    }
                }
                .el-tabs__nav {
                    width: 923px;
                    margin-left: calc(50% - 461.5px);
                    padding-top: 10px;
                    box-sizing: border-box;
                    .el-tabs__active-bar {
                        display: none;
                    }
                    .el-tabs__item {
                        height: 30px;
                        line-height: 30px;
                        margin-left: 5px;
                        color: white;
                        background-image: url(../../assets/img/yqjc/22.png);
                        background-size: 100% 100%;
                        &:hover {
                            font-weight: bold;
                            color: #0dada7;
                            text-decoration: underline;
                        }
                        &:nth-child(2) {
                            padding-left: 20px;
                        }
                        &:last-child {
                            padding-right: 20px;
                        }
                    }
                    .is-active {
                        font-weight: bold;
                        color: #0dada7;
                        text-decoration: underline;
                    }
                }
            }
            .el-tabs__content {
                width: 1264px;
                height: calc(100% - 130px);
                margin-left: calc(50% - 632px);
                .el-tab-pane {
                    width: 100%;
                    height: 100%;
                    table {
                        width: 100%;
                        height: 100%;
                        text-align: center;
                        thead {
                            display: table;
                            width: 100%;
                            table-layout: fixed;
                            tr {
                                height: 50px;
                                color: white;
                                text-align: center;
                                background-image: url(../../assets/img/flfg/title.png);
                                background-size: 100% 100%;
                                td {
                                    &:first-child,
                                    &:last-child {
                                        width: 180px;
                                        text-align: center;
                                    }
                                }
                            }
                        }
                        tbody {
                            height: calc(100% - 50px);
                            display: block;
                            overflow-y: scroll;
                            -webkit-overflow-scrolling: touch;
                            &::-webkit-scrollbar {
                                display: none; // 隐藏滚动条
                            }
                            tr {
                                display: table;
                                width: 100%;
                                border-bottom: 1px solid #185066;
                                table-layout: fixed;
                                td {
                                    color: white;
                                    &:first-child:hover {
                                        cursor: pointer;
                                        font-weight: bold;
                                        color: #0dada7;
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .pagination-div {
            width: 1264px;
            height: 50px;
            margin-left: calc(50% - 632px);

            .el-pagination {
                margin-top: 9px;
                text-align: right;
            }
            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }
        }
    }
}
</style>

<script>
import { get, post } from '../../util/http_util';
export default {
    name: 'llxxKinds',
    data() {
        return {
            activeName: '基础知识',
            currentPage: 0,
            total: 0,
            literatureList:[],
            selectPane:''
        }
    },
    methods: {
        handleClick(tab, event) {
            this.queryLiterature(1, 20, this.returnType(tab.name));
            this.selectPane = tab.name;
        },
        queryLiterature(pageNum, pageSize, type) {
            get('api/rest/document/queryLiterature?module=学习训练&pageNum=' + pageNum + '&pageSize=' + pageSize + '&folder=' + type).then(res => {
                this.literatureList = res.list;
                this.total = res.totals;
            });
        },
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.queryLiterature(1, 20, this.returnType(this.selectPane));
        },
        handleClose(done) {
            done();
        },
        //以pdf形式预览
        viewLiterature(item) {
            window.open('api/rest/document/viewLiterature/' + item.folder + '/' + item.name);
        },
        //返回分类缩写
        returnType(type) {
            switch (type) {
                case '基础知识':
                    return 'jczs';
                    break;
                case '理论研究':
                    return 'llyj';
                    break;
                case '经典战教训':
                    return 'jdzjx';
                    break;
                case '地缘政治':
                    return 'dyzz';
                    break;
                case '政情社情':
                    return 'zqsq';
                    break;
                case '话语体系':
                    return 'hytx';
                    break;
                case '重要文件':
                    return 'zywj';
                    break;
                case '前沿技术':
                    return 'qyjs';
                    break;
                case '人文社科':
                    return 'rwsk';
                    break;
            }
        },
    },
    activated() {
        this.total = 0;
        this.activeName = this.$route.query.id;
        let type = this.returnType(this.activeName);
        this.queryLiterature(1, 20, type);
    }
}
</script>