<template>
    <div class="bg-[#F8F8F8] pt-15" style="min-height: calc(100vh - 70px);">
        
        <div class="sticky top-50 z-50 flex items-center justify-between text-[12px] px-[15px]">
            <NuxtLink to="/house/newHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
                <img class="w-[30px] h-[30px]" :src="newHouseIcon" alt="">
                <span class="text-[#707070] font-bold ">新房</span>
            </NuxtLink>
            <NuxtLink to="/house/oldHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
                <img class="w-[30px] h-[30px]" :src="oldHouseIcon" alt="">
                <span class="text-[#707070] font-bold ">二手房</span>
            </NuxtLink>
            <div @click="showModal=true" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
                <img class="w-[30px] h-[30px]" :src="saleHouseIcon" alt="">
                <span class="text-[#707070] font-bold ">卖房</span>
            </div>
            <NuxtLink to="/house/rentHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
                <img class="w-[30px] h-[30px]" :src="rentHouseIcon" alt="">
                <span class="text-[#707070] font-bold ">租房</span>
            </NuxtLink>
        </div>
        <div class="text-[#292929] p-15 text-[16px]">
            新开楼盘
        </div>
        <div class="px-15 flex flex-wrap justify-between justify-bewtween">
            <NuxtLink :to="`/house/newHouse/${item.id}`" v-for="item in dataList" :key="item.id" class="w-[48%] mb-15">
                <div class="w-full aspect-[1/1] rounded overflow-hidden bg-[#f5f5f5]">
                    <img :src="item.coverUrl" class="w-full h-full object-cover" alt="" />
                </div>
                <div class="w-full truncate text-[#444] font-bold text-[14px] mt-[12px]">
                    {{ item.houseTitle }}
                </div>
                <div class="flex items-center font-bold">
                    <span class="text-[#FF1A1A] text-[14px]">{{item.currency}}{{ item.averagePrice }}</span>
                    <span class="text-[#666] text-[12px]">/m²</span>
                </div>
            </NuxtLink>
        </div>
        <div v-if="showModal"  class="fixed top-0 left-0 w-full h-full flex items-center justify-center " style="background:rgba(0,0,0,0.5);z-index:1000">
            <div class="animation-in">
                <div class="w-[246px] h-[246px] rounded-[10px] flex flex-col items-center justify-center" :style="{background:`url(${modalBgIcon})`,backgroundSize:'100% 100%'}">
                    <div class="w-[157px] h-[157px] bg-[#fff]">

                    </div>
                    <div class="text-[#242424] text-[12px] font-bold mt-15">
                        扫码联系我们专业卖房顾问！！！
                    </div>
                </div>
                <div class="w-[50px] h-[50px] rounded-full overflow-hidden flex items-center justify-center" style="background:rgba(0,0,0,0.6);margin:0 auto;margin-top:30px;">
                    <van-icon @click="showModal=false" name="cross" color="#fff" size="30" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import newHouseIcon from '~/assets/img/house/newHouse.png';
import oldHouseIcon from '~/assets/img/house/oldHouse.png';
import saleHouseIcon from '~/assets/img/house/saleHouse.png';
import rentHouseIcon from '~/assets/img/house/rentHouse.png';
import modalBgIcon from '~/assets/img/house/modalBg.png';


const { data: dataList, status } = useMyFetch(`/website/house/sale/viewNewHouseList`)

const showModal = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const params = ref('')

async function getList(){
    const p= `?pageNum=${pageNum.value}&pageSize=${pageSize.value}${params.value}`
    
}
function filterChange(param){
    console.log('filter change:',param)
}
</script>

<style scoped>
.animation-in{
    animation: show .5s ease-in-out;
}
@keyframes show{
    0%{
        transform: scale(0.5);
    }
    100%{
        transform: scale(1);
    }
}
</style>