<template>
    <!--  -->
    <BasePage :title="currentColumn.name || '平台动态'">
        <!-- <div class="column-list" v-if="currentColumn"> -->
        <!-- v-if="currentColumn.ColumnType === 'list'" -->
        <div class="column-list">
            <div>
                <div v-if="articleList.length > 0" @click="$navigate(`/ColumnDetail?id=${item.id}`)" class="column"
                    v-for="item in articleList" :key="item.id">
                    <img :src="$file(item.img)" class="icon" />
                    <div class="overview">
                        <span class="title">{{ item.name }}</span>
                        <div class="desc">
                            <span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd') }}</span>
                            <span>阅读 {{ item.click }} <i class="van-icon van-icon-arrow" style="color:#000"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <van-empty v-else class="b_l_w" description="暂无数据" /> -->
        <!-- </div> -->
        <!-- <van-empty v-else class="b_l_w" description="栏目不存在" /> -->
    </BasePage>
</template>

<script>
export default {
    name: 'Column',
    emits: ['updateShare'],
    mounted() {
        const cacheKey = 'Column_articleList'
        const cached = sessionStorage.getItem(cacheKey)
        if (cached) {
            try {
                const { articleList, columnName } = JSON.parse(cached)
                this.articleList = articleList
                this.currentColumn.name = columnName
                return
            } catch (e) { }
        }
        this.$get('/v1/client/CNewsClient?pid=3').then(data => {
            // console.log(data);
            this.articleList = data.data.items;
            this.currentColumn.name = data.data.items[0].pidname;
            sessionStorage.setItem(cacheKey, JSON.stringify({
                articleList: this.articleList,
                columnName: this.currentColumn.name
            }))
        })
    },
    data() {
        return {
            columns: [],
            articles: [],
            articleList: [],
            currentColumn: {},
        }
    },


}
</script>

<style>
.column-list {
    .column {
        display: flex;
        padding: 3.333vw;
        border-bottom: 1px solid #eee;
    }

    .icon {
        height: 18.667vw;
        min-width: 18.667vw
    }

    .overview {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .title {
            font-size: 3.667vw;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
        }

        .desc {
            color: #999;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
    }
}
</style>
