<template>
  <div class="Si" :class="{ 'Si-bottom': hasStock }">
    <ShareOverlay v-if="!snapShot" :n-web="true" :app-url="appUrl" />
    <template v-if="loading && !lowerShelf">
      <service-tip v-if="!snapShot" />
      <div class="Si-swiper" :class="{ noPadding: snapShot }">
        <service-swiper :img-list="serviceData.imageList" />
      </div>
      <service-info :snap-shot="snapShot" :service-data="serviceData" :store-info="storeInfo" />
      <service-package :package-contents="serviceData.packageContents" />
      <service-instructions :instructions="serviceData.purchaseInstructions" />
      <service-store :store-info="storeInfo" />
      <div v-if="!snapShot" class="Si-card">
        <template v-if="serviceData.commentInfo.commentInfoVoList">
          <service-title
            title="商品评价"
            :sub-title="serviceData.commentInfo.commentCountStr"
            right-text="全部评价"
          />
          <service-evaluate :comment-info="serviceData.commentInfo" />
        </template>
        <service-title v-else title="暂无评价" />
      </div>
      <service-pricedesc :price-desc="serviceData.priceDesc" />
    </template>
    <service-empy v-if="loading && lowerShelf" />
    <template v-if="!snapShot">
      <service-good-list :params="recommendParams" :service-type="0" />
      <service-footer v-if="loading && !lowerShelf" :has-stock="hasStock" />
    </template>
    <!-- <div v-if="!loading" class="Si-loading" /> -->
  </div>
</template>

<script>
import ShareOverlay from '@/components/ShareOverlay.vue';
import ServiceTip from '../components/serviceTip.vue';
import ServiceSwiper from '../components/serviceSwiper.vue';
import ServiceInfo from './components/serviceInfo.vue';
import ServicePackage from './components/servicePackage.vue';
import ServiceInstructions from './components/serviceInstructions.vue';
import ServiceStore from './components/serviceStore.vue';
import ServiceTitle from '../components/serviceTitle.vue';
import ServiceEvaluate from '../components/serviceEvaluate.vue';
import ServicePricedesc from './components/servicePricedesc.vue';
import ServiceEmpy from '../components/serviceEmpy.vue';
import ServiceGoodList from '../components/serviceGoodList.vue';
import ServiceFooter from './components/serviceFooter.vue';

import { queryServiceSku } from '@/api/serviceGoods.api';
import { jumpTargetPlatformPage } from '@/service/yxmLogin.service';
import { isApp } from '@/service/validation.service';
export default {
  components: {
    ShareOverlay,
    ServiceTip,
    ServiceSwiper,
    ServiceInfo,
    ServicePackage,
    ServiceInstructions,
    ServiceStore,
    ServiceTitle,
    ServiceEvaluate,
    ServicePricedesc,
    ServiceEmpy,
    ServiceGoodList,
    ServiceFooter
  },
  data() {
    return {
      loading: false,
      finished: false,

      serviceData: {
        imageList: [], // 轮播图
        purchaseInstructions: [], // 购买须知
        priceDesc: [], // 价格说明
        packageContents: [], // 套餐
        commentInfo: {} // 评价
      }
    };
  },
  computed: {
    appUrl() {
      const { skuNo, shopId } = this.serviceData;
      return `xyqb://lsGoodsDetail?skuNo=${skuNo}&shopId=${shopId}`;
    },
    // 是否下架
    lowerShelf() {
      return this.serviceData.goodsStatus === 4;
    },
    // 是否有库存
    hasStock() {
      return this.serviceData.goodsStatus === 5;
    },
    storeInfo() {
      const store = this.serviceData.applicableStoreInfo || {};
      const { storeCnt, stores = [] } = store;
      const [fisrtItem = {}] = stores;
      return { storeCnt, ...fisrtItem };
    },
    recommendParams() {
      const goodsId = this.$route.query.skuNo;
      return { goodsId };
    },
    snapShot() {
      return this.$route.query?.scene === 'snapshot';
    }
  },
  created() {
    try {
      isApp && jumpTargetPlatformPage('lsGoodsDetail', this.$route.query, true);
    } catch (err) {
      console.log(err);
    }
    this.$store.dispatch('change_loading', true);
    this.init();
  },
  methods: {
    init() {
      this.getServiceGoods();
    },
    async getServiceGoods() {
      const { skuNo, shopId } = this.$route.query;
      const [res, error] = await queryServiceSku({ skuNo, shopId });
      if (!error) {
        console.log(res);
        this.$set(this, 'serviceData', {
          ...res,
          imageList: res.imageList
        });
        this.loading = true;
      }
      this.finished = Boolean(error);
      this.$store.dispatch('change_loading', false);
    }
  }
};
</script>

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