<template>
  <div class="service">
    <ShareOverlay :n-web="true" app-url="xyqb://lsHomePage" />
    <service-search :living-top="livingTop" :region="region" />
    <template v-for="(item, index) in contents">
      <service-nav v-if="+item.elementType === 4" :key="index" :diamond-areas="item.diamondAreas" />
      <service-banner v-if="+item.elementType === 11" :key="index" :banners="item.banners" />
      <service-banner
        v-if="+item.elementType === 10"
        :key="index"
        :banners="[item.transverseBanner]"
      />
    </template>
    <div class="service-list">
      <service-good-list :show-title="false" :service-type="1" />
    </div>
  </div>
</template>

<script>
import ShareOverlay from '@/components/ShareOverlay.vue';
import ServiceSearch from './components/serviceSearch.vue';
import ServiceNav from './components/serviceNav.vue';
import ServiceBanner from './components/serviceBanner.vue';
import ServiceGoodList from '../components/serviceGoodList.vue';
import { livingServicePage } from '@/api/serviceGoods.api';
import localStorage from '@/service/localStorage.service';
export default {
  components: {
    ShareOverlay,
    ServiceSearch,
    ServiceNav,
    ServiceBanner,
    ServiceGoodList
  },
  data() {
    return {
      scrollTop: 0,
      livingTop: {},
      region: {},
      contents: []
    };
  },
  created() {
    const citycode = this.$route.query.citycode;
    citycode && localStorage.set('citycode', citycode);
    this.init();
  },
  methods: {
    init() {
      this.livingServicePage();
    },
    async livingServicePage() {
      const [res, error] = await livingServicePage();
      if (!error) {
        this.livingTop = res?.livingTop;
        this.region = res?.region;
        this.contents = res?.contents;
        console.log(this.livingTop);
      }
    }
  }
};
</script>

<style lang="less" src="./index.less"></style>
