<template>
    <div class="allproduct">
        <div class="product">
            <div class="product-img position-relative" v-for="item, index in allList" :key="index"
                @click="goPage(`/productcenter/${item.name}`)">
                <img :src="item.url" :alt="item.name" loading="lazy">
                <span class="imgtitle position-absolute color-fff">{{ item.name }}</span>
            </div>
        </div>
        <div class="btn position-relative font-size-20" @click="goPage('/')">Back</div>
    </div>
</template>

<script setup lang="ts">
import router from '../router';

let allList = Array<any>(
    { url: new URL("../assets/img/center01.jpg", import.meta.url).href, name: 'Door'},
    { url: new URL("../assets/img/center02.jpg", import.meta.url).href, name: 'Window' },
    { url: new URL("../assets/img/center03.jpg", import.meta.url).href, name: 'Railing' },
    { url: new URL("../assets/img/center04.jpg", import.meta.url).href, name: 'Building Materials' },
    { url: new URL("../assets/img/center05.jpg", import.meta.url).href, name: 'Kitchen Cabinets with Customization' },
    { url: new URL("../assets/img/center06.jpg", import.meta.url).href, name: 'Kitchen faucet and sink' },
    { url: new URL("../assets/img/center07.jpg", import.meta.url).href, name: 'Sanitary Ware' },
)

const goPage = (url: any) => {
    document.documentElement.scrollTop = 0
    router.push(url)
}
</script>

<style scoped lang="less">
.btn {
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    margin: 1rem 0 2rem;
    float: left;
    font-weight: bold;
    padding: 1rem 2.5rem;
    border: 1px solid #333;
}

.btn:hover {
    color: #fa8106;
    border: 1px solid #fa8106;
}
.allproduct {
    width: 100%;
    margin-top: 1rem;

    .product {
        box-sizing: border-box;
        padding: 1rem;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .product-img {
            cursor: pointer;
            width: 22%;
            height: 25rem;
            overflow: hidden;
            margin-right: 3rem;
            margin-bottom: 3rem;

            img {
                width: 100%;
                height: 100%;
                transition: 0.5s linear;
            }

            .imgtitle {
                width: 100%;
                bottom: 0;
                left: 0;
                height: 4rem;
                padding: 1rem;
                background: rgba(0, 0, 0, 0.3);
                box-sizing: border-box;
                font-size: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            img:hover {
                scale: 1.2;
            }

            img:hover+.imgtitle {
                background: #fa8106;
            }
        }
    }
}

@media screen and (max-width: 960px) {
    .allproduct {
        margin-top: 2rem;

        .product {
            display: flex;
            flex-direction: column;

            .product-img {
                width: 100%;
                height: 125vw;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}</style>