<template>
    <div class="policy">
        <div class="container">
            <!-- 面包屑 -->
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>政策法规</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <side-bar :current="current" @change="changeTab" :tabList="tabList" title="政策法规"></side-bar>
                </el-col>
                <el-col :span="20">
                    <div class="right-list">
                        <el-row>
                            <div class="content_title">
                                <span>{{ (tabList[current] || {}).name }}</span>
                            </div>
                        </el-row>
                        <div class="list">
                            <div
                                class="item"
                                v-for="item in list"
                                :key="item.id"
                                @click="$router.push({ name: 'policyArticle', query: { id: item.id } })"
                            >
                                <img class="cover" v-if="item.cover" :src="item.cover" />
                                <div class="info">
                                    <div class="title">{{ item.title }}</div>
                                    <div class="content">
                                        {{ item.content | text }}
                                    </div>
                                    <!-- <div class="time">
                                        {{ item.createdAt }}
                                    </div> -->
                                </div>
                                <div class="time">
                                    {{ item.createdAt }}
                                </div>
                                <!-- <div class="more">
                                    <div>详情</div>
                                    <img src="../assets/icon_arrow_right.png" />
                                </div> -->
                            </div>
                        </div>
                        <div class="pagination-wrapper">
                            <el-pagination
                                @size-change="onSizeChange"
                                @current-change="onCurrentChange"
                                :current-page="page"
                                :page-sizes="[10, 20, 30, 40, 50]"
                                :page-size="pageSize"
                                layout="total, prev, pager, next"
                                :total="totalElements"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import pageableTable from '@/mixins/pageableTable';
import SideBar from '../components/SideBar';
export default {
    // props: ['title'],
    name: 'policy',
    components: { SideBar },
    data() {
        return {
            current: 0,
            tabList: [],
            list: [],
            page: 1,
            pageSize: Number(localStorage.getItem('pageSize') || 20),
            totalPages: 0,
            totalElements: 0
        };
    },
    created() {
        this.$http
            .get('/articleType/all', { size: 10000, query: { parent: '政策法规' }, sort: 'createdAt' })
            .then(res => {
                this.tabList = res.content;
                this.getData();
            });
    },
    methods: {
        getData() {
            this.$http
                .get('/article/all', {
                    size: 10000,
                    sort: 'createdAt,desc',
                    query: { mainType: '政策法规', subType: (this.tabList[this.current] || {}).name, status: 'PASS' }
                })
                .then(res => {
                    this.tableData = res.content;
                    this.totalPages = res.totalPages;
                    this.totalElements = res.totalElements;
                    this.list = res.content;
                });
        },
        policyAll(title) {
            this.search = title;
            this.getData();
        },
        changeTab(id, index, e) {
            this.current = index;
            this.getData();
        },
        onSizeChange(e) {
            localStorage.setItem('pageSize', e);
            this.page = 1;
            this.pageSize = e;
            this.getData();
        },
        onCurrentChange(e) {
            this.$router
                .replace({
                    query: {
                        ...this.$router.query,
                        page: e
                    }
                })
                .catch(_ => {});
            this.page = e;
            this.getData();
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
}
.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}
.right-list {
    margin-left: 20px;
    .content_title {
        height: 60px;
        line-height: 60px;
        box-sizing: border-box;
        padding-bottom: 20px;
        border-bottom: #f2f3f5 1px solid;
        > span {
            font-size: 16px;
            color: #000000;
            line-height: 30px;
            font-weight: 700;
        }
    }
    .list {
        padding: 10px 0;
        .item {
            padding: 10px 0;
            position: relative;
            .flex();
            align-items: flex-start;
            cursor: pointer;
            .cover {
                width: 138px;
                min-width: 138px;
                height: 98px;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                margin-right: 15px;
            }
            .info {
                width: 620px;
                height: 98px;
                .flex-col();
                align-items: flex-start;
                flex-grow: 1;
                .title {
                    font-size: 15px;
                    font-weight: bold;
                    color: black;
                    line-height: 21px;
                }
                .content {
                    font-size: 13px;
                    color: @text3;
                    line-height: 18px;
                    .ellipsisLn(3);
                    margin-top: 4px;
                }
            }
            .time {
                margin-top: 25px;
                margin-left: 10px;
                font-size: 14px;
                color: @text3;
            }
            // .more {
            //     .flex();
            //     justify-content: center;
            //     width: 66px;
            //     height: 30px;
            //     background: @border;
            //     position: absolute;
            //     top: 39px;
            //     right: 0;
            //     cursor: pointer;
            //     user-select: none;
            //     > div {
            //         color: @text3;
            //         font-size: 14px;
            //     }
            //     > img {
            //         width: 16px;
            //         margin: 2px;
            //     }
            // }
        }
    }
}
</style>
