<template>
    <BasePage>
        <div class="Business_School">
            <img class="banner" src="/img/bs-banner.jpg" alt="">
            <div class="list_box">
                <!-- <img style="width: 26.4vw;" src="/img/bs-icon.png" alt=""> -->
                <div style="margin-top: 3vw;" class="box box-align-center">
                    <van-tabs v-model:active="activeTab" color="#ca2904" title-active-color="#ca2904" class="tabs"
                        line-height="0.67vw" line-width="8vw" :ellipsis="false">
                        <van-tab v-for="category in categories" :key="category.id" :name="category.id"
                            :title="category.name"></van-tab>
                    </van-tabs>
                    <!-- <img class="r" @click="showLeft = true" style="height: 4vw;" src="/img/filter.png" alt="filter"> -->
                </div>
            </div>
            <BaseList cache-key="Business_School" :url="`/v1/client/CBusinessschoolsClient`" :params="params" class="list_item">
                <template #default="{ item }">
                    <div class="school-list" :key="item.id" @click="$navigate(`/School_Detail?id=${item.id}`)">
                        <div class="img">
                            <img class="t1" :src="item.img" />
                        </div>
                        <div class="c">
                            <div class="name">
                                <b>{{ item.name }}</b>
                            </div>
                            <div class="label">
                                {{ item.description }}
                            </div>
                            <div class="times">
                                <span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                                <span>阅览量 {{ item.click }}</span>
                            </div>
                        </div>
                    </div>
                </template>
            </BaseList>
            <!-- <div class="list_item">
                <div class="b_l_w b_k">
                    <div class="school-list" v-for="item in filteredList" :key="item.id"
                        @click="$navigate(`/School_Detail?id=${item.id}`)">
                        <div class="img">
                            <img class="t1" :src="item.Icon" />
                        </div>
                        <div class="c">
                            <div class="name">
                                <b>{{ item.Title }}</b>
                            </div>
                            <div class="label">
                                {{ item.SubTitle }}
                            </div>
                            <div class="times">
                                <span>{{ item.CTime }}</span>
                                <span>阅览量 {{ item.ReadCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </BasePage>

    <van-popup v-model:show="showLeft" position="left" :style="{ width: '30%', height: '100%' }">
        <div v-for="i in categories">
            <div @click="changeTab(i.id)" style="height: 10vw;width: 100%;border-bottom: solid 1px #f5f5f5;"
                class="box box-center-center">
                {{ i.name }}
            </div>
        </div>
    </van-popup>

</template>

<script>
import BaseList from '../../components/BaseList.vue';

export default {
    name: 'Business_School',
    data() {
        return {
            activeTab: 1,
            showLeft: false,
            categories: [],
            _categoriesCache: null,
        }
    },
    computed: {
        params() {
            return {
                pid: this.activeTab
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList() {
            if (this._categoriesCache) {
                this.categories = this._categoriesCache
                return
            }
            this.$get('/v1/client/CBusinessschoolcatesClient',).then(res => {
                this.categories = res.data;
                this._categoriesCache = res.data;

            })
        },
        changeTab(id) {
            this.activeTab = id;
            this.showLeft = false;
        }
    },
}
</script>
