<view class="container">
  <view class="date-range-picker">
    <!-- 开始日期 -->
    <picker 
      mode="date" 
      start="2015-09-01"
      name="beginDate"
      bindchange="bindDateChange1"
      place
    >
      <view class="date-item">
        <text class="date-value">{{form.beginDate}}</text>
      </view>
    </picker>
    <!-- 分隔符 -->
    <text class="separator">~</text>
    <!-- 结束日期 -->
    <picker 
      mode="date" 
      start="2015-09-01"
      name="endDate"
      bindchange="bindDateChange2"
    >
      <view class="date-item">
        <text class="date-value">{{form.endDate}}</text>
      </view>
    </picker>
    <!--  -->
    
  </view>
  <view class="search-bar" style="display: flex; align-items: center;">
          <picker 
            mode="selector"
            range="{{installerList}}" 
            range-key="name"
            value="{{statusIndex}}"
            bindchange="onInstallerChange"
            bindcancel="onInputChangeClear"
            style="flex: 1; margin-right: 10px;"
            class="search-input"
          >
            <view class="picker-view">
              <text style="color: {{serviceStaffname ? '#333333' : '#999999'}}">{{ serviceStaffname || '请选择服务人员'}}</text>
            </view>
          </picker>
           <button class="search-btn" bindtap="getDetail"  style="flex-shrink: 0;width:110rpx; font-size: 12px;margin:0; background-color: #3963bc; color: white; border: none;" >搜索</button>

        </view>


 
  <view class="service-record">
     <view class="record-header"> 
      <text class="section-title">服务记录</text>
    </view>
   
  </view>
   <view>
    <view class="order-info item-box" wx:for="{{records}}" wx:key="index" >
       <view class="info-item">
        <text class="label">日期：</text>
        <text class="value">{{item.installDate}}</text>
      </view>
       <view class="info-item">
        <text class="label">服务项目：</text>
        <text class="value">{{item.projectName}}</text>
      </view>
      <view class="info-item">
        <text class="label">货品编号：</text>
        <text class="value">{{item.goodsCode}}</text>
      </view>
    
      <view class="info-item">
        <text class="label">货品：</text>
        <text class="value">{{item.goodsName}}</text>
      </view>
      <view class="info-item">
        <text class="label">数量：</text>
        <text class="value">{{item.orderQuantity}}</text>
      </view>
      <view class="info-item">
        <text class="label">剩余量：</text>
        <text class="value">{{item.unshippedQuantity}}</text>
      </view>
      <view class="info-item">
        <text class="label">已完成量：</text>
        <text class="value">{{item.shippedQuantity}}</text>
      </view>
      <view class="info-item delay-info">
        <text class="label">今日完成量：</text>
        <text class="value highlight">{{item.installQuantity}}</text>
      </view>
       <view class="info-item">
        <text class="label">服务人员：</text>
        <text class="value">{{item.installUserName}}</text>
      </view>
      <view class="info-item">
        <text class="label">备注：</text>
        <text class="value">{{item.installRemark}}</text>
      </view>
    </view>
  </view>
   <block wx:if="{{!records || records.length === 0}}">
        <view class="table">
          <image style="width: 400rpx; height: 400rpx;margin:0 auto" mode="aspectFit" src="{{noData}}"></image>
          <text style="margin:0 auto">{{dataListTips}}</text> 
        </view>
    </block>
   
  <button class="back-btn" style="flex-shrink: 0; width:140rpx;font-size: 28rpx;margin:20rpx auto; " bindtap="onBack">返回</button>
   
</view>