<view class="goods-details {{ goodsSpecPopupVisible? 'page-hidden' : '' }}">
  <!-- 顶部导航栏 -->
  <free-capsule-bar fixed="true" background="transparent" />

  <!-- 商品轮播图板块 -->
  <free-swiper
    class="goods-details-banner"
    indicatorMode="number"
    data="{{ bannerImages }}"
    bind:click="onClickBannerItem"
  />

  <!-- 商品基础信息 -->
  <view class="goods-base-info">
    <view class="goods-base-price">
      <view class="goods-base-price-wrap">
        <view class="price-info">
          <text class="price-unit">￥</text>
          <text class="price-value">{{ goodsDetailsData.salePrice }}</text>
        </view>
        <view class="discount-wrap">
          <view class="discount-box">
            <view class="discount-word-wrap">
              <text class="discount-word">折</text>
            </view>
            <text class="discount-text">新品预售限时折扣</text>
            <text class="discount-value">¥{{ goodsDetailsData.goodsPrice }}</text>
          </view>
        </view>
      </view>
      <view class="share-wrap">
        <button
          class="share-btn {{ shareBtnDisabled ? 'share-btn--disabled' : '' }}"
          disabled="{{ shareBtnDisabled }}"
          open-type="share"
          data-goods="{{ goodsInfo }}"
        >
          <iconfont class="share-wechat-icon" name="wechat" size="42" color="#00C800" />
          <text open-type="share" class="share-text">分享</text>
        </button>
      </view>
    </view>
    <view class="goods-base-main">
      <view class="goods-type">
        <text class="goods-tag">预售</text>
        <text class="goods-name" decode="true">{{ goodsDetailsData.goodsName }}</text>
      </view>
      <text class="goods-random-wrap">随机盲盒1个，端盒请拍9个</text>
      <view class="goods-limit-wrap">
        <view class="goods-limit-item">
          <view class="goods-limit-tag">
            <text class="goods-limit-tag-text">限量</text>
          </view>
          <text class="goods-limit-text">限量200件</text>
        </view>

        <view class="goods-limit-item">
          <view class="goods-limit-tag">
            <text class="goods-limit-tag-text">赠送</text>
          </view>
          <text class="goods-limit-text">赠送规则说明</text>
        </view>

        <view class="goods-limit-item">
          <view class="goods-limit-tag">
            <text class="goods-limit-tag-text">预售</text>
          </view>
          <text class="goods-limit-text">{{ preSaleStartTime }}开售</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 品牌&规格&发货板块 -->
  <view class="goods-types">
    <view class="goods-types-container">
      <view class="goods-types-row">
        <view class="goods-types-box">
          <text class="goods-types-label">品牌</text>
          <text class="goods-types-value">王者荣耀</text>
        </view>
      </view>
      <view
        class="goods-types-row goods-types-row__clickable goods-types-row__between"
        bind:tap="showGoodsSpecPopup"
      >
        <view class="goods-types-box">
          <text class="goods-types-label">选择规格</text>
          <text class="goods-types-value">{{ goodsTypesOptions.length }}个可选</text>
        </view>
        <view class="goods-types-nav">
          <iconfont class="icon-right" name="right" size="26" />
        </view>
      </view>
      <view class="goods-types-row">
        <view class="goods-types-box">
          <text class="goods-types-label">发货规则</text>
          <text class="goods-types-value goods-types-value__orange"
            >预售产品，预计{{ goodsDetailsData.preSaleDeliverTime }}发货</text
          >
        </view>
        <view class="goods-types-box goods-types-box-retreat">
          <iconfont class="goods-icon-tui" name="tui" size="26" color="#999" />
          <text class="goods-types-text">{{ goodsDetailsData.preSaleDeliverDesc }}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 商品详情图板块 -->
  <view class="goods-details-images">
    <view class="goods-details-images-wrap">
      <text class="goods-details-images-title">商品详情</text>
      <!-- TODO 需要有默认图 -->
      <block wx:for="{{ detailsImages }}" wx:key="index">
        <van-image
          class="goods-details-images-pic"
          use-loading-slot
          use-error-slot
          width="750rpx"
          height="750rpx"
          fit="cover"
          src="{{ item }}"
          data="{{ item }}"
          lazy-load
          bind:click="onClickDetailsImage"
        >
          <van-loading slot="loading" type="spinner" size="20" vertical />
          <text slot="error">加载失败</text>
        </van-image>
      </block>
    </view>
  </view>

  <!-- 价格描述板块 -->
  <view class="goods-details-price-description">
    <view class="price-description-container">
      <van-collapse border="{{ false }}" value="{{ activeNames }}" bind:change="onChangePriceDes">
        <van-collapse-item name="1" is-link="{{false}}">
          <view slot="title">
            <van-divider contentPosition="center" customStyle="{{ dividerCustomStyle }}">
              <text class="price-description-title">价格说明</text>
              <iconfont name="{{ activeIconName }}" size="22" class="collapse-icon" color="#ccc" />
            </van-divider>
          </view>
          <view class="price-description-content">
            <view class="price-description-row">
              <text class="price-description-label">划线价格:</text>
              划线的价格可能是商品的专柜价、吊牌价、正品零售价、
              指导价、曾经展示过的销售价等，仅供你参考。
            </view>
            <view class="price-description-row">
              <text class="price-description-label">未划线价格:</text>
              未划线的价格是商品的销售标价，具体的成交价格可
              能因会员使用优惠券、积分等发生变化，最终以订单结算价格为准。
            </view>
            <view class="price-description-row">
              *此说明仅当出现价格比较时有效。若这件商品针对划线价格进行了 特殊说明，以特殊说明为准。
            </view>
          </view>
        </van-collapse-item>
      </van-collapse>
    </view>
  </view>

  <!-- 商品推荐板块 -->
  <view class="goods-recommend-container">
    <view class="goods-recommend-head">
      <van-divider contentPosition="center" customStyle="{{ dividerCustomStyle }}">
        <van-image
          class="goods-recommend-icon"
          use-loading-slot
          width="36rpx"
          height="36rpx"
          fit="cover"
          src="https://films-10014007.cos.ap-shanghai.myqcloud.com/mp-ip-commercialize/icon_like.png"
        >
          <van-loading slot="loading" type="spinner" size="20" vertical />
        </van-image>
        <text class="goods-recommend-title">看了又看</text>
      </van-divider>
    </view>
    <goods-list data="{{ recommendList }}" />
  </view>

  <!-- 加入购物车和立即购买按钮 -->
  <van-goods-action custom-class="goods-action-wrap">
    <van-goods-action-icon
      class="goods-action-cart"
      icon="cart-o"
      text="购物车"
      info="{{ cartCount }}"
      bind:click="goCartList"
    />
    <van-button round plain type="default" custom-class="goods-action-btn" bind:click="addCart"
      >加入购物车</van-button
    >
    <van-button
      round
      disabled="{{ buyBtnDisabled }}"
      color="#ff7437"
      type="default"
      custom-class="goods-action-btn"
      bind:click="goodsBuy"
      >{{ buyBtnText }}</van-button
    >
  </van-goods-action>

  <!-- 回到顶部组件 -->
  <free-backtop show="{{ showBackTop }}" bottom="{{ backTopPosition.bottom }}" />

  <!-- 商品规格选择弹框 -->
  <goods-spec-popup
    show="{{ goodsSpecPopupVisible }}"
    btnDisabled="{{ specPopupBtnDisabled }}"
    skuList="{{ goodsDetailsData.skuList }}"
    specList="{{ goodsDetailsData.specGroupList }}"
    imgUrl="{{ specImgUrl }}"
    selectedGoodsTypes="{{ selectedGoodsTypes }}"
    disabledGoodsTypes="{{ disabledGoodsTypes }}"
    goodsPrice="{{ goodsPrice }}"
    discountPrice="{{ discountPrice }}"
    bind:goodsConfirm="onGoodsConfirm"
    bind:closeSpecsPopup="hideGoodsSpecPopup"
  />

  <!-- 全局 toast -->
  <van-toast id="van-toast" />
</view>
