mall4pc-bbc/pages/detail/_prodId.vue

<template>
  <div class="detail">
    <!-- 面包屑导航 -->
    <div class="crumbs-shop">
      <div class="content">
        <div class="crumbs">
          <!-- <a href="javascript:void(0)"
             class="item-a">首页</a>
          <span class="arrow">></span>
          <a href="javascript:void(0)"
             class="item-a">数码科技</a>
          <span class="arrow">></span>
          <a href="javascript:void(0)"
             class="item-a">手机</a>
          <span class="arrow">></span>
          <span class="item-span">iPhone 11 Pro Max</span>-->
        </div>
        <div class="shop-box">
          <nuxt-link :to="'/shopIndex?sid=' + prodInfo.shopId" class="shop">
            <i class="self" v-if="shopInfo && shopInfo.shopId === 1">{{
              $t('prodDetail.selfEmployed')
            }}</i>
            <i class="shop-icon" v-if="shopInfo && shopInfo.shopId != 1"></i>
            {{ shopInfo ? shopInfo.shopName : '' }}
          </nuxt-link>

          <a
            href="javascript:void(0)"
            @click="toChatIm(prodInfo)"
            class="im-chat"
            ><span class="btn-im"></span
            >{{ $t('prodDetail.contactCustomerService') }}</a
          >

          <span
            class="favourite"
            v-if="!isShopCollection"
            @click="toggleShopCollect"
          >
            <i class="favourite-icon"></i
            >{{ $t('prodDetail.collectionStores') }}
          </span>
          <span class="favourite active" @click="toggleShopCollect" v-else>
            <i class="favourite-icon"></i>{{ $t('prodDetail.collectedStores') }}
          </span>
        </div>
      </div>
    </div>
    <!-- /面包屑导航 -->

    <div class="content">
      <div class="detail-up">
        <!-- 商品图片 -->
        <div class="img">
          <div class="big-img">
            <img v-if="(!prodInfo.video || !showVideo) && prodInfo.pic" :src="prodInfo.pic" alt @error="changePicUrl" />
            <img v-if="(!prodInfo.video || !showVideo) && !prodInfo.pic" src="~/assets/img/def.png" alt />
            <!-- 商品视频 -->
            <video
              v-show="showVideo"
              id="prodVideo"
              class="big-img prod-video"
              :src="prodInfo.video"
              controls
            ></video>

            <!-- 商品视频end -->
            <div class="oper-btn" v-if="showPlayBtn && prodInfo.video">
              <img
                src="~/assets/images/play.png"
                @click="playVideo"
                alt="播放"
              />
            </div>
            <div class="close-btn" v-if="!showPlayBtn && showVideo">
              <img
                src="~/assets/images/close.png"
                alt="关闭"
                @click="stopVideo"
              />
            </div>
          </div>
          <div class="small-img">
            <i
              class="left-arrow"
              @click="prevImg"
              :class="{
                limit: prodImgs.length - 5 <= 0 || this.offsetCount < 1
              }"
              >&lt;</i
            >
            <i
              class="right-arrow"
              @click="nextImg"
              :class="{
                limit:
                  prodImgs.length - 5 <= 0 ||
                  this.offsetCount >= prodImgs.length - 5
              }"
              >&gt;</i
            >
            <div class="img-box">
              <div class="offset-box" ref="carouser">
                <div
                  class="item"
                  v-for="(item, index) in prodImgs"
                  :key="index"
                  :class="{ active: item.isActive }"
                  @mouseover="changeProdImg(index)"
                >
                  <img :src="item.img"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /商品图片 -->
        <!-- 商品详情 -->
        <div class="info">
          <div class="name-box">
            <div class="name">{{ prodInfo.prodName }}</div>
            <div class="des">
              <div :title="prodInfo.brief" class="brief">
              {{ prodInfo.brief }}
              </div>
              <!-- <span
                v-if="
                  prodInfo.brief &&
                    prodInfo.brief !== null &&
                    discountDet.length > 0 &&
                    prodInfo.prodType != 5
                "
                >,</span
              > -->
              <span class="discount-info" v-if="discountDet.length && prodInfo.prodType != 5">
                <a
                  href="javascript:void(0)"
                  class="go-discount"
                  @click="toDiscountDetail(discountDet[0].discountId)"
                >
                  {{ discountDet[0].discountName
                  }}{{ $t('prodDetail.specialZone') }}，{{
                    discountDet[0].endTime.substring(0, 10)
                  }}{{ $t('prodDetail.deadline') }}，{{
                    $t('prodDetail.grabYourCopyNow')
                  }}
                  <span class="arr">&gt;&gt;</span>
                </a>
              </span>
            </div>
          </div>
          <!-- 预售商品 -->
          <div
            class="activity"
            v-if="prodInfo.preSellStatus == 1 && prodInfo.prodType != 1"
          >
            <div class="name group-buy">{{ $t('prodDetail.preSale') }}</div>
            <div class="limit">
              {{ $t('prodDetail.expected') }}&nbsp;&nbsp;{{
                prodInfo.preSellTime
              }}&nbsp;&nbsp;{{ $t('prodDetail.startShipping') }}
            </div>
          </div>
          <!-- /预售商品 -->
          <!-- 拼团商品 -->
          <div
            class="activity"
            v-if="prodInfo.prodType == 1 && prodInfo.code !== -1"
          >
            <div class="name group-buy">
              {{ $t('prodDetail.groupingTogetherForMoreBenefits') }}
            </div>
            <div class="limit">
              {{ $t('prodDetail.distanceActivity') }}
              {{ countdown.obj.signs ? $t('end') : $t('start') }}
              {{ $t('onlyLeft') }}：
              <span class="time" v-if="countdown.obj.day"
                >{{ countdown.obj.day }}{{ $t('day')
                }}{{ countdown.obj.hou }}:{{ countdown.obj.min }}:{{
                  countdown.obj.sec
                }}</span
              >
              <span class="time" v-else
                >{{ countdown.obj.hou }}:{{ countdown.obj.min }}:{{
                  countdown.obj.sec
                }}</span
              >
            </div>
          </div>
          <!-- /拼团商品 -->
          <div class="price-box">
            <div class="item goods-price">
              <span class="tit">{{ $t('price') }}</span>
              <div class="con">
                <div class="price">
                  ￥
                  <span class="big">{{ parsePrice(defaultSku.price)[0] }}</span>
                  .{{ parsePrice(defaultSku.price)[1] }}
                </div>
                <!-- 商品销售价大于市场价时 不展示市场价 -->
                <div
                  class="old-price"
                  v-if="
                    defaultSku.oriPrice &&
                      defaultSku.oriPrice > defaultSku.price
                  "
                >
                  ￥{{ defaultSku.oriPrice }}
                </div>
              </div>
              <span v-if="findSku" class="tit">{{
                $t('prodDetail.remainingInventory')
              }}</span>
              <div v-if="findSku" class="con">
                {{ defaultSku.stocks }}
              </div>
            </div>
            <!-- 预售 -->
            <div
              class="item coupons"
              v-if="
                prodInfo.prodType == 1 &&
                  prodInfo.code !== -1 &&
                  prodInfo.preSellStatus == 1
              "
            >
              <span class="tit">{{ $t('prodDetail.preSale') }}</span>
              <div class="con pre-sale-red">
                {{ $t('prodDetail.thisItemIsAPreSaleItem') }}，{{
                  $t('prodDetail.expected')
                }}&nbsp;&nbsp;{{ prodInfo.preSellTime | cutDate }}&nbsp;&nbsp;{{
                  $t('prodDetail.startShipping')
                }}
              </div>
            </div>
            <!-- /预售 -->
            <!-- 领券 -->
            <div class="item coupons" v-if="couponList.length > 0 && prodInfo.prodType != 5">
              <span class="tit">{{ $t('vouchers') }}</span>
              <div class="con">
                <div
                  class="coupon-block"
                  v-for="coupon in couponList"
                  :key="coupon.couponId"
                  @click="receiveCoupon(coupon)"
                >
                  <span
                    class="conpon"
                    v-if="coupon.couponType == 1 && $t('full') == '满'"
                    >{{ $t('full') }}{{ $t('yuan') + coupon.cashCondition }}{{ $t('less')
                    }}{{ $t('yuan') }}{{ coupon.reduceAmount }}</span
                  >
                  <span
                    class="conpon"
                    v-if="coupon.couponType == 2 && $t('full') == '满'"
                    >{{ $t('full') }}{{$t('yuan') + coupon.cashCondition }}{{ $t('enjoy')
                    }}{{ coupon.couponDiscount }}{{ $t('fold') }}</span
                  >

                  <!-- 英文版优惠卷样式 -->
                  <span
                    class="conpon"
                    v-if="coupon.couponType == 1 && $t('full') != '满'"
                    >{{$t('yuan') +  coupon.reduceAmount + ' off over '
                    }}{{$t('yuan') +  coupon.cashCondition }}</span
                  >
                  <span
                    class="conpon"
                    v-if="coupon.couponType == 2 && $t('full') != '满'"
                    >{{ coupon.couponDiscount + '%' + ' off over' }}
                    {{$t('yuan') +  coupon.cashCondition }}</span
                  >
                </div>
                <nuxt-link to="/coupons" class="more">
                  {{ $t('more') }}
                  <i class="arrow">>></i>
                </nuxt-link>
              </div>
            </div>
            <!-- /领券 -->
            <!-- 限时特惠 -->
            <div class="item discount" v-if="(discountDet.length && prodInfo.prodType != 5) || prodInfo.giveaway && prodInfo.giveaway.giveawayProds.length">
              <span class="tit">{{ $t('promotion') }}</span>
              <div class="con">
                <div class="discount-con">
                  <div
                    class="discount-item"
                    v-if="prodInfo.giveaway  && prodInfo.giveaway.giveawayProds.length"
                  >
                    <div class="type">
                      {{ $t('prodDetail.gift') }}
                    </div>

                    <nuxt-link :to="'/detail/' + item.prodId" class="packge-item" v-for="(item, giveawayProdsIndex) in prodInfo.giveaway.giveawayProds" :key="giveawayProdsIndex">
                      <img class="img" :src="item.pic" alt="">
                      <div class="count">×{{ item.giveawayNum }}</div>
                    </nuxt-link>
                  </div>
                  <div
                    class="discount-item"
                    :class="index > 0 ? 'item-box' : ''"
                    v-for="(item, index) in discountDet"
                    :key="item.discountId"
                  >
                    <div class="type">
                      {{
                        [
                          $t('prodDetail.fullAmountReduction'),
                          $t('prodDetail.fullPieceDiscount'),
                          $t('prodDetail.fullDiscount'),
                          $t('prodDetail.discountOnFullItems')
                        ][item.discountRule]
                      }}
                    </div>
                    <div class="text">{{ item.discountName }}</div>
                    <a
                      href="javascript:void(0)"
                      class="det"
                      @click="toDiscountDetail(item.discountId)"
                    >
                      {{ $t('more') }}
                      <span class="arr">&gt;&gt;</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- /限时特惠 -->
            <!-- 虚拟商品-说明 -->
            <div
              v-if="
                prodInfo.mold === 1 &&
                  (prodInfo.writeOffNum !== 0 ||
                    (prodInfo.writeOffNum === 0 && prodInfo.isRefund === 0))
              "
              class="item"
            >
              <span class="tit">{{ $t('prodDetail.instructions') }}</span>
              <!-- writeOffNum 0无需核销 1单次核销 -1多次核销 -->
              <span v-if="prodInfo.writeOffNum !== 0">
                <!-- writeOffTime核销有效期 -1.长期有效 0.自定义 1.当天24点前 x.x天内有效 -->
                <span v-if="prodInfo.writeOffTime === -1">{{
                  $t('prodDetail.longTermValidity')
                }}</span>
                <span v-else-if="prodInfo.writeOffTime === 0"
                  >{{ $t('prodDetail.afterPurchase') }}
                  {{ prodInfo.writeOffStart }} {{ $t('prodDetail.to') }}
                  {{ prodInfo.writeOffEnd }}
                  <i v-if="$t('language') == 'zh'">{{
                    $t('prodDetail.effective')
                  }}</i></span
                >
                <span v-else-if="prodInfo.writeOffTime === 1">{{
                  $t('prodDetail.validOnTheSameDay')
                }}</span>
                <span v-else
                  >{{ $t('prodDetail.purchase') }}{{ prodInfo.writeOffTime
                  }}{{ $t('prodDetail.validDay') }}</span
                >
              </span>
              <!-- isRefund 0不支持退款 1支持退款 -->
              <span v-if="prodInfo.isRefund === 0"
                ><span v-if="prodInfo.writeOffNum !== 0">，</span
                >{{ $t('prodDetail.refundsAreNotAllowed') }}</span
              >
            </div>
            <!-- <div class="item distribution">
              <span class="tit">配送</span>
              <div class="con">限时免邮（新疆、内蒙等地区除外）</div>
            </div>-->
          </div>
          <div class="sku-box" v-if="prodInfo.skuList.length">
            <div
              class="items sku-text"
              v-for="(skuLine, key) in skuGroup"
              :key="key"
            >
              <span class="tit">{{ key }}</span>
              <div class="con">
                <span
                  class="item"
                  @click="toChooseItem(skuLineItem, key, $event)"
                  :class="[
                    selectedProp.find(
                      el => el.key === key && el.value === skuLineItem
                    )
                      ? 'active'
                      : '',
                    isSkuLineItemNotOptional(
                      allProperties,
                      selectedPropObj,
                      key,
                      skuLineItem,
                      propKeys
                    )
                      ? 'not-optional'
                      : ''
                  ]"
                  v-for="(skuLineItem, index) in skuLine"
                  :key="index"
                  >{{ skuLineItem }}</span
                >
              </div>
            </div>
          </div>
          <!-- 计数器 -->
          <div class="sku-box">
            <div class="items">
              <span class="tit">{{ $t('quantity') }}</span>
              <div class="con">
                <div class="goods-number" onselectstart="return false">
                  <span
                    :class="['reduce', this.prohibit1 ? 'limit' : '']"
                    @click="reduce"
                    >-</span
                  >
                  <!-- <input type="number" class="number" v-model="prodNum" /> -->
                  <input
                    type="number"
                    class="number"
                    v-model="prodNum"
                    oninput="value=value.replace(/[^\d]/g,'')"
                    @blur="judgeInput"
                  />
                  <span
                    :class="['increase', this.prohibit2 ? 'limit' : '']"
                    @click="increase"
                    >+</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="btns"
            v-if="
              (prodInfo.prodType != 1 || (prodInfo.prodType === 1 && !activityId)) && prodInfo.prodType != 5
            "
          >
            <a
              href="javascript:void(0)"
              class="buy-now"
              @click="buyNow"
              v-if="
                prodInfo.prodType != 1 ||
                  (prodInfo.prodType === 1 &&
                    !activityId &&
                    findSku &&
                    defaultSku.stocks)
              "
              >{{ $t('buyNow') }}</a
            >
            <a
              href="javascript:void(0)"
              class="shortage"
              v-else-if="!findSku"
              >{{ $t('prodDetail.productNotInStock') }}</a
            >
            <a
              href="javascript:void(0)"
              class="shortage"
              v-else-if="!defaultSku.stocks"
              >{{ $t('prodDetail.productOutOfStock') }}</a
            >
            <a
              href="javascript:void(0)"
              class="add-cart"
              v-if="findSku && defaultSku.stocks && prodInfo.mold !== 1"
              @click="addToCart"
              >{{ $t('prodDetail.addToCart') }}</a
            >
            <a
              href="javascript:void(0)"
              class="collect"
              v-if="!isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{ $t('prodDetail.collectionOfProducts') }}
            </a>
            <a
              href="javascript:void(0)"
              class="collected"
              v-if="isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{ $t('prodDetail.bookmarked') }}
            </a>
          </div>
          <!-- 活动商品按钮 -->
          <div v-if="prodInfo.prodType == 5" class="btns">
            <a
              href="javascript:void(0)"
              class="shortage"
              >{{ $t('prodDetail.notAvailableForPurchase') }}</a
            >
          </div>
          <!-- 拼团按钮 -->
          <div
            class="btns group-btn"
            v-if="prodInfo.prodType === 1 && activityId"
          >
            <a
              href="javascript:void(0)"
              :class="[
                'build-group',
                countdown.obj.signs ? '' : 'disabled-gray',
                this.$store.state.locale == 'en' ? 'en' : ''
              ]"
              v-if="findSku"
            >
              <span class="group-price"
                >￥{{
                  groupSku.actPrice ? groupSku.actPrice.toFixed(2) : ''
                }}</span
              >
              <span class="group-text">{{
                $t('prodDetail.iWantToOpenAGroup')
              }}</span>
              <!-- <span class="group-code">
                <span class="text">手机扫码开团</span>
                <span class="code-img">
                  <img :src="miniQrCodeImg" alt />
                </span>
              </span>-->
              <div class="group-code">
                <span class="text">{{
                  countdown.obj.signs
                    ? $t('prodDetail.cellPhoneScanCodeOpenGroup')
                    : $t('prodDetail.groupingActivitiesHaveNotStarted')
                }}</span>
                <div
                  :class="[
                    'code-img',
                    countdown.obj.signs ? '' : 'display-none'
                  ]"
                  id="spellQrcode"
                ></div>
              </div>
            </a>
            <a
              href="javascript:void(0)"
              :class="[
                'alone-group',
                !findSku ? 'cannotbuy' : '',
                this.$store.state.locale == 'en' ? 'en' : ''
              ]"
              @click="buyNow"
            >
              <span class="group-price"
                >￥{{ Number(defaultSku.price).toFixed(2) }}</span
              >
              <span class="group-text">{{
                $t('prodDetail.separatePurchase')
              }}</span>
            </a>
            <a
              href="javascript:void(0)"
              class="add-cart add-cart-group"
              v-if="findSku"
              @click="addToCart"
            >
              <!-- && defaultSku.stocks -->
              <span>{{ $t('prodDetail.addToCart') }}</span>
            </a>
            <a
              href="javascript:void(0)"
              class="collect"
              v-if="!isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{ $t('prodDetail.collectionOfProducts') }}
            </a>
            <a
              href="javascript:void(0)"
              class="collected"
              v-if="isCollection"
              @click="toggleCollect()"
            >
              <i class="icon"></i>{{ $t('prodDetail.bookmarked') }}
            </a>
          </div>
          <!-- /拼团按钮 -->
        </div>
        <!-- 商品详情 -->
      </div>
      <div class="detail-down" v-if="comboList && comboList.length">
        <div class="introduce-box packages">
          <div class="tab">
            <div
              class="item"
              :class="{active: selectComboId === combo.comboId }"
              v-for="(combo,index) in comboList"
              @click="selectCombo(combo.comboId)"
              :key="index"
            >
              {{ combo.name }}
            </div>
          </div>
          <!-- defaultCombo -->
          <div class="packages-content" v-if="defaultCombo">
            <div class="left">
              <div class="prod-box">
                <img class="img" :src="defaultCombo.mainProd.pic" alt="">
                <div class="prod-name">{{ defaultCombo.mainProd.prodName }}</div>
                <div class="price">
                  ￥{{ defaultCombo.mainProd.comboPrice | price }}
                  <span class="combo-count">x {{defaultCombo.mainProd.leastNum}}</span>
                </div>
              </div>
              <div class="add-icon" v-if="defaultCombo.matchingProds.length"></div>
              <div class="prod-box necessary" v-for="(item, index) in defaultCombo.matchingProds" :key="index">
                <img class="img" :src="item.pic" alt="">
                <div class="prod-name">{{ item.prodName }}</div>
                <div class="price">
                  <div class="price-count-con">
                    <input
                      type="checkbox"
                      class="checkbox default"
                      @click="selectComboItem(item)"
                      :class="{ checked: isChecked(item), default: 1 }"
                    />
                    <span>￥{{ item.comboPrice | price }}</span>
                  </div>
                  <span class="combo-count">x {{item.leastNum}}</span>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="mean-icon"></div>
              <div class="settlement-box">
                <div class="text">{{ $t("package.selected") }}{{ choiceCombNum }}{{ $t("package.packageItem") }}</div>
                <div class="text item">
                  {{ $t("package.packagePrice") }}
                  <span class="price-text item">￥{{ comboAmount }}</span>
                </div>
                <div class="btn item" @click="handleSelectPackage">{{ $t("buyNow") }}</div>
                <div class="btn-add-cart item" @click="handleSelectPackage">{{ $t("prodDetail.addToCart") }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-down detail-comment">

        <div class="introduce-box">
          <div class="tab">
            <div
              :class="['item', introduceOrCommentInt ? 'active' : '']"
              @click="toggleIntroduceInt"
            >
              {{ $t('prodDetail.productIntroduction') }}
            </div>
            <div
              :class="['item', introduceOrCommentCom ? 'active' : '']"
              @click="toggleIntroduceCom"
            >
              {{ $t('prodDetail.productReviews') }}
              <i class="number">（{{ prodCommData.number }}）</i>
            </div>
          </div>
          <!-- <transition name="fade"> -->
          <!-- 商品介绍 -->
          <div class="introduce" v-show="introduceOrCommentInt">
            <div>
              <div class="params" v-for="(params, index) in prodParameterList" :key="index">
                <div
                  class="params-box"
                  v-for="item in params"
                  :key="item.prodParameterId"
                >
                  <div class="key">{{ item.parameterKey }}</div>
                  <div :title="item.parameterValue" class="value">{{ item.parameterValue }}</div>
                </div>
              </div>
            </div>
            <div v-if="prodInfo.content" v-rich="prodInfo.content"></div>
          </div>
          <!-- /商品介绍 -->
          <!-- </transition> -->
          <!-- <transition name="fade"> -->
          <!-- 商品评论 -->
          <div class="comment" v-if="introduceOrCommentCom">
            <!-- 好评率 -->
            <div class="good-rates">
              <div class="score">
                <div class="tit">
                  {{ $t('prodDetail.favorableRatingRate') }}：
                </div>
                <div class="con">{{ prodCommData.positiveRating }}%</div>
              </div>
              <div class="average">
                <div class="item">
                  <div class="text">5.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber5 }}）</div>
                </div>
                <div class="item">
                  <div class="text">4.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber4 }}）</div>
                </div>
                <div class="item">
                  <div class="text">3.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber3 }}）</div>
                </div>
                <div class="item">
                  <div class="text">2.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber2 }}）</div>
                </div>
                <div class="item">
                  <div class="text">1.0</div>
                  <div class="stars">
                    <i class="star"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                    <i class="star-gray"></i>
                  </div>
                  <div class="number">（{{ prodCommData.scoreNumber1 }}）</div>
                </div>
              </div>
            </div>
            <!-- /好评率 -->
            <!-- 评论列表 -->
            <div class="comment-tab">
              <div
                class="item"
                :class="evaluate === -1 ? 'active' : ''"
                @click="getProdCommPageByProd(-1)"
              >
                {{ $t('all') }}
                <span class="number">（{{ prodCommData.number }}）</span>
              </div>
              <div
                class="item"
                :class="evaluate === 0 ? 'active' : ''"
                @click="getProdCommPageByProd(0)"
              >
                {{ $t('prodDetail.goodReview') }}
                <span class="number">（{{ prodCommData.praiseNumber }}）</span>
              </div>
              <div
                class="item"
                :class="evaluate === 1 ? 'active' : ''"
                @click="getProdCommPageByProd(1)"
              >
                {{ $t('prodDetail.mediumRating') }}
                <span class="number"
                  >（{{ prodCommData.secondaryNumber }}）</span
                >
              </div>
              <div
                class="item"
                :class="evaluate === 2 ? 'active' : ''"
                @click="getProdCommPageByProd(2)"
              >
                {{ $t('prodDetail.poorReviews') }}
                <span class="number"
                  >（{{ prodCommData.negativeNumber }}）</span
                >
              </div>
              <div
                class="item"
                :class="evaluate === 3 ? 'active' : ''"
                @click="getProdCommPageByProd(3)"
              >
                {{ $t('prodDetail.withPictures') }}
                <span class="number">（{{ prodCommData.picNumber }}）</span>
              </div>
            </div>
            <div class="comment-con" v-if="prodCommList.records.length">
              <div
                class="item"
                v-for="(item, comIndex) in prodCommList.records"
                :key="item.prodCommId"
              >
                <div class="buyer-msg">
                  <div class="img">
                    <img :src="item.pic" alt v-if="item.pic" />
                    <img src="~/assets/images/buyer-img.png" alt v-else />
                  </div>
                  <div class="name">
                    {{
                      item.nickName
                        ? item.nickName
                        : $t('prodDetail.anonymousUser')
                    }}
                  </div>
                </div>
                <div class="buyer-comment">
                  <div style="display: flex">
                    <div class="stars" style="width:95px">
                      <i
                        class="star"
                        v-for="index in item.score"
                        :key="index"
                      ></i>
                    </div>
                    <div style="color: #999">{{ item.skuName || '' }}</div>
                  </div>
                  <div class="text">
                    <span style="white-space:pre-wrap;">{{
                      item.content
                    }}</span>
                  </div>
                  <div class="img-box" v-if="item.pics">
                    <span
                      class="img"
                      v-for="(img, imgIndex) in item.prodImgs"
                      :key="imgIndex"
                    >
                      <img
                        :src="img"
                        @click="imgShow(comIndex, imgIndex)"
                        alt
                      />
                      <div class="big-img-show" v-if="showBigImg">
                        <!-- <div v-for="imgIndex in item.prodImgs" :key="imgIndex"> -->
                        <i class="left-arrow" @click="prevImgCom()">&lt;</i>
                        <i class="right-arrow" @click="nextImgCom()">&gt;</i>
                        <div class="mask" @click="closeShowBigImg"></div>
                        <img :src="imgPath" />
                        <!-- </div> -->
                      </div>
                    </span>
                  </div>
                  <div class="time-sku">
                    <span class="time">{{ item.recTime }}</span>
                    <!-- <span class="sku">银色 256GB</span> -->
                  </div>
                  <!-- <div class="append-comment">
                      <div class="append-time">购买5天后追评</div>
                      <div class="append-con">刚买完没几天就降价了，心痛啊啊啊啊啊啊啊啊啊啊啊啊</div>
                  </div>-->
                  <div class="seller-reply" v-if="item.replyContent">
                    <div class="tit">
                      {{ $t('prodDetail.merchantResponse') }}：
                    </div>
                    <div class="con">{{ item.replyContent }}</div>
                    <div class="time">{{ item.replyTime }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment-con" v-if="!prodCommList.records.length">
              <div class="comment-empty">{{ $t('prodDetail.noComments') }}</div>
            </div>
            <!-- /评论列表 -->
            <!-- 页码 -->
            <div class="pagination">
              <div class="pages" v-if="page.pages >= 1">
                <a
                  href="javascript:void(0);"
                  class="item prev"
                  :class="{ default: page.current <= 1 }"
                  @click="getSearchProdPage(page.current - 1)"
                  >{{ $t('pagination.previousPage') }}</a
                >
                <div v-for="item in page.rainbow" :key="item.prodId">
                  <a
                    href="javascript:void(0);"
                    @click="getSearchProdPage(item)"
                    class="item"
                    :class="{ cur: page.current == item }"
                    v-if="item !== '...'"
                    >{{ item }}</a
                  >
                  <span class="ellipsis" v-else>...</span>
                </div>

                <a
                  href="javascript:void(0);"
                  class="item next"
                  :class="{ default: page.current > page.pages - 1 }"
                  @click="getSearchProdPage(page.current + 1)"
                  >{{ $t('pagination.nextPage') }}</a
                >
                <!-- <div class="go-page">
                    到第
                    <input type="text"
                           class="page-input" />页
                    <a href
                       class="page-btn">GO</a>
                </div>-->
                <div class="total-num">
                  {{ $t('pagination.total') }}
                  <span class="num">{{ page.pages }}</span
                  >{{ $t('pagination.page') }}
                </div>
              </div>
              <!-- /页码 -->
            </div>
          </div>
          <!-- /商品评论 -->
          <!-- </transition> -->
        </div>
        <div class="side">
          <!-- 店内搜索 -->
          <div class="shop-search">
            <div class="tit">{{ $t('prodDetail.inStoreSearch') }}</div>
            <div class="con">
              <input type="text" class="text" v-model="prodName" />
              <a href="javascript:void(0)" class="btn" @click="toShopIndex"></a>
            </div>
          </div>
          <!-- /店内搜索 -->
          <!-- 店内分类 -->
          <div class="shop-category">
            <div class="tit">{{ $t('prodDetail.inStoreCategories') }}</div>
            <div class="con">
              <div
                class="items active"
                v-for="(item, index) in shopCategorys"
                :key="index"
              >
                <nuxt-link
                  :to="
                    '/shopIndex?sid=' +
                      prodInfo.shopId +
                      '&cid=' +
                      item.categoryId
                  "
                >
                  <div class="item-main">{{ item.categoryName }}</div>
                </nuxt-link>
              </div>
            </div>
          </div>
          <!-- 店内分类 -->
          <!-- 热销产品 -->
          <div class="sale-well">
            <div class="tit">{{ $t('prodDetail.hotProducts') }}</div>
            <div class="con">
              <div class="item" v-for="item in hotSales" :key="item.prodId">
                <nuxt-link :to="'/detail/' + item.prodId">
                  <div class="goods-img">
                    <img v-if="item.pic" :src="item.pic" alt />
                    <img v-else src="~/assets/img/def.png" alt />
                  </div>
                  <div class="goods-msg">
                    <div class="goods-name">{{ item.prodName }}</div>
                    <div class="goods-price">
                      <div class="price">
                        ￥
                        <span class="big">{{ parsePrice(item.price)[0] }}</span>
                        .{{ parsePrice(item.price)[1] }}
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>
            </div>
          </div>
          <!-- 热销产品 -->
        </div>
      </div>
    </div>

    <!-- 滑动导航 -->
    <transition name="fade">
      <div class="scroll-tab" v-if="showScrollTab">
        <div class="content">
          <div class="shop-search">
            <input
              type="text"
              class="text"
              v-model="prodName"
              :placeholder="$t('prodDetail.inStoreSearch')"
            />
            <a href="javascript:void(0)" class="btn" @click="toShopIndex"></a>
          </div>
          <div class="tab">
            <div
              :class="['item', introduceOrCommentInt ? 'active' : '']"
              @click="toggleIntroduceInt"
            >
              {{ $t('prodDetail.productIntroduction') }}
            </div>
            <div
              :class="['item', introduceOrCommentCom ? 'active' : '']"
              @click="toggleIntroduceCom"
            >
              {{ $t('prodDetail.productReviews') }}
              <i class="number">（{{ prodCommData.number }}）</i>
            </div>
          </div>
          <div class="add-cart-btn" @click="addToCart">
            {{ $t('prodDetail.addToCart') }}
          </div>
        </div>
      </div>
    </transition>
    <!-- /滑动导航 -->

    <!-- 弹窗 -->
    <div class="popup-mask" v-if="false"></div>
    <div class="popup-box" v-if="false">
      <div class="tit">
        <div class="text">{{ $t('tips') }}</div>
        <div class="close"></div>
      </div>
      <div class="con">
        <div class="tip">
          <div
            class="tip-
           success"
          ></div>
          <div class="tip-info">
            <div class="result">
              {{ $t('prodDetail.congratulationsYouHaveSuccessfullyReceived') }}
              <span class="number"> <i class="small">￥</i>500 </span
              >{{ $t('discountCoupon') }}！
            </div>
            <div class="date">
              {{ $t('prodDetail.timeOfUse') }}：2019.12.12-2019.12.12
            </div>
            <div class="btns">
              <a href="javascript:void(0)" class="btn">
                {{ $t('prodDetail.viewCouponsCollected') }}
                <span class="arrow">>></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /弹窗 -->
    <!-- 登录弹窗组件 -->
    <LoginPopup v-if="showLogin" v-on:hideLoginPop="hideLoginPop" />
    <!-- /登录弹窗组件 -->
    <!-- 选择套餐 -->
    <SelectPackage
      :shop-info="shopInfo"
      :combo-id="selectComboId"
      :select-match-ids="selectMatchIds"
      v-if="showSelectPackage"
      ref="selectPackageRef"
      @hideSelectPackage="hideSelectPackage" />
  </div>
</template>

<script>
import util from '~/plugins/util'
import CategroySidebar from '~/components/categroy-sidebar'
import LoginPopup from '~/components/login-popup'
import SelectPackage from '~/components/select-package'
import PageUtil from '~/plugins/pageUtil'
import Cookie from 'js-cookie'
import bus from '~/plugins/bus'
import { h5Path } from '~/plugins/config'
import Big from 'big.js'
// import DOMPurify from 'dompurify'
export default {
  components: {
    CategroySidebar,
    LoginPopup,
    SelectPackage
  },
  data() {
    return {
      // groupActivityId: this.$route.params.groupActivityId,
      showLogin: false,
      prodId: this.$route.params.prodId,
      prodName: '',
      prodInfo: {},
      prodImgs: [],
      offsetCount: 0, //图片偏移数
      imgCounts: 0, //缩略图数量
      showScrollTab: false,
      introduceOrCommentInt: true, // true商品介绍  false商品评论
      introduceOrCommentCom: false,
      prodCommData: {},
      prodCommType: true, // 商品评论类型
      prodCommList: {},
      shopInfo: {},
      evaluate: -1,
      hotSales: [],
      defaultSku: {}, // 选中的sku
      choiceCombNum: 0, //选中的套餐商品数量
      skuGroup: [], //
      selectedProp: [],
      findSku: true, // 能不能找得到sku
      prodNum: 1, //计数器数量
      // prohibit: false,  //计数器是否禁用
      prohibit1: true, //计数器-是否禁用
      prohibit2: false, //计数器+是否禁用
      isCollection: false, //商品是否已收藏
      isShopCollection: false, //店铺是否已收藏
      couponList: [], //优惠券
      totalCartNum: 0, //购物车数量
      shopCategorys: [],
      page: {
        pages: 0, // 总页数
        rainbow: [], // 分页条
        current: 1
      },
      groupProdInfo: {}, //团购
      countdown: { obj: { day: '', hou: '', min: '', sec: '', signs: '' } }, //倒计时
      countdownFlag: null, //判断团购活动开始结束
      groupSkuList: [], //团购sku列表
      groupSku: {}, //团购sku信息
      miniQrCodeImg: '', //团购跳转二维码
      discountDet: [], //限时特惠专区详情

      showVideo: false, // 是否展示视频
      showPlayBtn: true, // 视频播放按钮

      imgPath: '', // 当前点击的评论图片
      showBigImg: false, // 评论大图显隐
      scrollTop: 0,

      oriPrice: 0, // 市场价

      bigComIndex: -1, // 评论大图切换
      bigImgIndex: -1, // 评论大图切换
      hasMaxNum: 0, // 是否限购 1限购
      maxNum: 0, // 限购数量

      language: this.$store.state.locale,
      prodParameterList: [],
      showSelectPackage: false,
      comboList: [],
      selectComboId: 0,
      defaultCombo: null,
      selectMatchIds: [],

      detailCommentOffsetTop: 0
    }
  },
  head() {
    return {
      title: this.$t('prodDetail.productDetails')
    }
  },
  //在页面加载之前先加载数据
  async asyncData({ app, params, redirect }) {
    const data = await app.$axios
      .get('/prod/prodInfo', {
        params: {
          prodId: params.prodId
        }
      })
      .then(({ data }) => {
        console.log(data);
        return data
      })
      .catch(err => {
        return redirect('/error')
      })
    const prodImgs = []
    if (data.imgs && data.imgs[0]) {
      data.imgs.split(',').forEach(imgStr => {
        prodImgs.push({
          img: imgStr,
          isActive: false
        })
      })
      prodImgs[0].isActive = true
    }

    // data.content = DOMPurify.sanitize(data.content)
    return {
      prodInfo: data,
      prodImgs: prodImgs,
      shopId: data.shopId,
      activityId: data.activityId,
      oriPrice: data.oriPrice,
      comboList: data.comboList || []
    }
  },
  created() {
    // this.prodInfo.content = this.DOMPurify.sanitize(this.prodInfo.content)
  },
  watch: {
    // prodNum(nv) {
    //   if (nv <= 1) {
    //     this.prohibit1 = true
    //   } else {
    //     this.prohibit1 = false
    //   }
    // }
    prodNum(nv) {
      if (nv <= 1) {
        this.prohibit1 = true
        if (this.defaultSku.stocks == 0 || nv == this.defaultSku.stocks) {
          this.prohibit2 = true
        }
      } else if (nv == this.defaultSku.stocks) {
        this.prohibit2 = true
      } else {
        this.prohibit1 = false
        this.prohibit2 = false
      }
    }
  },
  filters: {
    // 截取日期:  2020-11-25 00:00:00  ->  2020-11-25
    cutDate(dateStr) {
      if (!dateStr) return ''
      return (dateStr = dateStr.split(' ')[0])
    },
    price(value) {
      if(value) {
        return value.toFixed(2)
      }
      return 0.00
    }
  },
  mounted() {
    if(this.comboList && this.comboList.length > 0) {
      this.selectCombo(this.comboList[0].comboId)
    }
    // console.log(this.prodInfo)
    // 设置网页标题
    document.title = this.$t('prodDetail.productDetails')
    if (this.prodInfo.video) {
      // 获取商品视频
      this.prodVideo = document.getElementById('prodVideo')
      this.showPlayBtn = true
    }
    let flag = 0
    this.prodParameterList[flag] = []
    const prodParameterList = this.prodInfo.prodParameterList || []
    for (let i = 0; i < prodParameterList.length; i++) {
      let params = prodParameterList[i]
      if (i % 3 === 0 && i !== 0) {
        flag++
        this.prodParameterList[flag] = []
      }
      this.prodParameterList[flag].push(params)
    }
    // 提前加载拼团时间
    this.groupBuyInfo()

    //查询商品是否已经收藏
    this.isProdCollected()
    this.isShopCollected()
    //获取店铺分类
    this.getShopCategory()

    this.getShopHead(this.prodInfo.shopId)
    //获取热销商品
    this.getHotSales()

    // 获取商品评论数
    this.$axios
      .get('/prod/prodCommData', {
        params: {
          prodId: this.$route.params.prodId
        }
      })
      .then(({ data }) => {
        this.prodCommData = data
      })

    this.getProdCommPageByProd(-1)

    // 监听页面滚动
    window.addEventListener('scroll', this.scrollToTop)

    //优惠券
    this.getCouponList()

    //通过商品id获取商品所有促销活动
    this.$axios
      .get('/marking/discount/getDiscountByProdId', {
        params: {
          prodId: this.$route.params.prodId
        }
      })
      .then(({ data }) => {
        this.discountDet = data
      })
    // 组装sku
    this.groupSkuProp(this.prodInfo.skuList, this.prodInfo.price)

    // 保存足迹
    if(Cookie.get('token')) {
      this.$axios.post('/p/prodBrowseLog', {
        prodId: this.$route.params.prodId
      })
    }

    // 获取到评价框的垂直位置
    this.getCommentScrollTop()
  },
  computed: {
    comboAmount() {
      if(!this.defaultCombo) {
        return 0
      }
      let price = new Big(this.defaultCombo.mainProd.comboPrice).times(this.defaultCombo.mainProd.leastNum)
      this.defaultCombo.matchingProds.forEach(item => {
        if(this.selectMatchIds.findIndex(id => id === item.prodId) >=0) {
          price = price.plus(new Big(item.comboPrice).times(item.leastNum))
        }
      })
      price = price.toFixed(2)
      return price
    }
  },
  methods: {
    /**
     *
     */
    getCommentScrollTop() {
      this.$nextTick(()=> {
        this.detailCommentOffsetTop = document.querySelector('.detail-comment').offsetTop
      })
    },
    /**
     * 页面滚动事件
     */
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      this.showScrollTab = scrollTop > this.detailCommentOffsetTop
    },
    /**
     * 生成二维码- 拼团跳转到h5
     */
    loadQRCode() {
      let qrcode = new QRCode('spellQrcode', {
        text:
          h5Path +
          `/pages/prod/prod?prodid=${this.prodId}&groupActivityId=${this.activityId}`,
        width: 110,
        height: 110,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 3
      })
    },

    /**
     * 评论点击图片显示大图
     */
    imgShow(comIndex, imgIndex) {
      this.bigComIndex = comIndex
      document.documentElement.style.overflowY = 'hidden'

      var bigProdImgs = this.prodCommList.records[comIndex].prodImgs.length
      if (imgIndex == -1) {
        this.closeShowBigImg()
        this.bigImgIndex = -1
        this.bigComIndex = -1
        return
      }
      if (imgIndex == bigProdImgs) {
        this.closeShowBigImg()
        this.bigImgIndex = -1
        this.bigComIndex = -1
        return
      }
      let imgPath = this.prodCommList.records[comIndex].prodImgs[imgIndex]
      this.imgPath = imgPath
      if (this.imgPath) {
        this.showBigImg = true
      }
      let dom = (document.getElementsByTagName('body').className = 'hid')
      this.bigImgIndex = imgIndex
    },

    prevImgCom() {
      var comIndex = this.bigComIndex
      var imgIndex = this.bigImgIndex - 1
      this.imgShow(comIndex, imgIndex)
    },

    nextImgCom() {
      var comIndex = this.bigComIndex
      var imgIndex = this.bigImgIndex + 1
      this.imgShow(comIndex, imgIndex)
    },

    // 获取选中套餐数量
    selectMatchNum() {
      if ( this.defaultCombo.mainProd) {
        let mainProdNum =  this.defaultCombo.mainProd.leastNum
        if ( this.defaultCombo.matchingProds.length ) {
          this.defaultCombo.matchingProds.forEach(item =>{
            if ( item.isChecked ) {
              mainProdNum += item.leastNum
            }
          })
        }
        return mainProdNum
      }
    },

    /**
     * 关闭评论大图显隐
     */
    closeShowBigImg() {
      this.showBigImg = false
      document.documentElement.style.overflowY = 'scroll'
    },

    /**
     * 关闭视频
     */
    stopVideo() {
      this.showVideo = false
      if (this.prodVideo !== undefined) {
        this.prodVideo.pause()
      }
      this.showPlayBtn = true
    },

    /**
     * 播放视频
     */
    playVideo() {
      this.showVideo = true
      this.prodVideo.play(0)
      this.showPlayBtn = false
    },

    // 切换图片
    prevImg() {
      if (this.prodImgs.length - 5 > 0) {
        if (this.offsetCount > 0) {
          this.offsetCount--
          this.$refs.carouser.style.left = '-' + 78 * this.offsetCount + 'px'
        } else {
          return false
        }
      } else if (this.prodImgs.length - 5 <= 0) {
        return false
      } else {
        return false
      }
    },
    nextImg() {
      if (this.prodImgs.length - 5 > 0) {
        if (this.offsetCount < this.prodImgs.length - 5) {
          this.offsetCount++
          this.$refs.carouser.style.left = '-' + 78 * this.offsetCount + 'px'
        } else if (this.prodImgs.length - 5 <= 0) {
          return false
        } else {
          return false
        }
      } else {
        return false
      }
    },

    /**
     * 商品已下架
     */
    handleClose() {
      this.tipsDialogVisible = false
      this.$router.go(-1)
    },

    /**
     * 团购信息
     */
    groupBuyInfo() {
      if (this.prodInfo.prodType != 1) {
        return
      }
      this.$axios
        .get('/groupProd/info', {
          params: {
            prodId: this.prodId,
            groupActivityId: this.activityId
          }
        })
        .then(({ data }) => {
          // 判断活动是否失效
          if (data.code === "A00001") {
            this.prodInfo.code = -1
            this.activityId = ''
            return
          }
          this.groupProdInfo = data.data //团购
          this.groupSkuList = data.data.groupSkuList
          this.groupSku = data.data.groupSkuList[0]
          // console.log(this.groupSkuList,data.data,'groupSkuList这是第一次赋值');

          // this.prodInfo.skuList = data.obj.groupSkuList
          this.hasMaxNum = data.data.hasMaxNum // 是否限购 1限购
          this.maxNum = data.data.maxNum // 限购数量
          let betweenTimestamp = util.betweenTimestamp(
            util.dateToTimestamp(this.groupProdInfo.startTime),
            util.dateToTimestamp(this.groupProdInfo.endTime)
          )
          var countdown = {
            obj: util.betweenTime(betweenTimestamp),
            stamp: betweenTimestamp
          }
          this.countdown = countdown
          this.countdownFlag = this.countdown.obj.signs
          this.startCountdown() //请求倒计时
          // this.getMiniQrCode()  //请求二维码
          this.$nextTick(() => {
            this.loadQRCode() //请求二维码
          })
          // 组装团购sku
          this.setDefaultGroupSku()
        })
    },
    /**
     * 倒计时
     */
    startCountdown() {
      this.countdown = {
        stamp:
          this.countdown.stamp < 0
            ? this.countdown.stamp + 1000
            : this.countdown.stamp - 1000,
        obj: util.betweenTime(this.countdown.stamp)
      }
      if (this.countdown.obj.signs != this.countdownFlag) {
        clearTimeout(this.timer)
        location.reload()
        return
      }
      this.timer = setTimeout(() => {
        this.startCountdown()
      }, 1000)
    },
    /**
     * 请求团购小程序二维码
     */
    getMiniQrCode() {
      var contents = {
        groupActivityId: this.activityId,
        prodId: this.prodId
      }
      var content = JSON.stringify(contents)
      this.$axios
        .get('/qrcodeTicket/miniQrCode', {
          params: {
            content: content,
            type: 1
          },
          responseType: 'blob' // 设置接收格式为blob格式
        })
        .then(({ data }) => {
          //接受二进制文件流
          this.miniQrCodeImg = window.URL.createObjectURL(data)
        })
    },

    /**
     * 小图点击事件
     */
    changeProdImg(index) {
      if (this.prodImgs[index].isActive === true) {
        return
      }
      this.prodImgs.forEach(prodImg => {
        prodImg.isActive = false
      })
      this.prodImgs[index].isActive = true
      this.prodInfo.pic = this.prodImgs[index].img
      this.stopVideo()
    },

     /**
     * 大图加载失败时往下一张图加载
     */
    changePicUrl(){
      let defaultUrl=require("~/assets/img/def.png")
      let currentIndex=this.prodImgs.findIndex(prodImg => 
        prodImg.isActive == true
      )
      this.prodImgs[currentIndex].img=defaultUrl
      let nextIndex=currentIndex+1
      if(nextIndex>=this.prodImgs.length){
        this.prodInfo.pic=this.prodImgs[0].img
        return
      }
      this.changeProdImg(nextIndex)  
    },

    /**
     * 获取店铺信息
     */
    getShopHead(shopId) {
      this.$axios
        .get('/shop/headInfo', {
          params: {
            shopId: shopId
          }
        })
        .then(({ data }) => {
          this.shopInfo = data
        })
    },

    /**
     * 获取店铺分类
     */
    getShopCategory() {
      this.$axios
        .get('/category/categoryInfo', {
          params: {
            shopId: this.shopId
          }
        })
        .then(({ data }) => {
          this.shopCategorys = data
        })
    },

    /**
     * 价格过滤
     */
    parsePrice(value) {
      var val = Number(value)
      if (!val) {
        val = 0
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组
      return val.toFixed(2).split('.')
    },

    /**
     * 切换商品介绍/商品评论
     */
    toggleIntroduceInt() {
      this.introduceOrCommentInt = true
      this.introduceOrCommentCom = false
    },

    toggleIntroduceCom() {
      this.introduceOrCommentInt = false
      this.introduceOrCommentCom = true
    },

    /**
     * 获取评论分页数据
     */
    getSearchProdPage(current) {
      if (
        current == 0 ||
        current == this.page.current ||
        current > this.page.pages
      ) {
        return
      } else {
        this.getProdCommPageByProd(this.evaluate, current)
      }
    },

    /**
     * 获取商品评论列表
     */
    getProdCommPageByProd(evaluate, curPage) {
      this.evaluate = evaluate

      this.$axios
        .get('/prod/prodCommPageByProd', {
          params: {
            prodId: this.$route.params.prodId,
            current: curPage || 1,
            size: 10,
            evaluate: this.evaluate
          }
        })
        .then(({ data }) => {
          this.prodCommList = data
          this.prodCommList.records.forEach(prodComm => {
            var prodImgs = []
            if (prodComm.pics) {
              prodComm.pics.split(',').forEach(imgStr => {
                prodImgs.push(imgStr)
              })
            }
            prodComm.prodImgs = prodImgs
          })
          data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
          this.page = data
        })
    },

    /**
     * 获取热销商品
     */
    getHotSales() {
      // this.$axios.get('/search/searchProdPage', {
      this.$axios
        .get('/search/page', {
          params: {
            shopId: this.prodInfo.shopId,
            size: 5,
            sort: 1,
            orderBy: 1,
            isAllProdType: true,
            current: 1,
            isActive: 1 // 过滤掉活动商品
          }
        })
        .then(({ data }) => {
          this.hotSales = data.records[0].products
        })
    },

    /**
     * 收藏商品
     */
    toggleCollect() {
      var prodId = this.prodInfo.prodId
      var isCollection = this.isCollection
      this.$axios
        .post('/p/user/collection/addOrCancel', prodId)
        .then(({ data }) => {
          this.isCollection = !isCollection
          if (this.isCollection) {
            this.$message({
              message: this.$t('prodDetail.collectionSuccess'),
              type: 'success',
              duration: 1000
            })
          } else {
            this.$message({
              message: this.$t('prodDetail.uncollected'),
              type: 'warning',
              duration: 1000
            })
          }
        })
    },

    /**
     * 查询商品是否已收藏
     */
    isProdCollected() {
      if (!Cookie.get('token')) {
        return
      }
      this.$axios
        .get('/p/user/collection/isCollection', {
          params: {
            prodId: this.prodInfo.prodId
          }
        })
        .then(({ data }) => {
          this.isCollection = data
        })
    },

    /**
     * 收藏店铺
     */
    toggleShopCollect() {
      var shopId = this.prodInfo.shopId
      var isShopCollection = this.isShopCollection
      this.$axios
        .post('/p/shop/collection/addOrCancel', shopId)
        .then(({ data }) => {
          this.isShopCollection = !isShopCollection
          if (this.isShopCollection) {
            this.$message({
              message: this.$t('prodDetail.collectionSuccess'),
              type: 'success',
              duration: 1000
            })
          } else {
            this.$message({
              message: this.$t('prodDetail.uncollected'),
              type: 'warning',
              duration: 1000
            })
          }
        })
    },

    /**
     * 查询店铺是否已收藏
     */
    isShopCollected() {
      if (!Cookie.get('token')) {
        return
      }
      this.$axios
        .get('/p/shop/collection/isCollection', {
          params: {
            shopId: this.prodInfo.shopId
          }
        })
        .then(({ data }) => {
          this.isShopCollection = data
        })
    },

    /**
     * 减少商品数量
     */
    reduce() {
      var prodNum = parseInt(this.prodNum)
      if (this.defaultSku.stocks) {
        if (!prodNum || prodNum <= 1) {
          this.prodNum = prodNum
          this.prohibit1 = true //禁用
          this.prohibit2 = false
        } else {
          this.prodNum = prodNum - 1
          this.prohibit1 = false
          this.prohibit2 = false
        }
      } else {
        this.prodNum = 0
        this.prohibit1 = true
        this.prohibit2 = true
      }
    },

    /*
     * 失去焦点时对输入框的判断
     */
    judgeInput(e) {
      var prodNum = parseInt(this.prodNum)
      if (this.defaultSku.stocks) {
        if (!prodNum || prodNum <= 0) {
          this.prohibit1 = true
          this.prohibit2 = false
        } else {
          this.prohibit1 = false
          this.prohibit2 = false
        }
        if (prodNum > this.defaultSku.stocks) {
          this.$message({
            message: this.$t('prodDetail.insufficientInventory'),
            type: 'warning',
            duration: 1000
          })
          this.prohibit1 = false
          this.prohibit2 = true
          this.prodNum = 1
        }
      } else {
        this.prodNum = 0
        this.prohibit1 = true
        this.prohibit2 = true
      }
    },

    /**
     * 增加商品数量
     */
    increase() {
      var prodNum = parseInt(this.prodNum)
      if (this.defaultSku.stocks) {
        if (!this.prodNum) {
          this.prodNum = 1
          return
        }
        if (prodNum < this.defaultSku.stocks) {
          this.prodNum = prodNum + 1
        } else {
          this.$message({
            message: this.$t('prodDetail.insufficientInventory'),
            type: 'warning',
            duration: 1000
          })
          this.prohibit1 = false // -是否禁用
          this.prohibit2 = true // +是否禁用
        }
      } else {
        this.prodNum = 0
        this.prohibit1 = true // -是否禁用
        this.prohibit2 = true // +是否禁用
      }
    },

    /**
     * 请求优惠券列表
     */
    getCouponList() {
      this.$axios
        .get('/coupon/listByProdId', {
          params: {
            prodId: this.$route.params.prodId,
            shopId: this.prodInfo.shopId
          }
        })
        .then(({ data }) => {
          this.couponList = data
        })
    },

    /**
     * 组装SKU
     */
    groupSkuProp: function(skuList, defaultPrice) {
      if (skuList.length == 1 && !skuList[0].properties) {
        this.defaultSku = skuList[0]
        this.imgCounts = this.prodImgs.length
        this.$refs.carouser.style.width = this.imgCounts * 78 + 'px' // 设置图片盒子的初始宽度
        return
      }
      var skuGroup = {}
      var allProperties = []
      var propKeys = []
      var selectedPropObj = {}
      var defaultSku = null
      for (var i = 0; i < skuList.length; i++) {
        var isDefault = false
        if (!defaultSku && skuList[i].price == defaultPrice) {
          //找到和商品价格一样的那个SKU，作为默认选中的SKU
          defaultSku = skuList[i]
          isDefault = true
        }
        var properties = skuList[i].properties //版本:公开版;颜色:金色;内存:64GB
        allProperties.push(properties)
        var propList = properties.split(';') // ["版本:公开版","颜色:金色","内存:64GB"]

        for (var j = 0; j < propList.length; j++) {
          var propval = propList[j].split(':') //["版本","公开版"]
          var props = skuGroup[propval[0]] //先取出 版本对应的值数组

          //如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
          if (isDefault) {
            propKeys.push(propval[0])
            selectedPropObj[propval[0]] = propval[1]
          }

          if (props == undefined) {
            props = [] //假设还没有版本，新建个新的空数组
            props.push(propval[1]) //把 "公开版" 放进空数组
          } else {
            if (props.indexOf(propval[1]) === -1) {
              //如果数组里面没有"公开版"
              props.push(propval[1]) //把 "公开版" 放进数组
            }
          }
          skuGroup[propval[0]] = props //最后把数据 放回版本对应的值
        }
      }
      this.imgCounts = defaultSku.pic
        ? this.prodImgs.length + 1
        : this.prodImgs.length
      this.$refs.carouser.style.width = this.imgCounts * 78 + 'px' // 设置图片盒子的初始宽度
      this.defaultSku = defaultSku
      this.propKeys = propKeys
      this.selectedPropObj = selectedPropObj
      // 商品图片多出来
      this.parseSelectedObjToVals(skuList)
      this.skuGroup = skuGroup
      this.allProperties = allProperties
    },

    /**
     * 将已选的 {key:val,key2:val2}转换成 [val,val2]
     */
    parseSelectedObjToVals: function(skuList) {
      var selectedPropObj = this.selectedPropObj
      var selectedProperties = ''
      var selectedProp = []
      for (var key in selectedPropObj) {
        // selectedProp.push(selectedPropObj[key]);
        selectedProp.push({ key: key, value: selectedPropObj[key] })
        selectedProperties += key + ':' + selectedPropObj[key] + ';'
      }
      selectedProperties = selectedProperties.substring(
        0,
        selectedProperties.length - 1
      )
      this.selectedProp = selectedProp
      this.selectedProperties = selectedProperties
      this.selectedPropObj = selectedPropObj
      var findSku = false
      for (var i = 0; i < skuList.length; i++) {
        // 解决排序问题导致无法匹配
        if (
          this.compareArray(
            selectedProperties.split(';').sort(),
            skuList[i].properties.split(';').sort()
          )
        ) {
          findSku = true
          this.defaultSku = skuList[i]
          this.changeSkuImg(this.defaultSku.pic)
          break
        }
        // if (skuList[i].properties == selectedProperties) {
        //   findSku = true;
        //   this.defaultSku = skuList[i]
        //   this.changeSkuImg(this.defaultSku.pic);
        //   break;
        // }
      }
      this.findSku = findSku
      // 组装团购sku
      this.setDefaultGroupSku()
    },

    /**
     * 比较两个数组中的元素是否相等
     * @param a1 第一个数组
     * @param a2 第二个数组
     * @return boolean 两个数组中的元素都相等则返回 true，反之返回 false
     */
    compareArray(a1, a2) {
      if (!a1 || !a2) {
        return false
      }
      if (a1.length !== a2.length) {
        return false
      }
      for (var i = 0, n = a1.length; i < n; i++) {
        if (a1[i] !== a2[i]) {
          return false
        }
      }
      return true
    },

    /**
     * 切换SKU图片
     */
    changeSkuImg(skuPic) {
      if (skuPic) {
        // if (this.prodImgs[0].sku) {
        //   this.prodImgs.splice(0, 1)
        // }
        this.prodImgs.forEach(prodImg => {
          prodImg.isActive = false
        })
        // this.prodImgs.splice(0, 0, {
        //   img: skuPic,
        //   isActive: true,
        //   sku: true
        // });
        this.prodInfo.pic = skuPic
      } else {
        this.prodInfo.pic = this.prodImgs[0].img
      }
    },

    /**
     * 判断当前的规格值 是否可以选
     */
    isSkuLineItemNotOptional(
      allProperties,
      selectedPropObj,
      key,
      item,
      propKeys
    ) {
      var selectedPropObj = Object.assign({}, selectedPropObj)
      var properties = ''
      selectedPropObj[key] = item
      for (var j = 0; j < propKeys.length; j++) {
        properties += propKeys[j] + ':' + selectedPropObj[propKeys[j]] + ';'
      }
      properties = properties.substring(0, properties.length - 1)
      for (var i = 0; i < allProperties.length; i++) {
        if (properties == allProperties[i]) {
          return false
        }
      }
      for (var i = 0; i < allProperties.length; i++) {
        if (allProperties[i].indexOf(item) >= 0) {
          return true
        }
      }
      return false
    },

    /**
     * 规格点击事件
     */
    toChooseItem(skuLineItem, key, event) {
      this.selectedPropObj[key] = skuLineItem
      this.parseSelectedObjToVals(this.prodInfo.skuList)
      if (this.defaultSku.stocks) {
        // 有库存
        this.prodNum = 1
        this.prohibit1 = true
        this.prohibit2 = false
      } else {
        this.prodNum = 0
        this.prohibit1 = true //禁用
        this.prohibit2 = true //禁用
      }
    },

    /**
     * 组装团购sku
     */
    setDefaultGroupSku() {
      var groupSkuList = JSON.parse(JSON.stringify(this.groupSkuList))
      var selectedP = this.selectedProperties.split(';')
      if (groupSkuList.length) {
        for (var i = 0; i < groupSkuList.length; i++) {
          // 进行规格名称对应判断
          let skuNames = groupSkuList[i].properties.split(';')
          let haveSku = selectedP.every(item=>{
            let flag = skuNames.some(itemC=>{
              return item === itemC
            })
            return flag
          })
          // 规格名一一对应则进行赋值
          if (haveSku) {
            this.groupSku = groupSkuList[i]
            break
          }
        }
      }
    },

    /**
     * 加入购物车
     */
    addToCart() {
      if (!this.findSku) {
        return
      }
      if (!this.prodNum || this.prodNum <= 0) {
        this.$message({
          message: this.$t('prodDetail.pleaseEnterTheCorrectNumberOfItems'),
          type: 'warning',
          duration: 1000
        })
        return
      }
      this.$axios
        .post('/p/shopCart/changeItem', {
          basketId: 0,
          count: this.prodNum,
          prodId: this.$route.params.prodId,
          shopId: this.prodInfo.shopId,
          shopName: this.shopInfo.shopName,
          skuId: this.defaultSku.skuId
          // distributionCardNo: this.distributionCardNo
        })
        .then(({ data }) => {
          util.tapLog(4, null, null, this.prodNum)
          this.getCartCount()
          this.$message.success(this.$t('prodDetail.successfullyAddedCart'))
        })
    },

    /**
     * 获取购物车商品总数
     */
    getCartCount() {
      this.$axios.get('/p/shopCart/prodCount').then(({ data }) => {
        this.$store.commit('cartNumber/changeCartNumber', data)
      })
    },

    /**
     * 立即购买
     */
    buyNow() {
      if (!this.findSku) {
        this.$message.error(this.$t('prodDetail.productNotInStock') + '~')
        return
      }
      if (!this.defaultSku.stocks || this.prodNum > this.defaultSku.stocks) {
        this.$message({
          message: this.$t('prodDetail.insufficientInventory'),
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (!this.prodNum || this.prodNum <= 0) {
        this.$message({
          message: this.$t('prodDetail.pleaseEnterTheCorrectNumberOfItems'),
          type: 'warning',
          duration: 1000
        })
        return
      }
      if (!Cookie.get('token')) {
        bus.$emit('showLogin', true)
      } else {
        sessionStorage.setItem(
          'orderItem',
          JSON.stringify({
            prodId: this.prodInfo.prodId,
            skuId: this.defaultSku.skuId,
            prodCount: this.prodNum,
            shopId: this.prodInfo.shopId
          })
        )
        this.$router.push({
          path: '/submit-order?orderEntry=1'
        })
      }
    },

    /**
     * 领取优惠券
     */
    receiveCoupon(coupon) {
      this.$axios
        .post('/p/myCoupon/receive', coupon.couponId)
        .then(({ data }) => {
          if (data) {
            this.$message({
              message: data,
              type: 'success',
              duration: 1000
            })
          }
        })
    },
    toShopIndex() {
      var searchTerms = this.prodName.trim() //去除字符串的头尾空格
      if (!searchTerms) {
        this.$message({
          message: this.$t('prodDetail.searchContentCannotBeEmpty'),
          type: 'error',
          duration: 1000
        })
        return
      }
      // 跳转到商品列表页
      let url = '/shopIndex?sid=' + this.shopId + '&pn=' + searchTerms
      this.$router.push({ path: url })
    },

    //跳转活动详情
    toDiscountDetail(discountId) {
      this.$router.push({
        path: '/discount-detail',
        query: {
          discountId: discountId
        }
      })
    },

    // 跳转商家客服
    toChatIm(prodInfo) {
      if (Cookie.get('token')) {
        let routeUrl = this.$router.resolve({
          path: '/chat?shopId=' + prodInfo.shopId + '&prodId=' + prodInfo.prodId
        })
        window.open(routeUrl.href, 'view_window')
      } else {
        this.showLogin = true
      }
    },

    /**
     * 隐藏登录弹窗
     */
    hideLoginPop() {
      this.showLogin = false
    },
    handleSelectPackage() {
      if (!Cookie.get('token')) {
        bus.$emit('showLogin', true)
        return
      }
      this.$axios
        .post(`/combo/getCombo`, {
          comboId: this.selectComboId,
          matchingProdIds: this.selectMatchIds
        })
        .then(({ data }) => {
          this.showSelectPackage = true
          this.$nextTick(()=>{
            this.$refs.selectPackageRef.getComboData(data)
          })
        })
    },
    hideSelectPackage() {
      this.showSelectPackage = false
    },
    isChecked(combo) {
      if(combo.required) {
        return true
      }
      if(combo.isChecked) {
        return true
      }
      return false
    },
    selectComboItem(comboItem) {
      if(comboItem.required) {
        return
      }
      if(this.isChecked(comboItem)) {
        comboItem.isChecked = false
        let index = this.findProdIndex(comboItem.prodId)
        if(index >= 0) {
          this.selectMatchIds.splice(index,1)
        }
      }else {
        this.$set(comboItem,'isChecked',true)
        if(this.findProdIndex(comboItem.prodId) < 0) {
          this.selectMatchIds.push(comboItem.prodId)
        }
      }
      this.choiceCombNum = this.selectMatchNum()
    },
    findProdIndex(prodId) {
      let index = this.selectMatchIds.findIndex(item => item === prodId)
      return index
    },
    // 选择套餐
    selectCombo(comboId) {
      this.selectComboId = comboId
      this.selectMatchIds = []
      // defaultCombo
      for(let i = 0; i <this.comboList.length; i++) {
        if(this.comboList[i].comboId === comboId) {
          this.defaultCombo = this.comboList[i]
          break
        }
      }
      this.defaultCombo.matchingProds.forEach(item => {
        if(item.required) {
          this.$set(item,'isChecked',true)
          this.selectMatchIds.push(item.prodId)
        }else {
          this.$set(item,'isChecked',false)
        }
      })
      this.choiceCombNum = this.selectMatchNum()
    }
  },

  destroyed() {
    // 页面销毁时移除监听
    window.removeEventListener('scroll', this.scrollToTop)
    clearTimeout(this.timer)
  }
}
</script>

<style src="~/assets/css/detail.css"></style>