<template>
    <div id="flfgKinds">
        <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-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="20"
                    :current-page="currentPage" :total="total" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
html,
body,
#flfgKinds {
    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;
                    }
                }

                // background-color: #e60012;
                .el-tabs__nav {
                    width: 1655px;
                    margin-left: calc(50% - 827.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';
import { queryLiterature, previewPdf } from "../../api/xxxl/llxx"
export default {
    name: 'flfgKinds',
    data() {
        return {
            activeName: '禁武原则',
            literatureList: [],
            currentPage: 0,
            total: 0,
            selectPane: ''
        }
    },
    methods: {
        handleClick(tab, event) {
            this.queryLiterature(1, 20, this.returnType(tab.name));
            this.selectPane = tab.name;
        },
        queryLiterature(pageNum, pageSize, type) {
            queryLiterature('法律法规', pageNum, pageSize, null, 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) {
            previewPdf('LiteraturePDF', item.name);
        },
        //返回分类缩写
        returnType(type) {
            switch (type) {
                case '禁武原则':
                    return 'jwyz';
                    break;
                case '作战法规':
                    return 'zzfg';
                    break;
                case '惩治战争犯罪':
                    return 'czzzfz';
                    break;
                case '人道主义保护':
                    return 'rdzybh';
                    break;
                case '中立法':
                    return 'zlf';
                    break;
                case '海洋航行规则':
                    return 'hyhxgz';
                    break;
                case '多边条约':
                    return 'dbty';
                    break;
                case '双边条约':
                    return 'sbty';
                    break;
                case '中外双边条约':
                    return 'zwsbty';
                    break;
                case '美国国内法':
                    return 'mggnf';
                    break;
                case '日本国内法':
                    return 'rbgnf';
                    break;
                case '台湾地区法':
                    return 'twdqf';
                    break;
                case '国内法规':
                    return 'gnfg';
                    break;
                case '军内法规':
                    return 'jnfg';
                    break;
                case '业务法规':
                    return 'ywfg';
                    break;
            }
        },
    },
    activated() {
        this.total = 0;
        this.activeName = this.$route.query.id;
        let type = this.returnType(this.activeName);
        this.queryLiterature(1, 20, type);
    }
}
</script>