<template>
  <div class="lofty-market-report-title">
    <p class="page-title">Pending Listings</p>
  </div>
  <div v-if="list.length>0 && !loading" class="lofty-listing pending-listing">
    <house-card class="list-card" v-for="house in list" :house="house"></house-card>
  </div>
  <div v-if="list.length>0&&!loading" @click="moreClick" class="lofty-more">More</div>
  <div v-if="list.length===0&&!loading" class="lofty-no-listing">
    <i class="lofty_iconfont lofty-icon-house_02"></i>
    <div class="no-listing-text">No Listing Found</div>
  </div>
</template>

<script setup>
import http from '@/api'
import formatHouse from "@/common/format/house-format.js";
import HouseCard from "@/components/house-card/index.vue";
import store from "./store.js";
import { isMobile } from "@/util/index.js";
import { getHouseOfficeStatus } from '@/common/mls-compliance.js';

const { id } = defineProps({ id: String })
const { featureListingName, getPageSize } = store[id]

const list = ref([])
const loading = ref(true)

onMounted(()=>{
  getList()
})

const condition = JSON.stringify({
  listingStatus: ['Pending']
})
async function getList() {
  const data = {
    pageSize: getPageSize(),
    page: 1,
    listingType: 'featured-listing',
    featureListingName: featureListingName.value,
    condition: condition
  }
  const res = await http.get('/search/realTimeListings', { data, action: 'lofty_idx_api' })
  if(res.data.listings?.length){
    const resOfficeStatus = await getHouseOfficeStatus(res.data, false);
    res.data = {...res.data, ...resOfficeStatus}
  }
  res.data.listings.forEach(item => formatHouse(item))
  list.value = res.data.listings
  loading.value = false
}

function moreClick() {
  const a = document.createElement('a')
  a.href = `/listing/?pageKey=search&featureListingName=${featureListingName.value}&condition=${encodeURIComponent(condition)}`
  a.target = isMobile ? '_self' : '_blank';
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
</script>
<style lang="scss">
@use './house' as *;
.pending-listing {
  .lofty-icon-heart-fill, .lofty-icon-heart {
    right: 10px;
    bottom: 15px;
    top: unset;
  }
}
</style>