<template>
    <div class="pageContainer">
        <div class="banner" :style="`background-image: url(${banner.picture})`">
            <div class="desc">
                <h2>{{ banner.name }}</h2>
                <p>{{ banner.description }}</p>
            </div>
        </div>
        <div class="mainBox">
            <ul class="menu">
                <li :class="{active: cid == item.id}" @click="jump(item.id)" v-for="item in categories">{{item.name}}</li>
            </ul>
            <CardList :key="cid" :cid="cid" type="business"></CardList>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
import http from '@/io/http';
import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import CardList from '../components/CategoryCardList.vue';

const router = useRouter();
const route = useRoute();
const cid = ref(route.params.cid);
const banner = ref({});
const categories = ref([]);

onBeforeMount(() => {
    getBanner();
    getCategories();
});

onUpdated(()=>{
    cid.value = route.params.cid;
});

watch(cid, (newCid, oldCid)=>{
    if(newCid !== oldCid){
        getBanner();
    }
});

const getBanner = ()=>{
    let params = {key: 'pc_business'};
    http('/api/banner', params, 'get').then(res => {
        banner.value = Array.isArray(res.data) ? res.data[0] : {};
    }).catch(err => {
        showToast(err.message);
    });
};

const getCategories = ()=>{
    let params = { type_key: 'business' };
    http('/api/keywords', params, 'get').then(res => {
        categories.value = res.data || [];
    }).catch(err => {
        showToast(err.message);
    });
};

const jump = (cid)=>{
    router.push(`/business/insight/category/${cid}`);
};
</script>

<style lang="scss" scoped>
.pageContainer{
    width: 100%;
    color: #FFF;
    .banner{
        width: 100%;
        height: 216px;
        background-color: rgba($color: #FFF, $alpha: 0.5);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        .desc{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            h2{
                font-size: 27px;
            }
            p{
                width: 460px;
                font-size: 23px;
                line-height: 30px;
                padding: 10px 0;
            }
        }
    }
    .mainBox{
        width: 100%;
        .menu{
            width: 100%;
            height: 90px;
            overflow-y: hidden;
            overflow-x: auto;
            display: flex;
            padding: 20px;
            flex-wrap: nowrap;
            position: relative;
            li{
                height: 48px;
                padding: 0 20px;
                border-radius: 3px;
                color: #999;
                line-height: 48px;
                margin-right: 20px;
                font-size: 28px;
                white-space: nowrap;
                &:active,
                &.active{
                    background: #3662FE;
                    color: #FFF;
                }
            }
        }
        
    }
}
</style>