<import src="../template/cardShow.wxml" />
<navigation-bar show="true" center="true" bindgetBarInfo="getBarInfo" left="true" background="{{Color.BackColor}}"
  color="#fff">
  <view slot="left" wx:if="{{NumberNew+NumberReview+NumberHistory>0}}">
    <view bindtap="onClose" class="square">退出练习</view>
  </view>
  <view slot="center" bindtap="showNumberContainner" class='panelNumber FlexRow'>
    <block wx:if="{{!Title}}">
      <view class="FlexColumn">
        <view class='panelNumber1'>{{NumberNew}}</view>
        <view hidden="{{TaskInfo.IsHistory || TaskInfo.IsReview}}" class='panelNumber2Line'
          style='background-color:{{Color.LineColor}};'></view>
      </view>
      <view class="FlexColumn">
        <view class='panelNumber1'>{{NumberHistory}}</view>
        <view hidden="{{TaskInfo.IsNew || TaskInfo.IsReview}}" class='panelNumber2Line'
          style='background-color:{{Color.LineColor}};'></view>
      </view>
      <view class="FlexColumn">
        <view class='panelNumber1'>{{NumberReview}}</view>
        <view hidden="{{TaskInfo.IsNew || TaskInfo.IsHistory}}" class='panelNumber2Line'
          style='background-color:{{Color.LineColor}};'></view>
      </view>
      <view class="FlexColumn">
        <view class='panelNumber2 panelNumber1'>{{NumberNew+NumberReview+NumberHistory}}</view>
      </view>
    </block>
    <block wx:if="{{Title}}">{{Title}}</block>
  </view>
</navigation-bar>

<view class="container FlexColumn" style='min-height:{{Containnerheight}}rpx;background-color:{{Color.BackColor}}'
  bindtap='onShowAnswer' data-type="all">
  <!-- 练习中 -->
  <block wx:if="{{(NumberNew+NumberReview+NumberHistory)>0}}">

    <!-- 工具栏 -->
    <view class='panelTop FlexRow' style='background-color:{{Color.BackColor}};'>
      <view class='panelCancel FlexRow' catchtap='gotoCollect'>
        <view class='panelCancel0 FlexRow'>
          <image hidden='{{TaskInfo.IsCollect}}' src="../images/universalpic_star_gray_34x34.png"
            class='universalpic_star_gray_34x34' />
          <image hidden='{{!TaskInfo.IsCollect}}' src="../images/universalpic_star_tc0{{Color.ID}}_34x34.png"
            class='universalpic_star_gray_34x34' />
        </view>
      </view>
      <view class='panelCancel FlexRow' catchtap="gotoEdit">
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_edit_gray_25x25.png" class='universalpic_edit_gray_25x25' />
        </view>
      </view>
      <view class='panelCancel FlexRow' catchtap='onPullDownRefresh' wx:if="{{IsShowAnswer[0]==1}}">
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_han_gray_28x25.png" class='universalpic_han_gray_28x25' />
        </view>
      </view>
      <view class='panelCancel FlexRow' wx:if="{{IsShowAnswer[0]==0}}">
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_han_fff20_28x25.png" class='universalpic_han_gray_28x25' />
        </view>
      </view>


      <view class='panelCancel FlexRow' catchtap='goto' data-url="../other/help?id=1&idchild=12">
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_light_gray_20x28.png" class='universalpic_light_gray_20x28' />
        </view>
      </view>

      <view class='panelCancel FlexRow' catchtap='onMore'>
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_wrench_gray_26x26.png" class='universalpic_wrench_gray_26x26' />
        </view>
      </view>


      <view class='panelCancel FlexRow' wx:if="{{CanUndo==0}}">
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_undo_white_30p_26x20.png" class='universalpic_undo_white_30p_26x20' />
        </view>
      </view>
      <view class='panelCancel FlexRow' catchtap='gotoPrev' wx:if="{{CanUndo==1}}">
        <view class='panelCancel0 FlexRow'>
          <image src="../images/universalpic_undo_gray_26x20.png" class='universalpic_undo_white_30p_26x20' />
        </view>
      </view>

    </view>

    <view class="panelField10" style='background-color:{{Color.BackColor}};'></view>

    <template is="CardShow"
      data="{{Color:Color,Field:TaskInfo.ContentNew.Field,Tags:TaskInfo.ContentNew.Tags,IsShowAnswer:IsShowAnswer,TagWidth:TaskInfo.TagWidth,FontSize:TaskInfo.FontSize,TextSpace}}" />

    <view class="StopAudioPlay FlexRow" wx:if="{{IsAutoSound && IsAutoSoundStart}}"
      style="background-color:{{Color.BackColor3}};" catchtap="autoAudioPlayEnd">
      ■ 停止播放
    </view>
    <view class='footer0'></view>

    <!-- 下方按钮 -->
    <image wx:if="{{!IsIPad}}" class="footerShade" src="../images/study_learning_bgimage_tc0{{Color.ID}}.png" />
    <view class='footer'>
      <image wx:if="{{!IsIPad}}" class="footerImage" src="../images/study_learning_maskimage_tc0{{Color.ID}}.png" />
      <view wx:if="{{IsIPad}}" class="footerImage" style="background-color:{{Color.BackColor}}"></view>
      <view class="panelFooter FlexColumn" wx:if="{{!IsShowAnswer[0] && !IsShowAnswer[1] && ClickType!=1}}"
        catchtap="onShowAnswer">
        看答案
      </view>
      <view class="panelFooter FlexColumn" wx:if="{{IsShowAnswer[0] && !IsShowAnswer[1] && ClickType!=1}}"
        catchtap="onShowAnswer">
        下一段
      </view>
      <view class="panelFooter0 panelFooter FlexColumn" wx:if="{{IsShowAnswer[1]}}">
        <view class='panelBottomAnswer panelBottom FlexRow' animation="{{animationData}}">
          <view class="panelBottomAnswer0 FlexRow">
            <view class="AnswerLeft Answer FlexColumn" hover-class='AnswerHover' catchtap='gotoNext'
              data-time="{{TaskInfo.Number0}}" data-btnnumber="0">
              <view class="btnTime">
                {{TaskInfo.Number0Str}}
              </view>
              <view class="Answer0 btnColor"></view>
            </view>
            <view class="Answer FlexColumn" hover-class='AnswerHover' catchtap='gotoNext'
              data-time="{{TaskInfo.Number1}}" data-btnnumber="3" wx:if="{{TaskInfo.Number1}}">
              <view class="btnTime">
                {{TaskInfo.Number1Str}}
              </view>
              <view wx:if='{{Recommend!=1}}' class="Answer1 btnColor"></view>
              <view wx:if='{{Recommend==1 && MemoryLevel==1}}' class="Answer1Recommend Answer1 btnColor"></view>
            </view>
            <view class="Answer FlexColumn" hover-class='AnswerHover' catchtap='gotoNext'
              data-time="{{TaskInfo.Number2}}" data-btnnumber="4">
              <view class="btnTime">
                {{TaskInfo.Number2Str}}
              </view>
              <view wx:if='{{Recommend!=2}}' class="Answer2 btnColor"></view>
              <view wx:if='{{Recommend==2 && MemoryLevel==1}}' class="Answer1Recommend Answer2 btnColor"></view>

            </view>
            <view class="Answer FlexColumn" hover-class='AnswerHover' catchtap='gotoNext'
              data-time="{{TaskInfo.Number3}}" data-btnnumber="5" wx:if="{{TaskInfo.Number3 && MemoryLevel==1}}">
              <view class="btnTime">
                {{TaskInfo.Number3Str}}
              </view>
              <view wx:if='{{Recommend!=3}}' class="Answer3 btnColor"></view>
              <view wx:if='{{Recommend==3 && MemoryLevel==1}}' class="Answer1Recommend Answer3 btnColor"></view>
            </view>
            <view class="line2"></view>
            <view class="AnswerRight FlexColumn" hover-class='AnswerHover' catchtap='showOtherButton'>
              <image src="../images/universalpic_4blocks_gray_28x28.png" class='universalpic_4blocks_gray_28x28' />
            </view>
          </view>
          <view class="panelBottomAnswer0 FlexRow">
            <view class="AnswerLeft Answer00 FlexColumn" hover-class='AnswerHover' catchtap='saveCardType' data-foldertype="0">
              归档
            </view>
            <view class="line3"></view>
            <view class="Answer00 FlexColumn" hover-class='AnswerHover' catchtap='saveCardType' data-foldertype="1">
              不会
            </view>
            <view class="line3"></view>
            <view class="Answer00 FlexColumn" hover-class='AnswerHover' catchtap='gotoNext' data-btnnumber="2">
              挪到最后
            </view>
            <view class="line3"></view>
            <view class="Answer00 FlexColumn" hover-class='AnswerHover' catchtap='gotoNext' data-time="1d"
              data-btnnumber="1">
              搁置
            </view>
            <view class="line2"></view>
            <view class="AnswerRight FlexColumn" hover-class='AnswerHover' catchtap='closeOtherButton'>
              <image src="../images/universalpic_close_gray_24x24.png" class='universalpic_close_gray_24x24' />
            </view>
          </view>
        </view>
      </view>
    </view>
  </block>
  <!-- 最后一页 -->
  <block wx:if="{{NumberNew+NumberReview+NumberHistory==0}}">
    <view class='panelLast FlexColumn'
      style='height:{{Containnerheight}}rpx;background-color:{{Color.BackColor}};top:{{topBarHeight}}rpx;'>
      <view class='text1{{IsIPad}}'>做完了</view>
      <view class="panelLastTime FlexColumn">
        <view style='color:{{Color.FrontColor1}};'>今日练习总共用时</view>
        <view class="time1 FlexRow" style='color:{{Color.LineColor}}'>
          <view class='time11'>{{TodayTime}}</view>
          <view>分钟</view>
        </view>
      </view>
      <view class="panelLastTime FlexColumn">
        <view style='color:{{Color.FrontColor1}};'>单张题卡平均用时</view>
        <view class="time2" style='color:{{Color.LineColor}}'>{{Speed2}}</view>
      </view>
      <view class="panelLastTime FlexColumn">
        <view style='color:{{Color.FrontColor1}};'>每分钟可练习</view>
        <view class="time2" style='color:{{Color.LineColor}}'>{{Speed1}}</view>
      </view>
      <view class='panelLastFooter'>
        <view class="panelLastFooter1 FlexRow" bindtap='buildShareImage'>
          <image src="../images/universalpic_screenshot_gray_30x30.png" class='universalpic_screenshot_gray_30x30' />
          <view>群接力</view>
        </view>
        <view class="panelLastFooter2 FlexRow" bindtap='onClose'>
          <view>关闭</view>
        </view>
      </view>
    </view>
  </block>
  <!-- 今日任务量 -->
  <view wx:if="{{IsShowNumberInfo}}" class="numberContainer FlexColumn"
    style='height:{{Containnerheight+100}}rpx;background-color:{{Color.BackColor}};top:{{topBarHeight}}rpx;'>
    <view class="numberContainerFooter1 FlexColumn">
      <view class='lineFooter'></view>
      <view class="numberContainer12 FlexRow">
        <view class='left'>新题卡</view>
        <view class='right3'>{{NumberNew}}张</view>
      </view>
      <view class="lineWidthAll FlexRow">
        <view class="lineWidth720"></view>
      </view>
      <view class="numberContainer12 FlexRow">
        <view class='left'>旧题卡</view>
        <view class='right3'>{{NumberHistory}}张</view>
      </view>
      <view class="lineWidthAll FlexRow">
        <view class="lineWidth720"></view>
      </view>
      <view class="numberContainer12 FlexRow">
        <view class='left'>本轮及时强化 / 并回顾上次练习未练完的题卡</view>
        <view class='right3'>{{NumberReview}}张</view>
      </view>
      <view class="lineWidthAll FlexRow">
        <view class="lineWidth720"></view>
      </view>
      <view class="numberContainer12 FlexRow">
        <view class='left' style='color:{{Color.LineColor}};'>未练完总计</view>
        <view class='right3' style='color:{{Color.LineColor}};'>{{NumberNew+NumberReview+NumberHistory}}张</view>
      </view>
      <view class='lineFooter'></view>

    </view>
    <view class="numberContaineFooter FlexRow" catchtap='closeNumberContainner'>
      <view>关闭</view>
    </view>
  </view>

  <!-- 更多功能 -->
  <view wx:if="{{IsMore}}" class="numberContainer FlexColumn" catchtap="getNull"
    style='min-height:{{Containnerheight+100}}rpx;background-color:{{Color.BackColor}};top:{{topBarHeight}}rpx;'>
    <view class="numberContainerFooter1 FlexColumn">

      <view class='numberContainerFooter101 FlexRow'> 
        <image src="../images/universalpic_typesize_gray_30x18.png" class='universalpic_typesize_gray_30x18' /> 
        <view class='numberContainerFooter11 FlexColumn'> 
          <view class='numberContainerFooter111'>调整题目字号</view> 
          <view class='numberContainerFooter112 FlexRow'> 
            <view class='numberContainerFooter1121' wx:for="{{FontSizeArray}}" wx:key="index" catchtap='onFontSize' data-value='{{item.Value}}' style='{{item.CSS}}'>{{item.Name}}</view> 
          </view> 
        </view> 
      </view> 
      <view class='lineFooter'></view>
      <view class='numberContainerFooter107 FlexRow' catchtap='onShowFolder'>
        <view class="MenuLeft FlexRow">
          <image src="../images/universalpic_cardlist_gray_30x28.png" class='universalpic_cardlist_gray_30x28' />
          <view class='numberContainerFooter111'>卡单优先</view>
        </view>
        <view class="MenuRight">
          <image src='../images/universalpic_indicator_right_white.png' class="Arrow" />
        </view>
      </view>
      <view class='lineFooter'></view>
      <view class='numberContainerFooter102 FlexRow'>
        <image src="../images/universalpic_autoread_gray_30x23.png" class='universalpic_autoread_gray_30x23' />
        <view class='numberContainerFooter111'>自动播放题卡里的声音</view>
        <switch class="switch" color="#4CD964" checked="{{IsAutoSound}}" bindchange="switchSound" />
      </view>
      <view class='lineFooter'></view>
    </view>
    <view class="numberContaineFooter FlexRow" catchtap='closeNumberContainner'>
      <view>关闭</view>
    </view>
  </view>

  <!-- 卡单 -->
  <view wx:if="{{IsShowFolder}}" class="numberContainer FlexColumn" catchtap="getNull"
    style='min-height:{{Containnerheight+100}}rpx;background-color:{{Color.BackColor}};top:{{topBarHeight}}rpx;'>
    <view class='numberContainerFooter106 FlexColumn'>
      <view class="numberContainerFooter1061">按卡单优先出题</view>
      <view class="numberContainerFooter1062">如果想改变任务量的出题顺序（如，早上练诗词，晚上练识字，睡前练单词，计算题集中在作业后等），首先利用卡单给题卡做分类，然后在这里选择优先出题的卡单。
      </view>
    </view>
    <scroll-view scroll-y="true" class="FolderList FlexColumn" style="height:{{Containnerheight-450}}rpx;">
      <view class="FolderItem FlexRow" catchtap="setCurrentFolder" data-folderid='0'
        wx:if="{{FolderList[0].FolderID==0 && FolderList[0].Total>0}}">
        <view class="FolderItem1">没有卡单的题卡</view>
        <view class="MenuRight FlexRow">
          <view class="FolderItem2 FolderItem1">{{FolderList[0].Total}}张</view>
          <image src='../images/universalpic_indicator_right_gray.png' class="Arrow" />
        </view>
      </view>
      <view class="FolderTitle" wx:if="{{FolderListLength>1 || FolderList[0].FolderID>0}}">任务量里包含以下卡单可优先出题</view>
      <view class="FolderTitle" wx:if="{{(FolderListLength==1 && FolderList[0].FolderID==0) || (FolderListLength==0)}}">
        当前任务量里没有可优先的卡单</view>
      <view class="FolderItem0 FolderItem FlexRow" wx:for="{{FolderList}}" catchtap="setCurrentFolder"
        data-folderid='{{item.FolderID}}' wx:key="*this" wx:if="{{item.FolderID!=0 && item.Total!=0}}">
        <view class="FolderItem1">{{item.FolderName}}</view>
        <view class="MenuRight FlexRow">
          <view class="FolderItem2 FolderItem1">{{item.Total}}张</view>
          <image src='../images/universalpic_indicator_right_gray.png' class="Arrow" />
        </view>
      </view>
      <block wx:if="{{IsFinallyCount && IsFinallyCount>0}}">
        <view class="FolderTitle">提醒：有 {{IsFinallyCount}} 张题卡挪到最后练习</view>
        <view class="FolderTitle2">中途退出练习，以上信息均会更新，「挪到最后」不会保留。</view>
      </block>
      <view class="FolderTitle"
        wx:if="{{IsFinallyCount && IsFinallyCount>0 && FolderList[0].FolderID==0 && FolderList[0].Total==0}}">点「关闭」练完它们
      </view>

      <view style="height:60rpx"></view>
    </scroll-view>
    <view class='numberContainerFooter105 FlexRow' style="background-color:{{Color.BackColor}};">
      <view class="numberContainerFooter1051 FlexColumn">
        <view class="numberContainerFooter10511">每次练习都要选</view>
        <view class="numberContainerFooter10512">开始练习时，只要任务量里有卡单就自动开启本功能</view>
      </view>
      <switch class="switch" checked="{{IsFolderPractice}}" bindchange="saveIsFolderPractice" />
    </view>
    <view class="numberContaineFooter FlexRow" catchtap='closeNumberContainner'
      style="background-color:{{Color.BackColor}};z-index:50;">
      <view>关闭</view>
    </view>
  </view>
</view>

<canvas class='Canvas' canvas-id="shareCanvas"></canvas>
<!-- <canvas class='Canvas' type="2d" id="shareCanvas"></canvas> -->

<audio hidden='true' src="{{AudioSrc}}" id="myAudio" bindended="audioBindEnded" binderror="audioBindError"></audio>