<Drawer id="live-bonus-drawer" custom-drawer="live-bonus-drawer-shell" needCancel="{{false}}" bind:myCancel="onLiveBonusDrawerCancel">
  <view wx:if="{{visible}}" class="live-bonus-drawer">
    <view class="live-bonus-header">
      <view class="live-bonus-header-main">
        <view class="live-bonus-title">{{liveBonusTitle}}</view>
        <view wx:if="{{successItems.length || dateRangeText}}" class="live-bonus-header-sub">
          <view wx:if="{{dateRangeText}}" class="live-bonus-date-range">{{dateRangeText}}</view>
          <view wx:if="{{successItems.length}}" class="live-bonus-check-reward" bindtap="openRewardDetail">
            <text class="live-bonus-check-reward-text">查看奖励</text>
            <view class="live-bonus-check-reward-arrow"></view>
          </view>
        </view>
      </view>
      <view class="live-bonus-header-btn live-bonus-header-btn-right" bindtap="closeLiveBonusDrawer">
        <mp-icon icon="close" color="#1d2129" size="{{20}}" class="live-bonus-close-icon drawer-close-shadow" />
      </view>
    </view>
    <view wx:if="{{loading}}" class="live-bonus-empty">加载中...</view>
    <view wx:elif="{{error}}" class="live-bonus-empty">
      <view>{{error}}</view>
      <view class="live-bonus-empty-desc">请检查网络连接后重试</view>
      <button class="live-bonus-retry" bindtap="retry">点击重试</button>
    </view>
    <view wx:elif="{{!taskItems.length}}" class="live-bonus-empty">
      <view>内容为空</view>
      <view class="live-bonus-empty-desc">暂无更多内容</view>
    </view>
    <scroll-view wx:else scroll-y class="live-bonus-list">
      <view wx:for="{{taskItems}}" wx:key="_index" class="live-bonus-item">
        <view class="live-bonus-item-main">
          <view class="live-bonus-item-title">{{item._title}}</view>
          <view class="live-bonus-reward" wx:if="{{item._rewardText}}">
            <image class="live-bonus-reward-icon-img" src="{{item._rewardIconUrl}}" mode="aspectFill" />
            <text class="live-bonus-reward-text">{{item._rewardText}}</text>
            <text wx:if="{{item._stockText}}" class="live-bonus-stock">{{item._stockText}}</text>
          </view>
          <view wx:if="{{item._progressText}}" class="live-bonus-progress">{{item._progressText}}</view>
        </view>
        <view class="live-bonus-actions">
          <button
            class="live-bonus-action {{item._isFinished || item._isOutOfStock ? 'live-bonus-action-finished' : ''}}"
            disabled="{{item._isDisabled}}"
            data-item="{{item}}"
            bindtap="onTaskAction"
          >{{item._actionText}}</button>
        </view>
      </view>
    </scroll-view>
  </view>
</Drawer>

<Drawer id="live-bonus-reward-drawer" custom-drawer="live-bonus-drawer-shell" needCancel="{{false}}" bind:myCancel="onRewardDrawerCancel">
  <view wx:if="{{visible && showRewardDetail}}" class="live-bonus-drawer">
    <view class="live-bonus-header">
      <view class="live-bonus-header-btn live-bonus-header-btn-left" bindtap="backToTaskList">
        <view class="live-bonus-back-icon"></view>
      </view>
      <view class="live-bonus-header-main live-bonus-header-main-detail">
        <view class="live-bonus-title live-bonus-title-detail">已领奖励</view>
      </view>
      <view class="live-bonus-header-btn live-bonus-header-btn-right" bindtap="closeLiveBonusDrawer">
        <mp-icon icon="close" color="#1d2129" size="{{20}}" class="live-bonus-close-icon drawer-close-shadow" />
      </view>
    </view>
    <scroll-view scroll-y class="live-bonus-list live-bonus-reward-list">
      <view wx:if="{{!successItems.length}}" class="live-bonus-empty">暂无已领奖励</view>
      <view wx:else class="live-bonus-detail-card">
        <view wx:for="{{successItems}}" wx:key="_index" wx:for-index="index" class="live-bonus-reward-item">
          <image class="live-bonus-detail-icon-img" src="{{item._rewardIconUrl}}" mode="aspectFill" />
          <view class="live-bonus-detail-main">
            <view class="live-bonus-detail-reward">{{item._rewardText}}</view>
            <view class="live-bonus-detail-desc">{{item._detailDesc}}</view>
          </view>
          <view class="live-bonus-detail-btn" data-item="{{item}}" bindtap="openRewardResult">详情</view>
          <view wx:if="{{index !== successItems.length - 1}}" class="live-bonus-detail-divider"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</Drawer>

<view wx:if="{{autoReceiveVisible && autoReceiveDisplay}}" class="live-bonus-result-overlay live-bonus-result-overlay-auto">
  <view class="live-bonus-result-mask" bindtap="closeAutoReceive"></view>
  <view wx:if="{{autoReceiveConfettiVisible && !autoReceiveDisplay.isFail}}" class="live-bonus-result-confetti">
    <canvas type="2d" id="liveBonusConfettiCanvas" class="live-bonus-result-confetti-canvas"></canvas>
  </view>
  <view class="live-bonus-result-wrap" catchtap="noop">
    <view class="live-bonus-result-card {{autoReceiveDisplay.isFail ? 'live-bonus-result-fail' : ''}}">
      <image class="live-bonus-result-status-img" src="{{autoReceiveDisplay.statusImage}}" mode="widthFix" />
      <view class="live-bonus-result-task">{{autoReceiveDisplay.taskTitle}}</view>
      <view class="live-bonus-result-title">{{autoReceiveDisplay.title}}</view>
      <view wx:if="{{autoReceiveDisplay.showAwardResult}}" class="live-bonus-result-award-block">
        <view class="live-bonus-result-award-card">
          <image class="live-bonus-result-award-img" src="{{autoReceiveDisplay.awardIconUrl}}" mode="aspectFill" />
          <view class="live-bonus-result-award-name">{{autoReceiveDisplay.awardName}}</view>
          <view class="live-bonus-result-sub">{{autoReceiveDisplay.awardQuantityText}}</view>
        </view>
        <view wx:if="{{autoReceiveDisplay.showNoFormTip}}" class="live-bonus-result-sub live-bonus-result-tip">请联系主办方领取奖品</view>
        <view wx:if="{{autoReceiveDisplay.showWinnerInfoForm}}" class="live-bonus-result-form-section">
          <view wx:if="{{winnerLoading}}" class="live-bonus-result-loading">加载中...</view>
          <view wx:elif="{{winnerLoadError}}" class="live-bonus-winner-load-error">{{winnerLoadError}}</view>
          <view wx:elif="{{winnerFulfilled && !winnerFormEdit}}" class="live-bonus-result-info">
            <view class="live-bonus-result-info-header">
              <text>收货信息</text>
              <text class="live-bonus-result-edit" bindtap="editResultWinnerInfo">修改</text>
            </view>
            <view wx:if="{{winnerInfo.ReceiverName}}" class="live-bonus-result-info-row">{{winnerInfo.ReceiverName}}</view>
            <view wx:if="{{winnerInfo.AwardTel}}" class="live-bonus-result-info-row">{{winnerInfo.AwardTel}}</view>
            <view wx:if="{{winnerInfo.AwardEmail}}" class="live-bonus-result-info-row">{{winnerInfo.AwardEmail}}</view>
            <view wx:if="{{winnerInfo.AwardAddress}}" class="live-bonus-result-info-row">{{winnerInfo.AwardAddress}}</view>
          </view>
          <view wx:else class="live-bonus-result-form">
            <view wx:if="{{winnerAwardConfig.showReceiverName}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">收件人<text>*</text></view>
              <input class="live-bonus-result-input {{winnerErrors.ReceiverName ? 'live-bonus-input-error' : ''}}" data-field="ReceiverName" bindinput="onWinnerInput" value="{{winnerForm.ReceiverName}}" placeholder="请输入姓名" />
              <view wx:if="{{winnerErrors.ReceiverName}}" class="live-bonus-error-text">{{winnerErrors.ReceiverName}}</view>
            </view>
            <view wx:if="{{winnerAwardConfig.showMobile}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">手机号<text>*</text></view>
              <input class="live-bonus-result-input {{winnerErrors.AwardTel ? 'live-bonus-input-error' : ''}}" data-field="AwardTel" bindinput="onWinnerInput" value="{{winnerForm.AwardTel}}" placeholder="请输入手机号码" />
              <view wx:if="{{winnerErrors.AwardTel}}" class="live-bonus-error-text">{{winnerErrors.AwardTel}}</view>
            </view>
            <view wx:if="{{winnerAwardConfig.showEmail}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">邮箱<text>*</text></view>
              <input class="live-bonus-result-input {{winnerErrors.AwardEmail ? 'live-bonus-input-error' : ''}}" data-field="AwardEmail" bindinput="onWinnerInput" value="{{winnerForm.AwardEmail}}" placeholder="请输入邮箱" />
              <view wx:if="{{winnerErrors.AwardEmail}}" class="live-bonus-error-text">{{winnerErrors.AwardEmail}}</view>
            </view>
            <view wx:if="{{winnerAwardConfig.showAddress}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">收货地址<text>*</text></view>
              <textarea class="live-bonus-result-textarea {{winnerErrors.AwardAddress ? 'live-bonus-input-error' : ''}}" data-field="AwardAddress" bindinput="onWinnerInput" value="{{winnerForm.AwardAddress}}" placeholder="请输入收货地址" />
              <view wx:if="{{winnerErrors.AwardAddress}}" class="live-bonus-error-text">{{winnerErrors.AwardAddress}}</view>
            </view>
          </view>
        </view>
      </view>
      <view wx:elif="{{autoReceiveDisplay.showRewardBlock}}" class="live-bonus-result-reward-block">
        <image class="live-bonus-result-icon-img" src="{{autoReceiveDisplay.iconUrl}}" mode="aspectFill" />
        <view wx:if="{{autoReceiveDisplay.rewardAmount}}" class="live-bonus-result-reward live-bonus-result-reward-special">
          <text class="live-bonus-result-reward-amount">{{autoReceiveDisplay.rewardAmount}}</text>
          <text class="live-bonus-result-reward-unit">{{autoReceiveDisplay.rewardUnit}}</text>
        </view>
        <view wx:else class="live-bonus-result-reward">{{autoReceiveDisplay.rewardText}}</view>
        <view wx:if="{{autoReceiveDisplay.rewardSubText}}" class="live-bonus-result-sub">{{autoReceiveDisplay.rewardSubText}}</view>
        <view wx:if="{{autoReceiveDisplay.rewardQuantityText}}" class="live-bonus-result-sub">{{autoReceiveDisplay.rewardQuantityText}}</view>
        <view wx:if="{{autoReceiveDisplay.rewardTipText}}" class="live-bonus-result-sub">{{autoReceiveDisplay.rewardTipText}}</view>
      </view>
      <view wx:if="{{autoReceiveDisplay.isFail}}" class="live-bonus-result-fail-block">
        <image class="live-bonus-result-fail-img" src="{{autoReceiveDisplay.failIllustration || assets.failIllustration}}" mode="widthFix" />
      </view>
      <button
        wx:if="{{autoReceiveDisplay.showActionButton && (autoReceiveDisplay.actionType !== 'winnerInfo' || (!winnerLoadError && (!winnerFulfilled || winnerFormEdit)))}}"
        class="live-bonus-result-primary {{autoReceiveDisplay.actionType === 'cashWithdraw' ? 'live-bonus-result-withdraw' : ''}} {{autoReceiveDisplay.actionDisabled || (autoReceiveDisplay.actionType === 'winnerInfo' && winnerSubmitting) ? 'live-bonus-result-primary-disabled' : ''}}"
        disabled="{{autoReceiveDisplay.actionDisabled || (autoReceiveDisplay.actionType === 'winnerInfo' && winnerSubmitting)}}"
        bindtap="onAutoReceivePrimaryAction"
      >{{autoReceiveDisplay.actionType === 'winnerInfo' && winnerSubmitting ? '提交中...' : autoReceiveDisplay.actionText}}</button>
    </view>
    <view class="live-bonus-result-close" bindtap="closeAutoReceive">
      <view class="live-bonus-result-close-icon"></view>
    </view>
  </view>
</view>

<view wx:if="{{rewardResultVisible && rewardResultDisplay}}" class="live-bonus-result-overlay">
  <view class="live-bonus-result-mask" bindtap="closeRewardResult"></view>
  <view wx:if="{{rewardResultConfettiVisible && !rewardResultDisplay.isFail}}" class="live-bonus-result-confetti">
    <canvas type="2d" id="liveBonusConfettiCanvas" class="live-bonus-result-confetti-canvas"></canvas>
  </view>
  <view class="live-bonus-result-wrap" catchtap="noop">
    <view class="live-bonus-result-card {{rewardResultDisplay.isFail ? 'live-bonus-result-fail' : ''}}">
      <image class="live-bonus-result-status-img" src="{{rewardResultDisplay.statusImage}}" mode="widthFix" />
      <view class="live-bonus-result-task">{{rewardResultDisplay.taskTitle}}</view>
      <view class="live-bonus-result-title">{{rewardResultDisplay.title}}</view>
      <view wx:if="{{rewardResultDisplay.showAwardResult}}" class="live-bonus-result-award-block">
        <view class="live-bonus-result-award-card">
          <image class="live-bonus-result-award-img" src="{{rewardResultDisplay.awardIconUrl}}" mode="aspectFill" />
          <view class="live-bonus-result-award-name">{{rewardResultDisplay.awardName}}</view>
          <view class="live-bonus-result-sub">{{rewardResultDisplay.awardQuantityText}}</view>
        </view>
        <view wx:if="{{rewardResultDisplay.showNoFormTip}}" class="live-bonus-result-sub live-bonus-result-tip">请联系主办方领取奖品</view>
        <view wx:if="{{rewardResultDisplay.showWinnerInfoForm}}" class="live-bonus-result-form-section">
          <view wx:if="{{winnerLoading}}" class="live-bonus-result-loading">加载中...</view>
          <view wx:elif="{{winnerLoadError}}" class="live-bonus-winner-load-error">{{winnerLoadError}}</view>
          <view wx:elif="{{winnerFulfilled && !winnerFormEdit}}" class="live-bonus-result-info">
            <view class="live-bonus-result-info-header">
              <text>收货信息</text>
              <text class="live-bonus-result-edit" bindtap="editResultWinnerInfo">修改</text>
            </view>
            <view wx:if="{{winnerInfo.ReceiverName}}" class="live-bonus-result-info-row">{{winnerInfo.ReceiverName}}</view>
            <view wx:if="{{winnerInfo.AwardTel}}" class="live-bonus-result-info-row">{{winnerInfo.AwardTel}}</view>
            <view wx:if="{{winnerInfo.AwardEmail}}" class="live-bonus-result-info-row">{{winnerInfo.AwardEmail}}</view>
            <view wx:if="{{winnerInfo.AwardAddress}}" class="live-bonus-result-info-row">{{winnerInfo.AwardAddress}}</view>
          </view>
          <view wx:else class="live-bonus-result-form">
            <view wx:if="{{winnerAwardConfig.showReceiverName}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">收件人<text>*</text></view>
              <input class="live-bonus-result-input {{winnerErrors.ReceiverName ? 'live-bonus-input-error' : ''}}" data-field="ReceiverName" bindinput="onWinnerInput" value="{{winnerForm.ReceiverName}}" placeholder="请输入姓名" />
              <view wx:if="{{winnerErrors.ReceiverName}}" class="live-bonus-error-text">{{winnerErrors.ReceiverName}}</view>
            </view>
            <view wx:if="{{winnerAwardConfig.showMobile}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">手机号<text>*</text></view>
              <input class="live-bonus-result-input {{winnerErrors.AwardTel ? 'live-bonus-input-error' : ''}}" data-field="AwardTel" bindinput="onWinnerInput" value="{{winnerForm.AwardTel}}" placeholder="请输入手机号码" />
              <view wx:if="{{winnerErrors.AwardTel}}" class="live-bonus-error-text">{{winnerErrors.AwardTel}}</view>
            </view>
            <view wx:if="{{winnerAwardConfig.showEmail}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">邮箱<text>*</text></view>
              <input class="live-bonus-result-input {{winnerErrors.AwardEmail ? 'live-bonus-input-error' : ''}}" data-field="AwardEmail" bindinput="onWinnerInput" value="{{winnerForm.AwardEmail}}" placeholder="请输入邮箱" />
              <view wx:if="{{winnerErrors.AwardEmail}}" class="live-bonus-error-text">{{winnerErrors.AwardEmail}}</view>
            </view>
            <view wx:if="{{winnerAwardConfig.showAddress}}" class="live-bonus-result-form-item">
              <view class="live-bonus-result-form-label">收货地址<text>*</text></view>
              <textarea class="live-bonus-result-textarea {{winnerErrors.AwardAddress ? 'live-bonus-input-error' : ''}}" data-field="AwardAddress" bindinput="onWinnerInput" value="{{winnerForm.AwardAddress}}" placeholder="请输入收货地址" />
              <view wx:if="{{winnerErrors.AwardAddress}}" class="live-bonus-error-text">{{winnerErrors.AwardAddress}}</view>
            </view>
          </view>
        </view>
      </view>
      <view wx:elif="{{rewardResultDisplay.showRewardBlock}}" class="live-bonus-result-reward-block">
        <image class="live-bonus-result-icon-img" src="{{rewardResultDisplay.iconUrl}}" mode="aspectFill" />
        <view wx:if="{{rewardResultDisplay.rewardAmount}}" class="live-bonus-result-reward live-bonus-result-reward-special">
          <text class="live-bonus-result-reward-amount">{{rewardResultDisplay.rewardAmount}}</text>
          <text class="live-bonus-result-reward-unit">{{rewardResultDisplay.rewardUnit}}</text>
        </view>
        <view wx:else class="live-bonus-result-reward">{{rewardResultDisplay.rewardText}}</view>
        <view wx:if="{{rewardResultDisplay.rewardSubText}}" class="live-bonus-result-sub">{{rewardResultDisplay.rewardSubText}}</view>
        <view wx:if="{{rewardResultDisplay.rewardQuantityText}}" class="live-bonus-result-sub">{{rewardResultDisplay.rewardQuantityText}}</view>
        <view wx:if="{{rewardResultDisplay.rewardTipText}}" class="live-bonus-result-sub">{{rewardResultDisplay.rewardTipText}}</view>
      </view>
      <view wx:if="{{rewardResultDisplay.isFail}}" class="live-bonus-result-fail-block">
        <image class="live-bonus-result-fail-img" src="{{rewardResultDisplay.failIllustration || assets.failIllustration}}" mode="widthFix" />
      </view>
      <button
        wx:if="{{rewardResultDisplay.showActionButton && (rewardResultDisplay.actionType !== 'winnerInfo' || (!winnerLoadError && (!winnerFulfilled || winnerFormEdit)))}}"
        class="live-bonus-result-primary {{rewardResultDisplay.actionType === 'cashWithdraw' ? 'live-bonus-result-withdraw' : ''}} {{rewardResultDisplay.actionDisabled || (rewardResultDisplay.actionType === 'winnerInfo' && winnerSubmitting) ? 'live-bonus-result-primary-disabled' : ''}}"
        disabled="{{rewardResultDisplay.actionDisabled || (rewardResultDisplay.actionType === 'winnerInfo' && winnerSubmitting)}}"
        bindtap="onRewardResultPrimaryAction"
      >{{rewardResultDisplay.actionType === 'winnerInfo' && winnerSubmitting ? '提交中...' : rewardResultDisplay.actionText}}</button>
    </view>
    <view class="live-bonus-result-close" bindtap="closeRewardResult">
      <view class="live-bonus-result-close-icon"></view>
    </view>
  </view>
</view>
