<template>
  <div class="lofty-market-report-title lofty-page-padding">
    <p class="page-title">New Listings</p>
    <span class="last-time">Last 30 Days</span>
  </div>
  <div v-if="list.length>0 && !loading" class="lofty-market-listing-slider">
    <img class="img-background" :src="backgroundImage" alt="">
    <div class="mask"></div>
    <swiper-container init="false" class="swiper-container">
      <swiper-slide v-for="(house, index) in list" :key="index"
                    :class="{'swiper-slide-flow': !isMobile, 'swiper-slide-mobile': isMobile }">
        <house-slider :house="house">
            <div class="lofty-status-tag new">Active</div>
        </house-slider>
      </swiper-slide>
    </swiper-container>
    <template v-if="!isMobile">
      <div class="listing-slider-prev-button">
        <i class="lofty_iconfont lofty-icon-arrow_06_left"></i>
      </div>
      <div class="listing-slider-next-button">
        <i class="lofty_iconfont lofty-icon-arrow_06_right"></i>
      </div>
    </template>
  </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 store from './store.js';
import { register } from "swiper/element/bundle";
register();
import BgImage from '@/static/feature-listing-slider.jpg';
import { isMobile } from "@/util/index.js";
import HouseSlider from "@/module/feature-listing/houseSlider.vue";
import formatHouse from "@/common/format/house-format.js";
import { getHouseOfficeStatus } from '@/common/mls-compliance.js';

const { id } = defineProps({ id: String })
const { module, featureListingName } = store[id]
const backgroundImage = LoftyIdxUtils.static_url(BgImage)

const loading = ref(true)
const list = ref([])
const now = Date.now()
const thirtyDaysAgo = now - 30 * 24 * 60 * 60 * 1000;
const condition = JSON.stringify({
  listingDate: [thirtyDaysAgo, now].join(',')
})
async function getList() {
  const data = {
    pageSize: 50,
    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
  if(list.value.length > 0) {
    nextTick(()=>{
      initSwiper()
    })
  }
}

function initSwiper() {
  const swiperEl = module.$('.swiper-container')
  let params = {
    navigation: {
      prevEl: ".listing-slider-prev-button",
      nextEl: ".listing-slider-next-button",
    },
    loop: list.value.length > 3,
    initialSlide: 1,
    observer: true,
    spaceBetween: isMobile ? 10: 0,
    speed: 1000,
    autoplay: {
      pauseOnMouseEnter: true,
      delay: 5000
    },
    centeredSlides: !isMobile,
    centeredSlidesBounds: false,
    slidesPerView: 'auto',
    effect: 'coverflow',
    coverflowEffect: {
      rotate: 0,
      depth: 0,
      scale: isMobile ? 1 : ((50 - (100 / window.innerWidth) * 100) / 50),
      slideShadows: false
    }
  }
  Object.assign(swiperEl, params);
  swiperEl.initialize();
}

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)
}
onMounted(()=>{
  getList()
})
</script>

<style lang="scss">
.lofty-status-tag {
  width: fit-content;
  padding: 0 5px;
  height: 22px;
  position: absolute;
  right: 30px;
  top: 25px;
  z-index: 7;
  @include media-600 {
    left: 15px;
    top: 15px;
  }
}
.lofty-market-listing-slider {
  width: 100%;
  height: 535px;
  padding-top: 60px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  @include media-600 {
    padding-top: 40px;
    height: 400px;
  }
  .mask, .img-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #FFFFFF 100%);
    left: 0;
    bottom: 0;
  }
  .img-background {
    object-fit: cover;
    filter: grayscale(100%);
  }
}
.swiper-container {
  width: 100%;
  height: 475px;
  position: relative;
  @include media-600 {
    height: 400px;
    padding-left: 10px;
  }
  .swiper-slide-flow {
    width: 50%;
  }
  .swiper-slide-mobile {
    width: calc(100% - 30px) !important;
  }
}
.listing-slider-prev-button,
.listing-slider-next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background: #111111;
  box-shadow: 0 4px 10px 0 #0000001A;
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    left: 0;
    top: 0;
    display: none;
    border-radius: 50%;
  }
  &:hover {
    &:after {
      display: block;
    }
  }
  i {
    color: #fff;
    font-size: 20px;
  }
  &.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
  }
}
.listing-slider-prev-button {
  left: calc(25% - 75px);
}
.listing-slider-next-button {
  right: calc(25% - 75px);
}
.lofty-more {
  margin: 40px auto;
  min-width: 200px;
  width: fit-content;
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: solid 1px #111;
  font-family: var(--lofty-font-regular);
  @include media-600 {
    margin-top: 20px;
  }
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
<style lang="scss">
.lofty-market-listing-slider {
  .lofty-feature-listing-house {
    .lofty-house-price {
      top: 65px;
      @include media-600 {
        top: 235px;
      }
    }
  }
}
.swiper-slide-prev, .swiper-slide-next {
  .lofty-feature-listing-house {
    .lofty-house-price, .lofty-mls-info, .lofty-house-info, .lofty-feature-address, .collect {
      display: none;
    }
  }
}
</style>