<template>
    <div class="newsList">
        <div class="container">
            <!-- 面包屑 -->
            <el-row>
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/news' }">新闻动态</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ tabName }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <el-row class="content">
                <el-col :span="4">
                    <side-bar
                        :current="current"
                        v-if="current !== 2"
                        @change="changeTab"
                        :tabList="tabList"
                        :title="barTitle"
                    >
                    </side-bar>
                </el-col>
                <el-col :span="20">
                    <!-- 热点推荐 -->

                    <div v-if="current == 0" class="content_r">
                        <hot></hot>
                    </div>

                    <div v-if="current == 1" class="content_r index02">
                        <topic></topic>
                    </div>

                    <div v-if="current == 2" class="content_r index02">
                        <qusetion></qusetion>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import SideBar from '../components/SideBar';
import hot from '../components/news/hot';
import Topic from '../components/news/topic';
import qusetion from '../components/news/qusetion';
export default {
    components: { SideBar, hot, Topic, qusetion },
    name: 'newsList',
    data() {
        return {
            currentPage: 1,
            barTitle: '新闻动态',
            current: 0,
            tabList: [
                { id: 0, name: '热点推荐' },
                { id: 1, name: '行业动态' }
            ]
        };
    },
    computed: {
        tabName() {
            let info = [...this.tabList].find(item => {
                return item.id === this.current;
            });
            return info ? info.name : '';
        }
    },
    methods: {
        changeTab(index, e) {
            this.current = index;
        }
    },
    mounted() {
        if (this.$route.query.myTab) {
            let myTab = this.$route.query.myTab;
            this.current = myTab - 0;
            // console.log(typeof myTab);
        }
    }
};
</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;
    }
}
.content {
    .content_r {
        margin-left: 20px;
        padding: 0 40px 40px;
        background-color: #fff;
        box-sizing: border-box;
        // min-height: 829px;
        // height: 900px;
    }
}
</style>
