<template>
  <div class="good" :class="{ stopScroll: goodsStatus === 0 }">
    <template v-if="goodsStatus !== 41">
      <!-- <good-nav /> -->
      <good-swiper />
      <template v-if="goodsStatus !== 0">
        <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>
      <transition name="fade">
        <skeleton v-if="goodsStatus === 0" />
      </transition>
    </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>
