<template>
    <div class="pageContainer">
        <ul class="categoryBox" v-if="categories">
            <li :key="item.id" v-for="item in categories" @click="goListPage(item.id)">
                <img :src="item.image" :alt="item.name">
                <div class="title">{{ item.name }}</div>
            </li>
        </ul>
        <div class="loadingBox" v-else>行业数据加载中...</div>
    </div>
</template>

<script setup>
// 12行业洞察聚合页
import { ref, onBeforeMount, onMounted } from 'vue';
import http from '@/io/http';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();
const categories = ref();

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


const goListPage = (id) => {
    router.push('/business/insight/category/' + id);
};

</script>

<style lang="scss" scoped>
.pageContainer {
    color: #FFF;
    padding: 90px 65px;
    min-height: 100%;

    .loadingBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
    }

    .categoryBox {
        width: 100%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        &::before {
            content: '';
            display: block;
            width: 200px;
            height: 110px;
            background: url('@/assets/images/12jobs_cube1.png') no-repeat center;
            background-size: contain;
            position: absolute;
            top: -55px;
            left: -45px;
            z-index: 0;
        }

        &::after {
            content: '';
            display: block;
            width: 200px;
            height: 143px;
            background: url('@/assets/images/12jobs_cube2.png') no-repeat center;
            background-size: contain;
            position: absolute;
            bottom: -70px;
            right: -50px;
            z-index: 0;
        }

        li {
            width: 300px;
            height: 160px;
            border: 1px solid #666;
            margin-top: 15px;
            position: relative;
            cursor: pointer;
            background: #000;
            z-index: 5;

            &:hover {
                border-color: #FFF;
            }

            img {
                width: 298px;
                height: 158px;
                display: block;
                opacity: 0.7;
                font-size: 23px;
            }

            .title {
                width: 100%;
                height: 30px;
                font-size: 28px;
                line-height: 30px;
                font-weight: bold;
                position: absolute;
                bottom: 25px;
                padding-left: 30px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 11px;
                    top: 5px;
                    width: 5px;
                    height: 24px;
                    background: #3662FE;
                    border-radius: 2px;
                }
            }
        }
    }
}
</style>