<template>
    <div class="allcases">
        <div class="cases">
            <div class="cases-item" v-for="item, index in caseList" :key="index" @click="goPage(`/projectcase/${index}`)">
                <div class="item-img">
                    <img :src="item.url" :alt="item.title" loading="lazy">
                    <span class="imgbgc"></span>
                </div>
                <h3>{{ item.title }}</h3>
                <div class="other">
                    <span class="other-item">
                        <img src="../assets/img/i20.png" alt="location" loading="lazy">
                        <p>{{ item.location }}</p>
                    </span>
                    <span class="other-item">
                        <img src="../assets/img/i21.png" alt="units" loading="lazy">
                        <p>{{ item.units }} Units</p>
                    </span>
                </div>
            </div>
        </div>
        <div class="btn position-relative font-size-20" @click="goPage('/')">Back</div>
    </div>
</template>

<script setup lang="ts">
import router from '../router';
import { onMounted, ref } from 'vue'

let caseList = Array<any>(
    {
        title: 'Fairmont Empress Hotel',
        location: 'Victoria, Canada',
        units: '300+',
        url: new URL("../assets/img/ProjectCase/01/1.jpg",import.meta.url).href
    },
    {
        title: 'Monsaraz Hilton',
        location: 'San Diego，USA',
        units: '200+',
        url: new URL("../assets/img/ProjectCase/02/1.jpg",import.meta.url).href
    },
    {
        title: 'Canopy By Hilton San Francisco Soma Hotel',
        location: 'San Fransisco，USA',
        units: '200+',
        url: new URL("../assets/img/ProjectCase/03/1.jpg",import.meta.url).href
    },
    {
        title: 'Lofts on Laurel',
        location: 'San Diego，USA',
        units: '20+',
        url: new URL("../assets/img/ProjectCase/04/1.jpg",import.meta.url).href
    },
    {
        title: 'State&Oak Street',
        location: 'Carlsbad，CA，USA',
        units: '20+',
        url: new URL("../assets/img/ProjectCase/05/1.jpg",import.meta.url).href
    },
    {
        title: '989 Johson Street',
        location: 'Victoria, Canada',
        units: '180+',
        url: new URL("../assets/img/ProjectCase/06/1.jpg",import.meta.url).href
    },
    {
        title: 'Tarrace Lofts',
        location: 'Vista, California, USA',
        units: '20+',
        url: new URL("../assets/img/ProjectCase/07/1.jpg",import.meta.url).href
    },
    {
        title: 'Ocean 17',
        location: 'Carlsbad，CA，USA',
        units: '17',
        url: new URL("../assets/img/ProjectCase/08/1.jpg",import.meta.url).href
    },
)

const goPage = (url: any) => {
    document.documentElement.scrollTop = 0
    router.push({
        path: 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;
}
.allcases {
    margin-top: 1rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0;

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

        .cases-item {
            width: 30%;
            margin-bottom: 2rem;
            margin-right: 3.5rem;

            .item-img {
                position: relative;
                width: 100%;
                height: 75%;
                margin-bottom: 0.5rem;
                overflow: hidden;

                .imgbgc {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 0.5rem;
                    z-index: 2;
                    left: 0;
                    background-color: #fa8106;
                }

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

                img:hover {
                    scale: 1.2;
                }
            }

            .other {
                display: flex;
                flex-direction: column;
                align-items: left;
                margin-top: 1rem;
                border-top: 1px solid #888;
                padding: 0.5rem 0 0 0;

                .other-item {
                    display: flex;
                    font-size: 14px;
                    color: #888;

                    img {
                        margin-right: 1rem;
                    }
                }

                .other-item:first-child {
                    margin: 0.5rem 0;
                }
            }
        }
    }
}
@media screen and (max-width: 960px) {
    .allcases{
        .cases{
            margin-top: 1rem;
            .cases-item{
                width: 100%;
                margin-right: 0;
                margin-bottom: 3rem;
            }
        }
    }
}
</style>