<template>
    <div class="consult">
        <van-tabs @click="onClick" sticky animated>
            <van-tab v-for="item in titleList" :title="item.name" :key="item.channelId">
                <div class="consultList">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                        <div class="consultCard" v-for="(item, index) in mockList" :key="index" :title="item"
                            @click="jump(item)">
                            <div class="consultContent">{{ item.TITLE }}</div>
                            <div class="consultBottom">
                                <div class="consultTag">{{ titleName ? titleName : '图片新闻' }}</div>
                                <div class="consultTime">{{ item.PUBLISHED_TIME_FORMATED }}</div>
                            </div>
                        </div>
                    </van-list>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs, List } from 'vant';
import { dockAuth, doGetByChannel } from "@/api/column";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);
export default {
    data() {
        return {
            titleName: '图片新闻',
            titleList: [
                {
                    name: "图片新闻",
                    channelId: "8882678f335e4f838f7f55e6eb13c44f"
                },
                {
                    name: "镇江要闻",
                    channelId: "255d3dd56aeb448fa1524d5363d5f850"
                },
                {
                    name: "深度报道",
                    channelId: "6884533d937f493faa1553d371629bb1"
                },
                {
                    name: "区县动态",
                    channelId: "76b115156e6b42509f0c1994b4fc1c4a"
                },
                {
                    name: "部门讯息",
                    channelId: "d34942e593b943cb97758a9df231bcc1"
                },
                {
                    name: "新闻发布会",
                    channelId: "2c9c7b0ef8484a3ab397f69ee2146e22"
                },
                {
                    name: "政务专栏",
                    channelId: "7b9d7c6178504bfa954fb9ba244bb8ab"
                },
                {
                    name: "公告公示",
                    channelId: "ea6487bf681045af9df8136608b70b4c"
                },
                // {
                //     name: "视频新闻",
                //     channelId: "8d430964d5084d66b66f2c02912b1d1d"
                // },
                // {
                //     name: "电子报刊",
                //     channelId: "c8ba4274cba14f46ad485b95a0d86a16"
                // },

            ],
            loading: false,
            finished: false,
            mockList: [],
            total: 0,
            params: {
                channelId: "8882678f335e4f838f7f55e6eb13c44f",
                currentPage: 1,
                number: 10,
                token: "",
            }
        }
    },
    methods: {
        onClick(name, title) {
            this.titleName = title
            this.mockList = []
            this.total = 0
            this.params.currentPage = 1
            this.loading = true
            this.finished = false
            switch (title) {
                case "图片新闻":
                    this.params.channelId = "8882678f335e4f838f7f55e6eb13c44f"
                    break;
                case "镇江要闻":
                    this.params.channelId = "255d3dd56aeb448fa1524d5363d5f850"
                    break;
                case "深度报道":
                    this.params.channelId = "6884533d937f493faa1553d371629bb1"
                    break;
                case "区县动态":
                    this.params.channelId = "76b115156e6b42509f0c1994b4fc1c4a"
                    break;
                case "部门讯息":
                    this.params.channelId = "d34942e593b943cb97758a9df231bcc1"
                    break;
                case "公告公示":
                    this.params.channelId = "ea6487bf681045af9df8136608b70b4c"
                    break;
                case "视频新闻":
                    this.params.channelId = "8d430964d5084d66b66f2c02912b1d1d"
                    break;
                case "电子报刊":
                    this.params.channelId = "c8ba4274cba14f46ad485b95a0d86a16"
                    break;
                case "新闻发布会":
                    this.params.channelId = "2c9c7b0ef8484a3ab397f69ee2146e22"
                    break;
                case "政务专栏":
                    this.params.channelId = "7b9d7c6178504bfa954fb9ba244bb8ab"
                    break;

                default:
                    break;
            }
            this.init()
        },
        onLoad() {
            // 异步更新数据

            setTimeout(() => {
                let that = this
                if (that.total <= 10) {
                    that.finished = true;
                    return
                }
                for (let i = 0; i < 1; i++) {
                    ++that.params.currentPage
                    doGetByChannel(that.params).then((res) => {
                        that.mockList = that.mockList.concat(res.data.data.page.list);
                    });
                }
                that.loading = false
                if (that.mockList.length >= that.total) {
                    that.finished = true;
                }
            }, 500)
        },
        init() {
            dockAuth().then((res) => {
                this.params.token = res.data.data;
                this.initData()
            });
        },
        initData() {
            doGetByChannel(this.params).then((res) => {
                this.loading = false
                this.mockList = res.data.data.page.list;
                this.total = res.data.data.page.allRow;
            });
        },
        jump(val) {
            console.log(val)
            if (val.TITLE == "疫情防控专栏" ||
                val.TITLE == "镇江市政府网站年度工作报表" ||
                val.TITLE == "扫黑除恶镇江在行动") {
                const url = "http://www.zhenjiang.gov.cn/" + val.URL_COMP;
                window.location.assign(url)
            } else {
                const url = val.URL_COMP;
                window.location.assign(url)
            }
        }
    },
    created() {
        this.init()
    },
}
</script>

<style lang="stylus" scoped>
.consult{
    height 100%;
    overflow: auto;
    .consultList{
        margin: 20px;
        .consultCard{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px;
            box-sizing: border-box;
            width: 686px;
            height: 200px;
            background: #FFFFFF;
            border-radius: 16px;
            margin-bottom: 20px;
            width 100%;
            .consultContent{
                width: 100%;
                font-size: 28px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 48px;
                overflow: hidden;
                text-overflow: ellipsis;  /* 超出部分省略号 */
                word-break: break-all;  /* break-all(允许在单词内换行。) */  
                display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
                -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
                -webkit-line-clamp: 2; /* 显示的行数 */
                max-height: 80rpx; /* 设置最大高度，根据行高，要几行乘以几倍 */

            }
            .consultBottom{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 24px;
            }
        }
    }
}
</style>