<template>
    <div class="el-twinfo_show_list_mobile_1">
        <!--4.2.1.	图文分类列表展示组件1开始-->
        <div class="twinfo_show_list_mobile_1">
            <div class="search-bar">
                <input type="text" v-model="title" placeholder="请搜索资讯" class="inp1">
                <input type="button" value="搜索" class="btn1" @click="search">
            </div>
            <div class="grade-list">
                <div class="grade-list-tab">
                    <ul>
                        <li :class="type == '0'? 'active':''"><a href="javascript:;" @click="tabgetTypeList(0)">全部</a></li>
                        <li v-for="(item,index) in catList" :key="index" :class="type == index + 1?'active':''"><a href="javascript:;" @click="tabgetTypeList(index + 1, item.catId)">{{item.catName}}</a></li>
                    </ul>
                </div>
                <fyer-load-more
                        ref="pulldown"
                        :pageIndex="page"
                        :pageSize="rows"
                        :totalCount="totalCount"
                        :openRefresh="false"
                        @loadmore="loadmore"
                        @refresh="refresh"
                >
                <div v-for="(item,index) in newsList" :key="index">
                    <div class="news-list-toutiao2" v-if="item.photo"><!--新闻2-->
                        <a href="" class="a2">
                            <span class="nl2-sp1">
                               <span class="nl2-spp1">{{item.title}}</span>
                               <span class="nl2-spp2">
                                  <i class="tip1">新闻</i>发布于<i class="time1">{{item.newsPubDate | formatDate}}</i>
                               </span>
                            </span>
                            <span class="nl2-sp2"><img src="item.photo" alt=""></span>
                        </a>
                    </div>
                    <div class="news-list-toutiao1" v-else><!--新闻3-->
                        <a :href="'/infodetail?id='+ item.articleId" class="a1">
                            <span class="nl-sp1">{{item.title}}</span>
                            <span class="nl-sp4">{{item.description}}</span>
                            <span class="nl-sp3">
                                <span class="spp1">
                                    <i class="tip1">新闻</i>发布于<i class="time1">{{item.newsPubDate | formatDate}}</i>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
                </fyer-load-more>
            </div>
<!--            <span class="grade-list-daodi" hidden>-->
<!--                <img src="../../theme-chalk/src/images/gif/gif-icon3.png" alt="">别急别急，我正在努力加载~-->
<!--            </span>-->
        </div>
        <!--4.2.1.	图文分类列表展示组件1结束-->
    </div>
</template>

<script>
    import {httpPost} from '../../../src/utils/utils';
    import formMixin from '../../../src/mixins/formMixin';
    import lenye_base from 'lenye_base';
    import fyerLoadMore from "fyer-load-more";
    import $ from "fy-kit";

    export default {
        name: 'ElTwinfoShowListMobile1',
        mixins: [formMixin],
        model: {},
        components: {
            fyerLoadMore
        },
        filters: {
            formatDate: function (value) {
                if (value == '' || value == 'undefined') {
                    return '';
                }
                var datavalue = value.replace(/\-/g, '/');
                let date = new Date(datavalue);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '年' + MM + '月' + d + '日 ' + h + ":" + m + ":" + s;
            },
        },
        data() {
            return {
                siteId:'',
                catId:'',
                type:0,
                page: 1,
                rows: 10,
                title:'',
                catList:[],
                newsList: [],
                totalCount: 0
            }
        },
        mounted() {
            console.log(httpPost);
            this.siteId = lenye_base.site_data.getsiteData().siteId;
            this.getCatList();
            console.log(lenye_base);
        },
        computed: {},
        methods: {
            tabgetTypeList(type,catId){
                this.page = 1;
                this.getTypeList(type,catId)
            },
            loadmore(page) {
                this.page = page;
                this.getNewsList();
            },
            refresh() {
                this.page = 1;
                this.getNewsList("pull");
            },
            search() {
                this.page = 1;
                this.newsList = [];
                this.getNewsList("search");
            },
            getTypeList(type, catId){
                this.type = type;
                if (type == 0) {
                    this.getCatList();
                } else {
                    this.catId = catId;
                    this.getNewsList();
                }
            },
            getCatList() {
                let that = this;
                httpPost(lenye_base.base_data.getapiUrl() + '/news-service/common/newsCategory/queryUsableTree.do',
                    lenye_base.base_data.getformatting({
                        siteId: this.siteId,
                        cascade: 3
                    }),
                    function (data) {
                        that.catList = data.data;
                        that.catId = '';
                        // data.data.forEach((item) =>{
                        //     that.catId += item.catId + ",";
                        // });
                        that.getNewsList();
                    }
                );
            },
            getNewsList(param){
                let that = this;
                let reqData = {};
                reqData.siteId = this.siteId;
                reqData.catId = this.catId;
                reqData.page = this.page;
                reqData.rows = this.rows;
                reqData.title = this.title;
                reqData.sorts="updateDate=0"
                if(reqData.page===1){
                    that.newsList = [];
                }
                httpPost(lenye_base.base_data.getapiUrl() + '/news-service/common/newsArticle/queryShowPage.do',
                    lenye_base.base_data.getformatting(reqData),
                    function (data) {
                        if (param == "pull") {
                            that.newsList = [];
                            this.$refs.pulldown.state = 0;
                        }
                        that.newsList = that.newsList.concat(data.data);
                        that.totalCount = data.totalCount;
                        if (param == "search") {
                            $._.default(".loadings").html("没有更多数据了");
                        }
                        if (that.newsList.length <= 6) {
                            $._.default(".loadings").html("没有更多数据了");
                        }
                    }
                );
            },
        },
    };
</script>
