<template>
    <div class="client-newsInfor-page">
        <!-- 新闻资讯banner栏 -->
         <div class="newsInfor-banner"></div>

        <!-- 新闻资讯 -->
        <ul class="newsInfor-menu-ul">
            <li :class="{'active':clicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in homeNewsClassify ">{{item.name}}</li>
        </ul>
        <div class="client-container newsInfor-content-box">
            <ul class="newsInfor-content-ul">
                <li v-for="(item,index) in newsList  " :key="index">
                    <img :src=" item.pic ||newsInforImg" alt="行业动态">
                    <div class="newsInfor-list-content">
                        <h5>{{item.title}}</h5>
                        <div><i></i><span>{{item.startTime}}</span><i type="visits"></i><span>{{item.visits}}</span>
                        </div>
                        <p>{{item.intro}}</p>
                        <a @click="checkInfo(item)">了解更多</a>
                    </div>
                </li>
            </ul >
            <div class="client-el-pagination">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        :total="totalLists">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
    import MtaBreadcrumb                          from '@/components/client/common/MtaBreadcrumb.vue';
    import { homeNewsList, homeNewsClassifyList } from '@/api/login.js';

    export default {
        name:       'newsInfor',
        props:      {},
        data() {
            return {
                clicked:0,
                newsClassifyId:   null,
                newsInforImg:     require(`@/assets/images/client/newsInfor/newsInfor-list-img.png`),
                newsList:         [], //后端返回的数组
                homeNewsClassify: [],
                totalLists:         0,
                currentPage:        1,
                pageSize:           5,
            };
        },
        components: {
            MtaBreadcrumb,
        },
        computed:   {},
        methods:    {
            handleCurrentChange(val){
                this.currentPage = val;
                this.getMessage();

            },
            tabSwitch(data,index){
                this.clicked = index
                this.newsClassifyId = data.newsClassifyId
                this.getMessage();

            },
            getMessage() {
                let req = {
                    newsClassifyId:  this.newsClassifyId,
                    page:           this.currentPage,
                    size:            this.pageSize,
                };
                homeNewsList(req).then(res => {
                    if (res.code === 0) {
                        this.newsList = res.data.data;
                        this.totalLists = res.data.total
                    }
                });

            },
            getHomeNewsClassify() {
                homeNewsClassifyList().then(res => {
                    if (res.code === 0) {
                        this.homeNewsClassify = res.data;
                        this.newsClassifyId = res.data[0].newsClassifyId
                        this.getMessage(res.data[0].newsClassifyId);
                    }
                });

            },
            checkInfo(data) {
                this.$router.push({ name: 'newsInforDetails', params: data });
            },
        },
        created() {
            this.getHomeNewsClassify();

        },
        mounted() {

        },
        beforeDestroy() {
        },
    };
</script>
