<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 class="icon-img">
                                <a v-for="item,index in iconList" :key="index" :href="item.url" target="_blank"><img :src="item.detail" :alt="item.name"></a>
                            </div>
                        </div>
                    </div>
                    <div class="casemessage-right" :class="mobileShow ? 'width-100' : 'width-70'">
                        <img :src="casemessage.img.details" :alt="casemessage.img.name" class="width-100 imgcase"
                            loading="lazy">
                    </div>
                </div>
            </div>
        </div>
        <div class="details">
            <h2><strong>DETAILS</strong></h2>
            <div class="details-pic" v-if="casemessage.img.children && casemessage.img.children.length > 0">
                <div class="img" v-for="item, index in casemessage.img.children" :key="index">
                    <img :src="item.details" :alt="item.name" loading="lazy">
                </div>
            </div>
        </div>
        <div class="other">
            <h1 class="mb-2"><strong>Other Cases</strong></h1>
            <swiper :modules="modules" :slides-per-view="slidesPerView" :loop="true" :space-between="50" navigation
                :pagination="{ clickable: true }">
                <!-- 项目案例 -->
                <swiper-slide v-for="(item, index2) in bannerList" class="hover-scale cursor-pointer" :key="item.position">
                    <div>
                        <div class="case-img overflow-hidden position-relative"
                            @click="goPage1(`/projectcase/${item.position}`, 'projectCases')">
                            <img :src="item.detail" :alt="item.name" class="width-100 d-block position-relative imgcase1"
                                loading="lazy" />
                            <div class="position-absolute color-fff project-center-title">
                                <span class="font-700 font-size-20">{{ item.name }}</span>
                                <span class="font-700 font-size-20">{{ item.address }}</span>
                            </div>
                        </div>
                    </div>
                </swiper-slide>
            </swiper>
        </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 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { A11y, Navigation, Scrollbar } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue';
import { watch, reactive, ref, onMounted } from 'vue'

let modules = [Navigation, Scrollbar, A11y];

let casemessage = reactive<any>({})
let slidesPerView = ref<number>(3)
let iconList = Array<any>(
    { detail: new URL("../assets/img/icon/1.jpg", import.meta.url).href, name: 'FaceBook', url: 'https://www.facebook.com/' },
    { detail: new URL("../assets/img/icon/2.jpg", import.meta.url).href, name: 'Twitter', url: 'https://twitter.com/' },
    { detail: new URL("../assets/img/icon/3.jpg", import.meta.url).href, name: 'Instagram', url: 'https://www.instagram.com/' },
    { detail: new URL("../assets/img/icon/4.jpg", import.meta.url).href, name: 'YouTube', url: 'https://www.youtube.com/' },
)

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/ProjectCase/01/1.jpg", import.meta.url).href,
                name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/01/2.jpg", import.meta.url).href,
                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
                    },
                    {
                        details: new URL("../assets/img/ProjectCase/01/3.jpg", import.meta.url).href,
                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/01/4.jpg", import.meta.url).href,
                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/01/5.jpg", import.meta.url).href,
                        name: 'MONTIER Canada Hotel Project - Fairmont Empress Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/01/6.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/ProjectCase/02/2.jpg", import.meta.url).href,
                name: 'Monsaraz Hilton',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/02/3.jpg", import.meta.url).href,
                        name: 'Monsaraz Hilton',
                    }, {
                        details: new URL("../assets/img/ProjectCase/02/4.jpg", import.meta.url).href,
                        name: 'Monsaraz Hilton',
                    }, {
                        details: new URL("../assets/img/ProjectCase/02/5.jpg", import.meta.url).href,
                        name: 'Monsaraz Hilton',
                    }, {
                        details: new URL("../assets/img/ProjectCase/02/6.jpg", import.meta.url).href,
                        name: 'Monsaraz Hilton',
                    }, {
                        details: new URL("../assets/img/ProjectCase/02/7.jpg", import.meta.url).href,
                        name: 'Monsaraz Hilton',
                    }, {
                        details: new URL("../assets/img/ProjectCase/02/8.jpg", import.meta.url).href,
                        name: 'Monsaraz Hilton',
                    }, {
                        details: new URL("../assets/img/ProjectCase/02/9.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/ProjectCase/03/1.jpg", import.meta.url).href,
                name: 'Canopy By Hilton San Francisco Soma Hotel',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/03/2.jpg", import.meta.url).href,
                        name: 'Canopy By Hilton San Francisco Soma Hotel',
                    },
                    {
                        details: new URL("../assets/img/ProjectCase/03/3.jpg", import.meta.url).href,
                        name: 'Canopy By Hilton San Francisco Soma Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/03/4.jpg", import.meta.url).href,
                        name: 'Canopy By Hilton San Francisco Soma Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/03/5.jpg", import.meta.url).href,
                        name: 'Canopy By Hilton San Francisco Soma Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/03/6.jpg", import.meta.url).href,
                        name: 'Canopy By Hilton San Francisco Soma Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/03/7.jpg", import.meta.url).href,
                        name: 'Canopy By Hilton San Francisco Soma Hotel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/03/8.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/ProjectCase/04/1.jpg", import.meta.url).href,
                name: 'Lofts on Laurel',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/04/2.jpg", import.meta.url).href,
                        name: 'Lofts on Laurel',
                    },
                    {
                        details: new URL("../assets/img/ProjectCase/04/3.jpg", import.meta.url).href,
                        name: 'Lofts on Laurel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/04/4.jpg", import.meta.url).href,
                        name: 'Lofts on Laurel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/04/5.jpg", import.meta.url).href,
                        name: 'Lofts on Laurel',
                    }, {
                        details: new URL("../assets/img/ProjectCase/04/6.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/ProjectCase/05/1.jpg", import.meta.url).href,
                name: 'State&Oak Street',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/05/2.jpg", import.meta.url).href,
                        name: 'State&Oak Street',
                    },
                    {
                        details: new URL("../assets/img/ProjectCase/05/3.jpg", import.meta.url).href,
                        name: 'State&Oak Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/05/4.jpg", import.meta.url).href,
                        name: 'State&Oak Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/05/5.jpg", import.meta.url).href,
                        name: 'State&Oak Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/05/6.jpg", import.meta.url).href,
                        name: 'State&Oak Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/05/7.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/ProjectCase/06/1.jpg", import.meta.url).href,
                name: '989 Johson Street',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/06/2.jpg", import.meta.url).href,
                        name: '989 Johson Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/06/3.jpg", import.meta.url).href,
                        name: '989 Johson Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/06/4.jpg", import.meta.url).href,
                        name: '989 Johson Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/06/5.jpg", import.meta.url).href,
                        name: '989 Johson Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/06/6.jpg", import.meta.url).href,
                        name: '989 Johson Street',
                    }, {
                        details: new URL("../assets/img/ProjectCase/06/7.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/ProjectCase/07/1.jpg", import.meta.url).href,
                name: 'Tarrace Lofts',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/07/2.jpg", import.meta.url).href,
                        name: 'Tarrace Lofts',
                    },
                    {
                        details: new URL("../assets/img/ProjectCase/07/3.jpg", import.meta.url).href,
                        name: 'Tarrace Lofts',
                    }, {
                        details: new URL("../assets/img/ProjectCase/07/4.jpg", import.meta.url).href,
                        name: 'Tarrace Lofts',
                    }, {
                        details: new URL("../assets/img/ProjectCase/07/5.jpg", import.meta.url).href,
                        name: 'Tarrace Lofts',
                    }, {
                        details: new URL("../assets/img/ProjectCase/07/6.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/ProjectCase/08/1.jpg", import.meta.url).href,
                name: 'Ocean 17',
                children: [
                    {
                        details: new URL("../assets/img/ProjectCase/08/2.3.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/2.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/3.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/4.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/5.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/6.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/7.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/8.jpg", import.meta.url).href,
                        name: 'Ocean 17',
                    }, {
                        details: new URL("../assets/img/ProjectCase/08/9.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()
}
const goPage1 = (url: any, name: string) => {
    if (name != '') {
        localStorage.setItem('scrollPosition', name)
    }
    document.documentElement.scrollTop = 0
    router.push({
        path: url
    })
}
let bannerList = ref<any>([
    { detail: new URL("../assets/img/ProjectCase/01/1.jpg", import.meta.url).href, name: 'Fairmont Empress Hotel', address: 'Victoria, Canada', position: 0 },
    { detail: new URL("../assets/img/ProjectCase/02/1.jpg", import.meta.url).href, name: 'Monsaraz Hilton', address: 'San Diego，USA', position: 1 },
    { detail: new URL("../assets/img/ProjectCase/03/1.jpg", import.meta.url).href, name: 'Canopy By Hilton San Francisco Soma Hotel', address: 'San Fransisco，USA', position: 2 },
    { detail: new URL("../assets/img/ProjectCase/04/1.jpg", import.meta.url).href, name: 'Lofts on Laurel', address: 'San Diego，USA', position: 3 },
    { detail: new URL("../assets/img/ProjectCase/05/1.jpg", import.meta.url).href, name: 'State&Oak Street', address: 'Carlsbad，CA，USA', position: 4 },
    { detail: new URL("../assets/img/ProjectCase/06/1.jpg", import.meta.url).href, name: '989 Johson Street', address: 'Victoria, Canada', position: 5 },
    { detail: new URL("../assets/img/ProjectCase/07/1.jpg", import.meta.url).href, name: 'Tarrace Lofts', address: 'Vista, California, USA', position: 6 },
    { detail: new URL("../assets/img/ProjectCase/08/1.jpg", import.meta.url).href, name: 'Ocean 17', address: 'Carlsbad，CA，USA', position: 7 },
])
onMounted(() => {
    bannerList.value.map((li: any) => {
        bannerList.value = bannerList.value.filter((li: any) => {
            return li.position != router.currentRoute.value.params.name
        })
    })
    if (document.body.offsetWidth < 960) {
        mobileShow.value = true
        slidesPerView.value = 1
    } else {
        mobileShow.value = false
        slidesPerView.value = 3
    }
    window.addEventListener('resize', function () {
        if (document.body.offsetWidth < 960) {
            mobileShow.value = true
            slidesPerView.value = 1
        } else {
            mobileShow.value = false
            slidesPerView.value = 3
        }
    })
})
</script>

<style scoped lang="less">
.share{
    margin-top: 1rem;
    display: flex;
    .icon-img{
        width: 60%;
        margin-left: 1rem;
        img{
            width: 3rem;
            height: 3rem;
            margin-left: 1rem;
            border-radius: 10px;
        }
    }
}
:deep(.swiper-button-prev:after) {
    color: #fff;
    font-size: 30px;
}

:deep(.swiper-button-next:after) {
    color: #fff;
    font-size: 30px;
}

.project-center-title {
    bottom: 0;
    left: 0;
    height: 50px;
    // line-height: 50px;
    text-align: left;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.other {
    width: 90%;
    margin: auto;

    .hover-scale {
        .case-img {
            img {
                transition: all 3s;
            }

            .imgcase {
                height: 42rem;
            }

            .imgcase1 {
                height: 25rem;
            }
        }

    }

    .hover-scale:hover .case-img img {
        transform: scale(1.2);
    }

    .hover-scale:hover .project-center-title {
        background: #fa8106;
    }

    .hover-scale:hover .project-center-title1 {
        background: #fa8106;
    }
}

.btn {
    cursor: pointer;
    left: 50%;
    transform: translateX(-50%);
    margin: 2rem 0 2rem;
    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: 90%;
    margin: 20px auto;
    text-align: left;

    .details-pic {
        width: 100%;
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;

        .img {
            width: 43%;
            height: 33rem;
            margin-right: 3rem;
            margin-bottom: 3rem;
            overflow: hidden;

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

            img:hover {
                scale: 1.2;
            }
        }
    }
}

@media screen and (max-width: 960px) {
    .btn {
        left: 50%;
        transform: translateX(-50%);
        margin: 2rem auto 1rem;
    }

    .details {
        width: 90%;
        margin: 20px auto;
        text-align: center;

        .details-pic {
            width: 100%;
            padding: 1rem;
            display: flex;
            flex-wrap: wrap;

            .img {
                width: 100%;
                height: 15rem;
                margin-right: 3rem;
                margin-bottom: 3rem;
                overflow: hidden;

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

                img:hover {
                    scale: 1.2;
                }
            }
        }
    }

    .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>