<view class="main">
  <view class="goods-box">
    <swiper class="banner" indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
      <block wx:for="{{goods.goodImage}}" wx:key="index">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="100%" />
        </swiper-item>
      </block>
    </swiper>
    <view class="goods-info">
      <view class="left-section">
        <view class="goods-price">￥ {{goods.goodPrice}}</view>
        <view class="goods-title">{{goods.goodName}}</view>
        <view class="goods-detail">{{goods.goodDetail}}</view>
      </view>
      <view class="right-section">
        <t-button open-type="share" t-class="shareBtn" variant="text">
          <view class="btn-icon">
            <t-icon name="share" size="40rpx" color="#000" />
          </view>
          <view class="share-text">分享</view>
        </t-button>
      </view>
    </view>
    <view class="goods-buy">
      <view class="left" bindtap="goToHome">
        <t-icon class="left-return" name="home"></t-icon>
        <view>首页</view>
      </view>
      <!-- 绑定点击事件，显示规格选择弹出框 -->
      <t-button class="right-buy" theme="light" variant="outline" size="large" shape="round" bindtap="openPopup">立即购买</t-button>
    </view>
  </view>
  <!-- 规格选择弹出框 -->
  <t-popup visible="{{showPopup}}" placement="bottom" bind:visible-change="handlePopupHide">
    <view class="popup-container">
      <view class="popup-close" bindtap="handlePopupHide">
        <t-icon name="close" size="36rpx" />
      </view>
      <view class="popup-sku-header">
        <t-image t-class="popup-sku-header__img" src="{{viewGood}}" />
        <view class="popup-sku-header__goods-info">
          <view class="popup-sku__goods-name">{{goods.goodName}}</view>
          <view class="goods-price-container">
            <view class="goods-price">￥ {{goods.goodPrice}}</view>
          </view>
          <!-- 已选规格 -->
          <view class="popup-sku__selected-spec">
            <view>选择：</view>
            <view wx:for="{{selectedSpecs}}" wx:key="index">
              <view class="popup-sku__selected-item">{{item}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="popup-sku-body">
        <view class="goods-size">默认统一被褥1.5m*2.0m</view>
        <view class="popup-sku-group-container">
          <view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
            <view class="popup-sku-row__title">{{item.title}}</view>
            <view class="popup-sku-row__item-container">
              <block wx:for="{{item.specValueList}}" wx:key="specValueId" wx:for-item="valueItem">
                <view class="popup-sku-row__item {{valueItem.isSelected ? 'popup-sku-row__item--active' : ''}}" data-specid="{{item.specId}}" data-id="{{valueItem.specValueId}}" data-val="{{valueItem.specValue}}" data-goodImage="{{valueItem.goodImage}}" bindtap="selectSpec">
                  {{valueItem.specValue}}
                </view>
              </block>
            </view>
          </view>
        </view>
        <view class="popup-sku-stepper-stock">
          <view class="popup-sku-stepper-container">
            <view class="popup-sku__stepper-title">购买数量</view>
            <t-stepper value="{{buyNum}}" min="1" max="10" theme="filled" bind:change="handleBuyNumChange" />
          </view>
        </view>
      </view>
      <!-- 绑定点击事件，确认选择规格并跳转到订单页面 -->
      <view class="single-confirm-btn" bindtap="confirmSpecs">
        确定
      </view>
    </view>
  </t-popup>
</view>

<t-toast id="t-toast" />