<view class="container">
  <van-sticky wx:if="{{createTabs}}">
    <view id="tabs" class="tabs-container">
      <van-tabs sticky bind:click="onTabsChange" custom-class="" active="{{ active }}">
        <van-tab wx:for="{{tabs}}" title="{{item.tabs_name}}" name="{{item.tabs_name}}"/>
      </van-tabs>
    </view>
  </van-sticky>
  <scroll-view class="scroll-container" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="bindscroll">
    <view class="swiper-container" id="swiper-container">
      <swiper class="swiper_box" indicator-dots="true" indicator-active-color="#fff"
        autoplay="{{!goodsDetail.basicInfo.videoId}}" circular>
        <swiper-item wx:if="{{goodsDetail.basicInfo.videoId}}">
          <video src="{{videoMp4Src}}" autoplay="true" loop="true" style='width:100%;height:100%;'></video>
        </swiper-item>
        <swiper-item wx:for="{{goodsDetail.pics}}" wx:key="id">
          <image src="{{item.pic}}" class="slide-image" mode="aspectFill" lazy-load="true" />
        </swiper-item>
      </swiper>
    </view>
    <view class="goods-info">
      <view class="goods-info-top-container">
        <view class="goods-profile">
          <view class="p"><text>¥</text> {{selectSizePrice}}</view>
          <view wx:if="{{goodsDetail.basicInfo.originalPrice && goodsDetail.basicInfo.originalPrice > 0}}"
            class="goods-price" style='color:#aaa;text-decoration:line-through;padding: 15rpx 0rpx 0rpx 15rpx;'>
            <text>¥</text> {{selectSizeOPrice}}</view>
        </view>
        <view class="goods-info-fx">
          <view class='item left'>
            <van-icon name="share-o" size="24px" />
            <view class="icon-title">分享</view>
            <button open-type='share'></button>
          </view>
          <view class='item' bindtap="drawSharePic">
            <van-icon name="qr" size="24px"/>
            <view class="icon-title">二维码</view>            
          </view>
        </view>
      </view>
      <view class="goods-title">{{goodsDetail.basicInfo.name}}</view>
      <view class="characteristic">{{goodsDetail.basicInfo.characteristic}}</view>
      <view class="goods-share" wx:if="{{goodsDetail.basicInfo.commissionType == 1}}">分享有赏，好友下单后可得
        {{goodsDetail.basicInfo.commission}} 积分奖励</view>
      <view class="goods-share" wx:if="{{goodsDetail.basicInfo.commissionType == 2}}">分享有赏，好友下单后可得
        {{goodsDetail.basicInfo.commission}}元 现金奖励</view>     
    </view>

    <van-cell-group wx:if="{{curGoodsKanjia}}" title="商品砍价设置">
      <van-cell title="限量" value="{{curGoodsKanjia.number}}份" />
      <van-cell title="已售" value="{{curGoodsKanjia.numberBuy}}份" />
      <van-cell title="原价" value="￥{{curGoodsKanjia.originalPrice}}" />
      <van-cell title="底价" value="￥{{curGoodsKanjia.minPrice}}" />
      <van-cell title="截止" value="{{curGoodsKanjia.dateEnd}}" />
    </van-cell-group>
    <van-cell-group wx:if="{{pingtuanSet}}" title="商品拼团设置">
      <van-cell title="已成团" value="{{pingtuanSet.numberSucccess}}" />
      <van-cell title="成团人数" value="{{pingtuanSet.numberPersion}}" />
      <van-cell title="退款条件" value="{{pingtuanSet.timeoutHours}}小时未成团" />
      <van-cell title="截止" value="{{pingtuanSet.dateEnd}}" />
    </van-cell-group>
    <view class="curKanjiaprogress" wx:if="{{curKanjiaprogress}}">
      <view class="name">帮
        <text style='color:red;font-weight:bold;'>{{curKanjiaprogress.joiner.nick}}</text> 砍价吧！
      </view>
      <van-progress
        percentage="{{100 * (curGoodsKanjia.originalPrice - curKanjiaprogress.kanjiaInfo.curPrice) / (curGoodsKanjia.originalPrice - curGoodsKanjia.minPrice)}}"
        pivot-text="￥{{curKanjiaprogress.kanjiaInfo .curPrice}}"
        pivot-color="#1aad19"
        color="#1aad19"
        custom-class="van-progress"
      />
      <view class="flex">
        <view class="kjbutton">
          <button type="primary" open-type="share">邀请朋友帮忙</button>
        </view>
        <view class="kjbutton">
          <button type="warn" bindtap="helpKanjia"
            disabled="{{myHelpDetail}}">{{myHelpDetail?"您已砍过":"帮TA砍"}}</button>
        </view>
      </view>
      <van-cell title="帮砍人数" value="{{curKanjiaprogress.kanjiaInfo .helpNumber}}" />
      <van-cell title="状态" value="{{curKanjiaprogress.kanjiaInfo .statusStr}}" />
      <van-cell title="报名时间" value="{{curKanjiaprogress.kanjiaInfo .dateAdd}}" />
    </view>
    <block wx:if="{{curGoodsKanjia && (!curKanjiaprogress || curKanjiaprogress.kanjiaInfo.uid != curuid)}}">
      <button type="warn" bindtap="joinKanjia" style='width:700rpx;'>我也要报名参与</button>
      <view class='space'></view>
    </block>
    <view class="goods-des-info" style="margin-top:35rpx;" wx:if="{{pingtuanList}}">
      <view class="label-title" style="border-bottom:1px solid #eee;">{{pingtuanList.length}}人在拼单，可直接参与</view>
      <view class="goods-text" style="margin-top:15rpx;border-bottom:1px solid #eee;overflow:hidden;"
        wx:for="{{pingtuanList}}" wx:key="id">
        <view style="width:150rpx;float:left;">
          <image style="width: 150rpx; height: 150rpx;" src="{{item.apiExtUser.avatarUrl}}"></image>
          <view style="width:150rpx;text-align:center;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            {{item.apiExtUser.nick}}</view>
        </view>
        <view style="width:500rpx;float:left;margin-left:35rpx;">
          <view>已有
            <text style="color:red"> {{item.helpNumber}} </text>人参与</view>
          <view style="color: #B0B0B0;font-size:24rpx;">截止: {{item.dateEnd}}</view>
          <button type="warn" size="mini" data-pingtuanopenid="{{item.id}}" bindtap="toPingtuan"> 去拼单 </button>
        </view>
      </view>
    </view>
    <van-cell wx:if="{{hasMoreSelect && goodsDetailSkuShowType==0}}" custom-class="vw100 goods-property-container" border="{{false}}" 
      is-link bind:click="bindGuiGeTap">
      <view slot="title">
        请选择:
        <block wx:for="{{goodsDetail.properties}}" wx:key="id"> {{item.name}}</block>
        <block wx:for="{{goodsAddition}}" wx:key="id"> {{item.name}}</block>
      </view>
    </van-cell>
    <view class="size-label-box2" wx:if="{{goodsDetailSkuShowType==1}}">
      <view class="label-title">选择商品规格</view>
      <view class="size-label-box">
        <block wx:for="{{goodsDetail.properties}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
          <view class="label">{{property.name}}</view>
          <view class="label-item-box">
            <view class="label-item {{item.active ? 'active' : '' }}" wx:for="{{property.childsCurGoods}}" wx:key="id"
              bindtap="labelItemTap" data-propertyindex="{{idx}}" data-propertychildindex="{{index}}">
              {{item.name}}
            </view>
          </view>
        </block>
      </view>
      <van-cell title="购买数量">
        <view>
          <van-stepper value="{{ buyNumber }}" min="{{ buyNumMin }}" max="{{ buyNumMax }}" bind:change="stepChange" />
        </view>
      </van-cell>
    </view>
    <view wx:if="{{shopSubdetail}}" class="shop-container">
      <image mode="aspectFill" src="{{shopSubdetail.info.pic}}"></image>
      <view class="info">
        <view class="title">{{shopSubdetail.info.name}}</view>
        <view class="address">{{shopSubdetail.info.address}}</view>
      </view>
    </view>
    <view class="goods-des-info" id="goods-des-info">
      <view class="label-title"> 
        <view class="left">商品详情</view>
      </view>
      <view class="goods-text">
        <parser html="{{goodsDetail.content}}" />
      </view>
    </view>
    <van-cell-group id="reputation" wx:if="{{!curGoodsKanjia && reputation}}" custom-class="vw100 reputation-cell-group">
      <view class="label-title"> 
        <wxs module="goodReputationPercent">
        module.exports = {
          v : function(goodsDetail) {
            if (!goodsDetail || !goodsDetail.basicInfo) {
              return "100"
            }
            var goodReputation = goodsDetail.basicInfo.numberGoodReputation / goodsDetail.basicInfo.numberOrders * 100
            goodReputation = goodReputation.toFixed(0)
            return goodReputation
          }
        }
        </wxs>
        <view class="left">宝贝评价 {{goodsDetail.basicInfo.numberGoodReputation}}</view>
        <view>好评度：{{goodReputationPercent.v(goodsDetail)}}%</view>
      </view>
      <block wx:for="{{reputation.result}}" wx:key="id">
        <van-cell custom-class="reputation-cell" title="{{item.user.nick}}"
          label="{{item.goods.dateReputation}}" border="{{ false }}">
          <van-image slot="icon" custom-class="avatarUrl-img" src="{{item.user.avatarUrl}}" round/>
          <van-rate value="{{ item.goods.goodReputation }}" color="#e64340" readonly />          
        </van-cell>
        <van-cell wx:if="{{ item.goods.goodReputationRemark }}" title-class="reputation-cell-reamrk"
          title="{{item.goods.goodReputationRemark}}" />
        <view wx:if="{{ item.reputationPics }}" class="reputation-pics">
          <image wx:for="{{item.reputationPics}}" wx:for-item="picItem" src="{{ picItem.pic }}" mode="aspectFill"
            bindtap="previewImage" data-url="{{ picItem.pic }}"></image>
        </view>
        <van-cell wx:if="{{ item.goods.goodReputationReply }}" title-class="reputation-cell-reamrk"
          title="掌柜回复:{{item.goods.goodReputationReply}}" />
      </block>
    </van-cell-group>
    <van-cell-group wx:if="{{curKanjiaprogress && curKanjiaprogress.helps && curKanjiaprogress.helps.length>0}}" title="砍价记录">
      <view class="kjlj"  wx:for="{{curKanjiaprogress.helps}}" wx:key="*this">
        <image class="kjlj-l" src="{{item.avatarUrl}}" mode="aspectFill" />
        <van-cell custom-class="kjlj-r" title="￥ {{item.cutPrice}}" label="{{item.nick}} {{item.dateAdd}} 帮砍" size="large" />
      </view>
    </van-cell-group>
    <view class='kjBuyButton' wx:if="{{curGoodsKanjia && curKanjiaprogress}}">
      <view class="item" wx:if="{{curKanjiaprogress.kanjiaInfo.uid != curuid}}">
        <van-button type="primary" block bind:click="helpKanjia" disabled="{{myHelpDetail}}">
          {{myHelpDetail?"您已砍过":"帮TA砍"}}</van-button>
      </view>
      <view class="item" wx:else>
        <van-button type="danger" block bind:click="tobuy">用当前价购买</van-button>
      </view>
    </view>
  </scroll-view>
  <van-goods-action wx:if="{{!curGoodsKanjia}}">
    <van-goods-action-icon icon="chat-o" text="客服" open-type="contact"
      send-message-title="{{goodsDetail.basicInfo.name}}" send-message-img="{{goodsDetail.basicInfo.pic}}"
      send-message-path="/pages/goods-details/index?id={{goodsDetail.basicInfo.id}}" show-message-card="{{ true }}" />
    <van-goods-action-icon icon="cart-o" text="购物车" bind:click="goShopCar" info="{{ shopNum ? shopNum : '' }}" />
    <van-goods-action-icon icon="{{faved?'like':'like-o'}}" text="收藏" bind:click="addFav" />
    <van-goods-action-button wx:if="{{!goodsDetail.basicInfo.pingtuan}}" text="加入购物车" type="warning"
      bind:click="{{goodsDetailSkuShowType==0?'toAddShopCar':'addShopCar'}}" />
    <van-goods-action-button wx:if="{{!goodsDetail.basicInfo.pingtuan}}" text="立即购买" data-shopType="{{shopType}}"
      bind:click="{{goodsDetailSkuShowType==0?'tobuy':'buyNow'}}" />
    <van-goods-action-button wx:if="{{goodsDetail.basicInfo.pingtuan}}" text="单独购买" type="warning"
      bind:click="tobuy" />
    <van-goods-action-button wx:if="{{goodsDetail.basicInfo.pingtuan}}" text="发起拼团" bind:click="toPingtuan" />
  </van-goods-action>
</view>

<block wx:if="{{posterShow}}">
  <view class="poster-mask"></view>
  <view class="poster">
    <canvas class="canvas" style="{{canvasstyle}}" canvas-id="firstCanvas"></canvas>
  </view>
  <view class="poster-btn">
    <button type="primary" size="mini" bindtap='_saveToMobile'> 保存图片 </button>
    <button type="warn" size="mini" bindtap='closePop'> 关闭 </button>
  </view>
</block>

<poster id="poster" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
<view wx:if="{{showposterImg}}" class="popup-mask"></view>
<view wx:if="{{showposterImg}}" class="posterImg-box">
  <image mode="widthFix" class="posterImg" src="{{posterImg}}"></image>
  <view class="btn-create" bindtap="savePosterPic">保存到相册</view>
</view>

<van-popup show="{{ !hideShopPopup }}" round closeable position="bottom"
  custom-style="padding-top:48rpx;max-height: 80%;" bind:close="closePopupTap">
  <van-card centered price="{{ selectSizePrice }}"
    origin-price="{{ selectSizePrice != selectSizePrice ? selectSizeOPrice : '' }}"
    title="{{ goodsDetail.basicInfo.name }}" thumb="{{ skuGoodsPic }}" />
  <view class="size-label-box">
    <block wx:for="{{goodsDetail.properties}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
      <view class="label">{{property.name}}</view>
      <view class="label-item-box">
        <view class="label-item {{item.active ? 'active' : '' }}" wx:for="{{property.childsCurGoods}}" hidden="{{ item.hidden }}" wx:key="id"
          bindtap="labelItemTap" data-propertyindex="{{idx}}" data-propertychildindex="{{index}}">
          {{item.name}}
        </view>
      </view>
    </block>
    <block wx:for="{{goodsAddition}}" wx:for-item="property" wx:for-index="idx" wx:key="id">
      <view class="label">{{property.name}}</view>
      <view class="label-item-box">
        <view class="label-item {{item.active ? 'active' : '' }}" wx:for="{{property.items}}" wx:key="id"
          bindtap="labelItemTap2" data-propertyindex="{{idx}}" data-propertychildindex="{{index}}">
          {{item.name}}
        </view>
      </view>
    </block>
  </view>
  <van-cell title="购买数量">
    <view>
      <van-stepper value="{{ buyNumber }}" min="{{ buyNumMin }}" max="{{ buyNumMax }}" bind:change="stepChange" />
    </view>
  </van-cell>
  <van-button wx:if="{{shopType =='addShopCar'}}" bindtap="addShopCar" type="danger" block>加入购物车</van-button>
  <van-button wx:if="{{shopType =='tobuy' || shopType =='toPingtuan'}}" data-shopType="{{shopType}}" bindtap="buyNow"
    type="danger" block>立即购买</van-button>
</van-popup>