<template>
    <div class="productcenter">
        <div class="door-bgc position-relative">
            <img src="../assets/img/door/door.jpg" alt="Door">
            <span class="position-absolute doortitle color-fff"
                :class="mobileShow ? 'font-size-16' : 'font-size-50'">Safety, Health, and Environmental
                Protection</span>
        </div>
        <div class="box">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="item.title" :name="item.title" v-for="item, index in productList"
                    :key="index"></el-tab-pane>
            </el-tabs>
            <div class="allpic">
                <div v-for="item2, index2 in product" :key="index2" class="pic" v-if="product.length != 0">
                    <img :src="item2.detail" :alt="item2.name" loading="lazy">
                </div>
                <div class="allpic1" v-else>
                    <el-empty description="No further content available at the moment" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '../router';
import { ref, watch, onMounted } from 'vue'
import { TabsPaneContext, formContextKey } from 'element-plus/lib';
import useHomeStore from '../store/modules/homepage'

let Home = useHomeStore()
let productList = Array<any>([])
let product = Array<any>([])
let activeName = ref<any>('')
let mobileShow = ref<any>(false)

const handleClick = (tab: TabsPaneContext, event: Event) => {
    if(tab.props.name == 'Entrance Doors'){
        product = Home.$state.Entrance
    }else if(tab.props.name == 'Interior Doors'){
        product = Home.$state.Interior
    }else{
        product = []
    }
}

onMounted(() => {
    if (document.body.offsetWidth < 960) {
        mobileShow.value = true
    } else {
        mobileShow.value = false
    }
    window.addEventListener('resize', function () {
        if (document.body.offsetWidth < 960) {
            mobileShow.value = true
        } else {
            mobileShow.value = false
        }
    })
})

if (router.currentRoute.value.params.name == 'Door') {
    productList = [
        {
            title: 'Entrance Doors',
            children: []
        },
        {
            title: 'Interior Doors',
            children: []
        },
        {
            title: 'Fire Doors',
            children: []
        },
        {
            title: 'Sliding Doors',
            children: []
        }
    ]
    activeName.value = productList[0].title
    if(activeName.value == 'Entrance Doors'){
        product = Home.$state.Entrance
    }else{
        product = []
    }
} else if (router.currentRoute.value.params.name == 'Window') {
    productList = []
    product = []
} else if (router.currentRoute.value.params.name == 'Railing') {
    productList = []
    product = []
} else if (router.currentRoute.value.params.name == 'Building Materials') {
    productList = []
    product = []
} else if (router.currentRoute.value.params.name == 'Kitchen Cabinets with Customization') {
    productList = []
    product = []
} else if (router.currentRoute.value.params.name == 'Kitchen faucet and sink') {
    productList = []
    product = []
} else if (router.currentRoute.value.params.name == 'Sanitary Ware') {
    productList = []
    product = []
}


</script>

<style scoped lang="less">
.allpic {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;

    .pic {
        width: 23%;
        height: 15vw;
        margin-right: 2rem;
        margin-bottom: 2rem;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            transition: 0.5s linear;
        }
        img:hover{
            scale: 1.2;
        }
    }
}
.allpic1{
    width: 100%;
    text-align: center;
}

.productcenter {
    .door-bgc {
        width: 100%;
        height: 60%;

        img {
            width: 100%;
            height: 100%;
        }

        .doortitle {
            bottom: 0.5%;
            left: 0;
            width: 100%;
            z-index: 2;
            height: 14%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.2);
        }
    }

    .box {
        width: 90%;
        margin: 1rem auto 0;

        .pagina {
            float: right;
            // margin-bottom: 2rem;
        }
    }
}

@media screen and (max-width: 960px) {
    .productcenter {
        .door-bgc {
            width: 100%;
            height: 35%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .box {
            width: 90%;
            margin: 1rem auto 0;
        }
    }

    .allpic {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .pic {
            width: 40%;
            height: 25vw;
        }
    }
}
</style>

<style>
.demo-tabs>.el-tabs__content {
    padding: 10px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>