<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '房屋',
  },
}
</route>
<template>
  <view class="house-page">
    <NavBar />
    <view class="p-15" v-for="cityItem in cityList" :key="cityItem.id">
      <view class="text-16 pl-15">{{ cityItem.region }}</view>
      <view class="mt-15 bg-white p-15 rounded-10 grid grid-cols-2 gap-15">
        <view v-for="houseItem in cityItem.house_list" :key="houseItem.id">
          <image class="w-150 h-170" :src="houseItem.house_image" mode="aspectFill" />
          <view class="flex items-center justify-between py-10">
            <view
              class="text-14 bg-[linear-gradient(to_right,#3B81F3,#37E6EC)] text-transparent"
              style="background-clip: text"
            >
              {{ houseItem.size }}平
            </view>
            <view class="text-12 text-#999">认购点{{ houseItem.buy_price }}点</view>
          </view>
          <view
            class="text-12 text-center bg-[linear-gradient(to_right,#3B81F3,#37E6EC)] text-white py-8 rounded-full"
            @click="handleClick(houseItem)"
          >
            领取
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { buyHouseAPI, getHouseListAPI } from '@/service'
import { useUserStore } from '@/store'
import { showModal } from '@/utils'

defineOptions({
  name: 'Home',
})

const userStore = useUserStore()
const handleClick = async (item: any) => {
  await showModal('确认领取?')
  await buyHouseAPI({
    house_id: item.id,
  })
  await userStore.loadUserInfo()
  uni.showToast({
    title: '领取成功',
    icon: 'none',
  })
}

const cityList = ref<any[]>([])

onMounted(async () => {
  const res = await getHouseListAPI()
  cityList.value = res.data.list
})
</script>

<style>
.house-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/bg.png');
  background-position: top;
  background-size: cover;
}
</style>
