<template>
    <div>
        <div class="procurement align-items-center width-80 m-auto">
            <div class="pa-2 border-box">
                <div class="casemessage">
                    <div class="casemessage-left">
                        <p class="font-size-26"><strong>{{ casemessage.title }}</strong></p>
                        <div class="address-year" :class="mobileShow ? 'font-size-12' : 'font-size-16'">
                            <span class="address">
                                <i class="iconfont icon-zuobiao" :class="mobileShow ? 'font-size-12' : 'font-size-16'"></i>
                                <span>{{ casemessage.country }}</span>
                            </span>
                            <span class="year">
                                <i class="iconfont icon-shijian" :class="mobileShow ? 'font-size-12' : 'font-size-16'"></i>
                                <span>{{ casemessage.year }}</span>
                            </span>
                        </div>
                        <div class="message" :class="mobileShow ? 'font-size-12' : 'font-size-16'">
                            <p class="item"><strong>Address: </strong>{{ casemessage.address }}</p>
                            <p class="item"><strong>Type: </strong>{{ casemessage.type }}</p>
                            <p class="item"><strong>Solutions: </strong>{{ casemessage.solutions }}</p>
                            <p class="item"><strong>Unites: </strong>{{ casemessage.unites }}</p>
                        </div>
                        <div class="share" :class="mobileShow ? 'font-size-16 mb-2 mt-1' : 'sont-size-22'">
                            <span><strong>Share To: </strong></span>

                        </div>
                    </div>
                    <div class="casemessage-right" :class="mobileShow ? 'width-100' : 'width-70'">
                        <img :src="casemessage.img[0].details" :alt="casemessage.img[0].name" class="width-100 imgcase" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
        <div class="details">
            <h2><strong>DETAILS</strong></h2>
            <img :src="casemessage.img[1].details" :alt="casemessage.img[1].name" class="img" :class="mobileShow ? 'width-70' : 'width-50'" loading="lazy">
        </div>
        <div class="btn position-relative" :class="mobileShow ? 'font-size-16' : 'font-size-22'" @click="goPage">Back</div>
    </div>
</template>

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

let casemessage = reactive<any>({})

watch(() => router.currentRoute.value.params.name, (newValue: any) => {
    if (newValue == '0') {
        casemessage = {
            title: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
            country: 'Victoria, Canada',
            year: 2020,
            address: '721 Government St, Victoria, BC V8W 1W5,Canada',
            type: 'Hotel',
            solutions: 'Furniture,Fixtures＆Equipment, lights fixture',
            unites: '300+',
            img: [
                { details: new URL("../assets/img/cases/01.jpg", import.meta.url).href, name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel' },
                { details: new URL("../assets/img/cases/001.jpg", import.meta.url).href, name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel' }
            ]
        }
    } else if (newValue == '1') {
        casemessage = {
            title: 'Monsaraz Hilton',
            country: 'San Diego，USA',
            year: 2021,
            address: '1451 Rosecrans St, San Diego, CA 92106,USA',
            type: 'Hotel',
            solutions: 'Furniture,Fixtures＆Equipment, doors',
            unites: '200+',
            img: [
                { details: new URL("../assets/img/cases/02.jpg", import.meta.url).href, name: 'Monsaraz Hilton' },
                { details: new URL("../assets/img/cases/002.jpg", import.meta.url).href, name: 'Monsaraz Hilton' }
            ]
        }
    } else if (newValue == '2') {
        casemessage = {
            title: 'Canopy By Hilton San Francisco Soma Hotel',
            country: 'San Fransisco，USA',
            year: 2018,
            address: '333 O\'Farrell St #101, San Francisco, CA 94102,USA',
            type: 'Hotel',
            solutions: 'Furniture,Fixtures＆Equipment,lights fixture',
            unites: '200+',
            img: [
                { details: new URL("../assets/img/cases/03.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel' },
                { details: new URL("../assets/img/cases/003.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel' }
            ]
        }
    } else if (newValue == '3') {
        casemessage = {
            title: 'Lofts on Laurel',
            country: 'San Diego，USA',
            year: 2021,
            address: '2466 First Ave., San Diego, CA 92101',
            type: 'Condo',
            solutions: 'Building Materials',
            unites: '20+',
            img: [
                { details: new URL("../assets/img/cases/04.jpg", import.meta.url).href, name: 'Lofts on Laurel' },
                { details: new URL("../assets/img/cases/004.jpg", import.meta.url).href, name: 'Lofts on Laurel' }
            ]
        }
    } else if (newValue == '4') {
        casemessage = {
            title: 'State&Oak Street',
            country: 'Carlsbad，CA，USA',
            year: 2020,
            address: '3088 State St, Carlsbad, CA 92008',
            type: 'Condo',
            solutions: 'Building Materials',
            unites: '20+',
            img: [
                { details: new URL("../assets/img/cases/05.jpg", import.meta.url).href, name: 'State&Oak Street' },
                { details: new URL("../assets/img/cases/005.jpg", import.meta.url).href, name: 'State&Oak Street' }
            ]
        }
    } else if (newValue == '5') {
        casemessage = {
            title: '989 Johson Street',
            country: 'Victoria, Canada',
            year: 2020,
            address: '989 Johnson StVictoria, BC V8V 3N7',
            type: 'Condo',
            solutions: 'Building Materials',
            unites: '180+',
            img: [
                { details: new URL("../assets/img/cases/06.jpg", import.meta.url).href, name: '989 Johson Street' },
                { details: new URL("../assets/img/cases/006.jpg", import.meta.url).href, name: '989 Johson Street' }
            ]
        }
    } else if (newValue == '6') {
        casemessage = {
            title: 'Tarrace Lofts',
            country: 'Vista, California, USA',
            year: 2020,
            address: '516 S. Santa Fe Avenue,Vista,California',
            type: 'Apartment',
            solutions: 'Building Materials',
            unites: '20+',
            img: [
                { details: new URL("../assets/img/cases/07.jpg", import.meta.url).href, name: 'Tarrace Lofts' },
                { details: new URL("../assets/img/cases/007.jpg", import.meta.url).href, name: 'Tarrace Lofts' }
            ]
        }
    } else if (newValue == '7') {
        casemessage = {
            title: 'Ocean 17',
            country: 'Carlsbad，CA，USA',
            year: 2023,
            address: '2501 State Street Carlsbad, California 92008,USA',
            type: 'Condo',
            solutions: 'Building Materials, lights fixture',
            unites: '17',
            img: [
                { details: new URL("../assets/img/cases/08.jpg", import.meta.url).href, name: 'Ocean 17' },
                { details: new URL("../assets/img/cases/008.jpg", import.meta.url).href, name: 'Ocean 17' }
            ]
        }
    }
}, { immediate: true, deep: true })

let mobileShow = ref<any>(false)
const goPage = () => {
    document.documentElement.scrollTop = 0
    router.push({
        path: '/'
    })
    document.getElementById('service')?.scrollIntoView()
}

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
        }
    })
})
</script>

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

.btn:hover {
    color: #fa8106;
    border: 1px solid #fa8106;
}

.procurement {
    margin-top: 2vw;
}

.casemessage {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    overflow: hidden;

    .casemessage-left {
        width: 50%;
        font-size: 26px;
        margin-right: 5%;

        .address-year {
            padding: 1rem 0rem;
            border-bottom: 1px solid #333;
            display: flex;

            .address {
                margin-right: 4rem;
            }

            .address,
            .year {
                display: flex;
                align-items: center;
                span{
                    white-space: nowrap;
                }

                .iconfont {
                    color: #ed7d31;
                    // font-size: 2rem;
                    margin-right: 1rem;
                }
            }
        }

        .message {
            padding: 4rem 0;
            // font-size: 16px;
            border-bottom: 2px solid rgba(232, 232, 232);

            .item {
                margin: 10px 0;
                // color: #888;
            }
        }

        .button-left {
            // position: absolute;
            cursor: pointer;
            float: left;
            padding: 10px 20px;
            background-color: #fa8106;
            float: left;
            margin-top: 5vw;
            font-size: 16px;
            color: #fff;
        }
    }

    .casemessage-right {
        // width: 45%;
        height: 25vw;
        overflow: hidden;

        img {
            transition: all 3s;
        }
    }

    .casemessage-right:hover img {
        transform: scale(1.1);
    }
}

.details {
    width: 75%;
    margin: 20px auto;
    text-align: left;

    .img {
        margin-top: 2rem;
    }
}

@media screen and (max-width: 960px) {
    .btn{
        left: 50%;
        transform: translateX(-50%);
    }
    .details{
        text-align: center;
    }
    .casemessage {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .casemessage-left {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 10px;
            .address-year{
                display: flex;
                flex-direction: column;
                .address{
                    margin-bottom: 0.5rem;
                }
            }

            .button-left {
                white-space: nowrap;
            }
        }

        .casemessage-right {
            height: 35vw;

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