<template>
    <div class="dynamicList">
        <el-row>
            <el-col :span="24">
                <div class="content">
                    <p class="title">最新动态</p>
                    <p class="search">
                        <span class="searchVal">
                            <span>名称：</span>
                            <el-input v-model="searchVal" size="medium" placeholder="请输入"></el-input>
                        </span>
                        <span class="button">搜索</span>
                    </p>
                    <div class="common-table">
                        <el-table
                                highlight-current-row
                                max-height="840"
                                :data="allData"
                                @row-click="openTable"
                                stripe
                                style="width: 100%;margin-bottom: 10px;">
                            <el-table-column
                                    prop="type"
                                    label="标签"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="标题"
                                    width="500"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="time"
                                    width="200"
                                    label="发布时间"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="person"
                                    label="发布机构"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="type2"
                                    label="机构类型"
                                    align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- 分页 -->
                    <div class="block" v-if="this.totleLength >= 10">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-size="pagesize"
                                background
                                layout="prev, pager, next"
                                :total="totleLength">
                        </el-pagination>
                    </div>
                    <!-- 分页 -->
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data () {
        return {
            searchVal: '',
            currentPage: 1, // 分页第一页
            pagesize: 8,  // 每页个数
            totleLength: 100, // 获取后台传的所有数据的长度
            allData:[
                {
                    name: '天津麒麟正式更名为麒麟软件 国产操作系统主力军吹响出征号角！',
                    time: '2020-02-26 12:13:13',
                    person: '中国软件',
                    type: '新闻',
                    type2: '公司'
                },
                {
                    name: 'PK生态系列线上公开课已全面上线啦！',
                    time: '2020-02-19 12:23:44',
                    person: '飞腾PHYTIUM',
                    type: '新闻',
                    type2: '公司'
                },
                {
                    name: '助力复工复产，中国系统推出智能体温检测系统',
                    time: '2020-02-18 12:13:00',
                    person: '中国电子',
                    type: '新闻',
                    type2: '公司'
                },
                {
                    name: '2019湖南(长沙)网络安全·智能制造大会震撼来袭！',
                    time: '2019-12-17 12:00:23',
                    person: '湖南发布',
                    type: '新闻',
                    type2: '公司'
                },
                {
                    name: '中国系统打造一体化数字底座 赋能城市治理现代化',
                    time: '2019-11-14 11:23:44',
                    person: '中共陕西省委网信办',
                    type: '新闻',
                    type2: '政府'
                },
                {
                    name: '院士大咖纵论湘江，和你一起共谋网络安全·智能制造发展大计',
                    time: '2019-11-08 12:23:22',
                    person: '湖南省人民政府',
                    type: '新闻',
                    type2: '政府'
                },
                {
                    name: '中国系统打造一体化数字底座 赋能城市治理现代化',
                    time: '2019-11-14 11:23:44',
                    person: '中共陕西省委网信办',
                    type: '新闻',
                    type2: '政府'
                },
                {
                    name: '院士大咖纵论湘江，和你一起共谋网络安全·智能制造发展大计',
                    time: '2019-11-08 12:23:22',
                    person: '湖南省人民政府',
                    type: '新闻',
                    type2: '政府'
                }
            ]
        }
    },
    created() {
    },
    mounted(){
        let val = this.$store.getters.getSidebar;
        console.log(val[val.length - 1])
        if (val[val.length - 1].path !== 'dynamicList') {
            val.push(
                {
                    name: '最新动态',
                    path: 'dynamicList'
                }
            )
            this.$store.commit('changeSidebar', val);
        }
    },
    methods: {
        // 点击表格
        openTable(row) {
            console.log(row)
            this.$router.push({name: 'newsPage'});
        },
        // 点击分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        // 当前页数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val;
        }
    },
    components: {
    },
    watch: {
    }
}
</script>
<style scoped>
    .dynamicList{
        background: #ebf0f8;
        width: 100%;
    }
    .dynamicList .content{
        margin: 40px;
        height: 841px;
        background: #fff;
        overflow: hidden;
    }
    .dynamicList .content .title{
        padding: 30px 0 0 60px;
        font-size: 20px;
        color: #233b6e;
    }
    .dynamicList .content .search{
        margin-top: 36px;
        padding-left: 70px;
        display: flex;
    }
    .dynamicList .content .searchVal{
        width: 245px;
        display: flex;
        font-size: 18px;
        color: #4663a6;
    }
    .dynamicList .content .searchVal>span{
        width: 85px;
        display: inline-block;
        line-height: 34px;
    }
    .dynamicList .content .common-table{
        box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
        border: .5px solid transparent;
        border-radius: 10px;
    }
    .dynamicList>>>.el-input__inner{
        border: 1px solid rgba(8,104,157,.3);
        border-radius: 2px;
        font-size: 18px;
        color: #999;
        height: 34px;
        line-height: 34px;
        width: 180px;
    }
    .dynamicList .content .button{
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background: #4877e6;
        cursor: pointer;
        margin-left: 100px;
        border-radius: 2px;
        color: #fff;
        font-size: 18px;
    }
    .dynamicList .content .button:hover{
        background: rgba(72,119,230,.6);
    }
    .dynamicList .content .common-table{
        margin: 24px 70px 0 70px;
    }
    .dynamicList .content .common-table>>>.el-table th > .cell{
        font-size: 18px;
        color: #333;
        font-weight: normal;
    }
    .dynamicList .content .common-table>>>.el-table th.is-leaf{
        height: 70px;
    }
    .dynamicList .content .common-table>>>.el-table tr{
        cursor: pointer;
        font-size: 18px;
    }
    .dynamicList .content .common-table>>>.el-table{
        color: #233b6e;
    }
    .dynamicList .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
        background-color: #fff;
    }

    .dynamicList .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
        background-color: #f5f8fd;
    }
    .dynamicList .content .common-table>>>.el-table th.is-leaf, .el-table td {
        border-bottom: 1px solid #d5e3ff;
    }
    .dynamicList .content .common-table>>>.el-table__body tr, .el-table__body td {
        padding: 0;
        height: 60px;
        background: #f5f8fd;
    }
    .dynamicList .content .block{
        text-align: right;
        padding: 30px 70px 0 0;
    }
    .dynamicList .content>>>.el-pagination.is-background .el-pager li{
        background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
        color: #fff;
    }
    .dynamicList .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
        background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
        color: #fff;
    }
    .dynamicList .content>>>.el-table td{
        border-bottom: 1px solid #d5e3ff;
    }
    .dynamicList .content>>>.btn-prev,.dynamicList .content>>>.btn-next{
        background: #c5d5f7;
        background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
        color: #fff;
    }
    .dynamicList .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
        color: #C0C4CC;
    }
</style>
