<template>
    <div class="home">
        <el-row :gutter="20">
            <el-col :span="12">
                <div style="position:relative">
                    <el-carousel class="banners" height="360px" @change="onCarouselChange">
                        <el-carousel-item v-for="item in banners" :key="item.title">
                            <el-image class="banner-item" :src="item.cover" fit="cover"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="pagination">{{ banners[bannerIndex] ? banners[bannerIndex].title : '' }}</div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="news-container">
                    <div class="tabs">
                        <div class="tab" :class="{ active: tab === 1002 }" @click="tab = 1002">热点推荐</div>
                        <div class="tab" :class="{ active: tab === 1003 }" @click="tab = 1003">新闻资讯</div>
                        <div class="tab" :class="{ active: tab === 1004 }" @click="tab = 1004">行业动态</div>
                        <div class="more" @click="$router.push({ name: 'news' })">
                            <span>更多</span>
                            <img src="../assets/icon_arrow_right.png" />
                        </div>
                    </div>
                    <div class="list">
                        <div
                            class="row"
                            v-for="item in news"
                            :key="item.id"
                            @click="$router.push({ name: 'article', query: { id: item.id } })"
                        >
                            <div class="name">
                                {{ item.title }}
                            </div>
                            <div class="time">{{ item.createdAt }}</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="width: 46px">
            <el-col>
                <p class="tz">通知</p>
            </el-col>
        </el-row>
        <el-row :gutter="30" style="margin-top:30px">
            <el-col :span="8">
                <div class="card">
                    <img src="../assets/title_1.jpg" class="title-img" />
                    <div class="list">
                        <div class="row" v-for="n in 4" :key="n" @click="$router.push({ name: 'article' })">
                            <div class="name">
                                习近平在江西考察并主持召开推动中部地区崛起工作座谈会习近平在江西考察并主持召开推动中部地区崛起工作座谈会
                            </div>
                            <div class="time">05.23</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="card">
                    <img src="../assets/title_2.jpg" class="title-img" />
                    <div class="list">
                        <div class="row" v-for="n in 4" :key="n" @click="$router.push({ name: 'article' })">
                            <div class="name">
                                习近平在江西考察并主持召开推动中部地区崛起工作座谈会习近平在江西考察并主持召开推动中部地区崛起工作座谈会
                            </div>
                            <div class="time">05.23</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="card">
                    <img src="../assets/title_3.jpg" class="title-img" />
                    <div class="list">
                        <div class="row" v-for="n in 4" :key="n" @click="$router.push({ name: 'article' })">
                            <div class="name">
                                习近平在江西考察并主持召开推动中部地区崛起工作座谈会习近平在江西考察并主持召开推动中部地区崛起工作座谈会
                            </div>
                            <div class="time">05.23</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div style="margin-top:30px;font-size:16px;font-weight:bold;">友情链接</div>
    </div>
</template>

<script>
export default {
    name: 'home',
    data() {
        return {
            banners: [],
            bannerIndex: 0,
            tab: 1002,
            news: [],
            top: null
        };
    },
    created() {
        this.$http.get('/article/all', { query: { typeId: 1006 }, size: 1, sort: 'createdAt,desc' }).then(res => {
            if (res.content[0]) {
                var tmp = document.createElement('DIV');
                tmp.innerHTML = res.content[0].content;
                res.content[0].bref = (tmp.textContent || tmp.innerText || '').trim();
                this.top = res.content[0];
            }
        });
        this.$http.get('/article/all', { query: { typeId: 1005 } }).then(res => {
            this.banners = res.content;
        });
        this.getNews();
    },
    methods: {
        onCarouselChange(e) {
            this.bannerIndex = e;
        },
        getNews() {
            this.$http.get('/article/all', { query: { typeId: this.tab }, size: 4 }).then(res => {
                this.news = res.content;
            });
        }
    },
    watch: {
        tab() {
            this.getNews();
        }
    }
};
</script>
<style lang="less" scoped>
.banners {
    height: 360px;
    .banner-item {
        width: 100%;
        height: 360px;
    }
}
.pagination {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 36px;
    line-height: 36px;
    color: white;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.24);
    padding: 0 12px;
    z-index: 2;
    .ellipsis();
}
.news-container {
    height: 360px;
    padding: 14px;
    box-sizing: border-box;
    background: white;
    .title {
        color: @prim;
        font-size: 19px;
        font-weight: bold;
        text-align: center;
        .ellipsis();
        cursor: pointer;
    }
    .content {
        color: @text3;
        font-weight: 400;
        line-height: 24px;
        .ellipsisLn(3);
        margin-top: 10px;
        cursor: pointer;
    }
    .tabs {
        border-bottom: 1px solid @border;
        margin-top: 14px;
        position: relative;
        .tab {
            display: inline-block;
            width: 102px;
            height: 44px;
            line-height: 44px;
            color: black;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            &.active {
                color: @prim;
            }
        }
        .more {
            color: @text3;
            font-size: 13px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            height: 44px;
            line-height: 44px;
            cursor: pointer;
            > * {
                vertical-align: middle;
                display: inline-block;
            }
            img {
                width: 16px;
                height: 16px;
                margin-left: 2px;
            }
        }
    }
    .list {
        padding: 10px 0;
        .row {
            height: 40px;
            .flex();
            font-size: 14px;
            padding-left: 12px;
            position: relative;
            cursor: pointer;
            .name {
                color: black;
                flex-basis: 0;
                flex-grow: 1;
                margin-right: 14px;
                .ellipsis();
            }
            .time {
                color: @text3;
            }
            &::after {
                content: '';
                width: 4px;
                height: 4px;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 2px;
                background: @border;
            }
        }
    }
}
.card {
    background: white;
    .title-img {
        width: 380px;
        height: 138px;
    }
    .list {
        padding: 12px 10px;
        .row {
            height: 40px;
            .flex();
            font-size: 14px;
            padding-left: 12px;
            position: relative;
            cursor: pointer;
            .name {
                color: black;
                flex-basis: 0;
                flex-grow: 1;
                margin-right: 14px;
                .ellipsis();
            }
            .time {
                color: @text3;
            }
            &::after {
                content: '';
                width: 4px;
                height: 4px;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 2px;
                background: @border;
            }
        }
    }
    .tg {
        width: 1200px;
        height: 46px;
        background: #f7f8fa;
    }
    .tz {
        width: 24px;
        height: 16px;
        font-size: 12px;
        color: red;
        line-height: 16px;
    }
}
</style>
<style lang="less">
.home {
    .el-carousel__indicators--horizontal {
        bottom: 36px;
    }
}
</style>
