<!--pages/clock/clock-tongji/index.wxml-->
<wxs src="../clock.wxs" module="clock"></wxs>
<view class="container">
  <view class="header" bindtap="toList">
    <view class="header-title">
      <text>{{mouth}}月汇总</text>
      <image src="{{imgServerUrl}}/images/clock/clock-arrow-righr-disabled.png"></image>
    </view>
    <view class="header-content">
      <!-- <view class="header-content-items">
        <view class="number">{{clock.toFixed(currentSettlement.nextMoney)}}</view>
        <view class="name">总预支（元）</view>
      </view> -->
      <view class="header-content-items">
        <view class="number">{{currentSettlement.countDuration || 0}}</view>
        <view class="name">总工时（小时）</view>
      </view>
      <view class="header-content-items">
        <view class="number">{{currentSettlement.lackClock || 0}}</view>
        <view class="name">缺卡（次）</view>
      </view>
    </view>
  </view>
  <view class="calendar-content">
    <view class="calendar-content-header">
      <view>月统计数据</view>
      <view class="calendar-content-choose">
        <view class="last" bindtap="last">
          <image src="{{last}}"></image>
        </view>
        <text class="calendar-content-choose-text">{{text}}月</text>
        <view class="next" bindtap="next">
          <image src="{{next}}"></image>
        </view>
      </view>
    </view>
    <calendar class="calendar" list="{{wsPunchClockList}}" bind:day='day' />
  </view>
  <view class="clock-detail">
    <view class="titps">
      <view>请根据企业实际上下班时间打卡</view>
      <view>今日打卡{{clockCount}}次，工时{{currentDuration}}小时</view>
    </view>
    <view class="clock" wx:if='{{punckClockList.length}}'>
      <view class="clock-content" wx:for="{{punckClockList}}" wx:key='index'>
        <view class="left">
          <view class="top" wx:if="{{item.clockType === 1}}"></view>
          <view class="midden" wx:if="{{item.clockType === 1 && (punckClockList[index + 1] && punckClockList[index + 1].clockType !== 1)}}"></view>
          <view class="midden-short" wx:if="{{item.clockType === 1 && (!punckClockList[index + 1] || punckClockList[index + 1].clockType === 1)}}"></view>
          <view class="bottom" wx:if="{{item.clockType === 2 || item.clockType === 3}}"></view>
        </view>
        <view class="right">
          <view class="clock-in" wx:if="{{item.clockType === 1}}">
            <view class="clock-type">上班 {{item.punchClock}}</view>
            <view class="address">
              <image src="{{imgServerUrl}}/images/clock/clock-position.png" class="position"></image>
              <text>{{item.companyName}}</text>
            </view>
          </view>
          <view class="clock-out" wx:if="{{item.clockType === 2}}">
            <view class="clock-type">下班 {{item.punchClock}}</view>
            <view class="address">
              <image src="{{imgServerUrl}}/images/clock/clock-position.png" class="position"></image>
              <text>{{item.companyName}}</text>
            </view>
          </view>
          <view class="clock-out" wx:if="{{item.clockType === 3}}">
            <view class="clock-type">下班 <text class="shortage"> 缺卡</text></view>
            <view class="address">
              <image src="{{imgServerUrl}}/images/clock/clock-position.png" class="position"></image>
              <text>{{item.companyName}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view wx:else class="no-data">
      当天没有打卡记录
    </view>
    <!-- <view class="nextMoney">
      <view class="nextMoney-message">当日可预支工资：</view>
      <view class="money">
        <text>{{nextMoney}}</text>
        <text>元</text>
      </view>
    </view> -->
  </view>

</view>