<!--pages/liveStreamDetails/liveStreamDetails.wxml-->
<wxs src="../../../utils/filter.wxs" module="filter"></wxs> 
<wxs src="../../../utils/myUtils.wxs" module="myUtils"></wxs>
<!-- <wxs src="/packageA/pages/liveStreamDetails/wxs.wxs" module="tool"></wxs> -->
<view class="content">
  <!-- 封面标题 -->
  <view class="cover-container">
    <image src="{{details.share_img}}" class="cover-img" mode="widthFix"></image>
    <!-- <view class="cover-desc">
      <view>{{details.name}}</view>
      <view>{{filter.format_time(details.startshare_time)}}</view>
    </view> -->
  </view>

  <!-- 直播详情 -->
  <view class="desc-container">
    <view class="desc-title">{{details.name}}</view>
    <view class="desc-content">
      <view>{{filter.format_time(details.start_time, 2)}} 锁定直播</view>
      <!-- <view>护肤、彩妆、香氛群星汇聚，更有折扣买赠与神秘新品加持~</view>
      <view>多轮抽奖惊喜连连，不容错过！</view> -->
    </view>
    <text class="desc-status">{{myUtils.liveStatus(details.live_status)}}</text>
  </view>
    
  <!-- 列表 -->
  <view class="list">
    <!-- 列表项 -->
    <block wx:for="{{details.goods}}">
      <view class="list-item" bindtap="clickgoods" data-url="{{item.url}}">
      <!-- {{item}} -->
        <image src="{{item.cover_img}}" class="item-pic" mode="aspectFit"></image>
        <view class="item-desc-container">
          <view class="item-desc">
            <!-- <view>WEI</view> -->
            <view>{{item.name}}</view>
          </view>
          <view class="item-price">{{filter.toFix(item.price/100, 2)}}</view>
        </view>
      </view>
    </block>
    
  </view> 

  <!-- 回放直播 -->
  <view class="btn-container">
    <subscribe wx:if="{{details.live_status === '102'}}" class="btn" room-id="{{details.roomid}}" stopPropagation="{{true}}"></subscribe>
    <view wx:else class="btn" bindtap="clickBtn">{{btnText}}</view>
  </view>
  
  <!-- 分享 -->
  <view class="share-container">
    <image src="/packageA/images/liveStreamDetails/share.jpg" bindtap="clickShare"></image>
    <image src="/packageA/images/liveStreamDetails/home.jpg" bindtap="backHome"></image>
  </view>

  <!-- actionSheet -->
  <view class="{{showActionSheet ? 'share-actionSheet':'share-actionSheet active'}}" hidden="{{showActionSheet}}">
    <view class="share-actionSheet-title">分享</view>
      <view class="share-actionSheet-list">
        <view class="share-actionSheet-item" hover-class="active">
          <button open-type="share">
            <image src="/packageA/images/liveStreamDetails/friend.jpg" class="share-actionSheet-pic"></image>
            <text class="share-actionSheet-desc">发送给朋友</text>
          </button>
        </view>
        <view class="share-actionSheet-item" hover-class="active" bindtap="createPlaybill">
          <image src="/packageA/images/liveStreamDetails/circle.jpg" class="share-actionSheet-pic"></image>
          <text class="share-actionSheet-desc">生成分享海报</text>
        </view>
      </view>
      <view class="share-actionSheet-cancle" bindtap="hiddenActionSheet">取消</view>
  </view>

  <!-- 生成海报 -->
  <view class="{{showPlaybill ? 'playbill':'playbill active'}}" hidden="{{showPlaybill}}">
    <image src="{{canvasToImgPath}}" class="playbill-pic" mode="widthFix" bindtap="closeWin"></image>
    <!-- style="width:{{windowWidth}}px;height:{{windowHeight}}px;" -->
    <view class="playbill-save" bindtap="onSaveToPhone">保存至相册</view>
  </view>

  <!-- <canvas canvas-id="myCanvas" class="" catchtouchmove="true" style="width:{{windowWidth}}px;height:{{windowHeight}}px;"></canvas> -->

  <!-- mask -->
  <!-- 这里mask必须强制放在actionsheet和playbill的后面 -->
  <view class="mask"  bindtap="hiddenActionSheet" catchtouchmove="true"></view>

</view>

<canvas canvas-id="myCanvas" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:-9999px;"></canvas>

<!-- <canvas canvas-id="myCanvas" class="" catchtouchmove="true" style="width:480px;height:738px;position:absolute;left:5000%"></canvas> -->
<!-- <canvas canvas-id='share' style='width:750rpx;height:1217rpx;' wx:if='{{!canvasHidden}}'></canvas> -->
