<template>
  <div class="good" :class="{ stopScroll: goodsStatus === 0 }">
    <template v-if="goodsStatus !== 41">
      <good-nav />
      <good-swiper />
      <div class="good__body">
        <div class="good__base">
          <template v-if="!hidePrice">
            <activity-price />
            <discount-bar />
            <subscribe-bar />
            <max-member-bar />
          </template>
          <good-title />
        </div>
        <div v-if="!hidePrice" class="good__base">
          <good-cell-group />
        </div>
        <div v-if="!hidePrice" class="good__base">
          <comment-lite />
        </div>
        <div class="good__base">
          <detail-img />
          <price-desc />
        </div>
      </div>
      <common-popup />
      <goods-action v-if="!hidePrice" />
    </template>
    <div class="good__body">
      <div class="good__base"><empty-good v-if="goodsStatus === 41" /></div>
      <goods-card
        v-if="!hidePrice && similarityList.length"
        :goods-list="similarityList"
        header-type="image"
      />
    </div>
    <transition name="fade">
      <skeleton v-if="goodsStatus === 0" />
    </transition>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapState } from './store';
import { jumpTargetPlatformPage } from '@/service/yxmLogin.service';
import goodNav from './components/goodNav.vue';
import goodSwiper from './components/goodSwiper.vue';
import activityPrice from './components/activityPrice.vue';
import discountBar from './components/discountBar.vue';
import subscribeBar from './components/subscribeBar.vue';
import maxMemberBar from './components/maxMemberBar.vue';
import goodTitle from './components/title.vue';
import goodCellGroup from './components/goodCellGroup.vue';
import commentLite from './components/commentLite.vue';
import detailImg from './components/detailImg.vue';
import priceDesc from './components/priceDesc.vue';
import commonPopup from './components/commonPopup.vue';
import goodsAction from './components/goodsAction.vue';
import goodsCard from '@/components/goodsCard.vue';
import emptyGood from './components/emptyGood.vue';
import skeleton from './components/skeleton.vue';

export default {
  // eslint-disable-next-line vue/name-property-casing
  name: 'goodDetail',
  components: {
    goodNav,
    goodSwiper,
    activityPrice,
    discountBar,
    subscribeBar,
    maxMemberBar,
    goodTitle,
    goodCellGroup,
    commentLite,
    detailImg,
    priceDesc,
    commonPopup,
    goodsAction,
    goodsCard,
    emptyGood,
    skeleton
  },
  data() {
    return {
      detailParams: {
        skuNo: '',
        receiverId: '',
        count: 1
      },
      detail: {}
    };
  },
  computed: {
    ...mapGetters(['hidePrice', 'goodsStatus']),
    ...mapState(['similarityList'])
  },
  // watch: {
  //   $route(to, from) {
  //     // 对路由变化作出响应...
  //     if (to.path == from.path && to.fullPath != from.fullPath) {
  //       this.getDetail({ ...this.$route.query });
  //     }
  //   }
  // },
  created() {
    this.handleCustomerInto();
    const { query, params } = this.$route;
    this.getDetail({ ...query, goodsOrgImage: params?.goodsOrgImage });
  },
  mounted() {
    this.$track.registeredEvents('H5_2B_CommodityDetailPageExposure');
  },
  beforeRouteUpdate(to, from, next) {
    const { query, params } = to;
    this.getDetail({ ...query, goodsOrgImage: params?.goodsOrgImage });
    next();
  },
  // beforeRouteLeave(_, __, next) {
  //   this.reset();
  //   next();
  // },
  methods: {
    ...mapActions({
      getDetail: 'getGoodDetail',
      reset: 'reset'
    }),
    handleCustomerInto() {
      try {
        jumpTargetPlatformPage('goodDetail', this.$route.query, true);
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.card-base {
  background-color: @white;
  border-radius: @border-radius-md;
  margin-bottom: @padding-sm;
}
.good {
  position: relative;
  padding-bottom: 60px;
  &.stopscroll {
    height: 100vh;
    overflow: hidden;
    padding-bottom: 0;
  }
  &__body {
    padding: @padding-xs;
  }
  &__base {
    .card-base;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
