<ion-view class="serviceRecordStyle" view-title="服务记录">
  <ion-header-bar align-title="center" class="bar-stable">
    <div class="buttons" ng-click="serviceRecordMain.goBack()">
      <button class="button button-icon icon ion-ios-arrow-back">
      </button>
    </div>
    <h1 class="title">服务记录</h1>
    <div class="buttons">
      <button class="button" ng-click="serviceRecordMain.showscreenModal()" style="background-color: white;">
        <span class="back-button-text" style="font-size: 14px;color: #666666;">筛选</span>
        <img alt="" src="img/service-record/service-screen.png">
      </button>
    </div>
  </ion-header-bar>
  <ion-content class="serviceRecordContent">
    <div class="serviceRecordTabs">
      <div class="focusStyle" ng-click="serviceRecordMain.changeNo('all')">
        全部
        <img alt="" ng-if="serviceRecordMain.showModuleAll" src="img/service-record/downLock.png">
        <img alt="" ng-if="serviceRecordMain.showModuleAllNo" src="img/service-record/upLock.png">
        <div style="height: 2px">&nbsp;</div>
      </div>
      <div ng-click="serviceRecordMain.changeNo('allNo')">
        {{serviceRecordMain.selectNumber}}
        <img alt="" ng-if="serviceRecordMain.showModuleAll" src="img/service-record/upLock.png">
        <img alt="" ng-if="serviceRecordMain.showModuleAllNo" src="img/service-record/downLock.png">
        <div style="height: 2px">&nbsp;</div>
      </div>
    </div>
    <div class="serviceRecordInternalContent">
      <div>
        <div ng-if="serviceRecordMain.repairList.length === 0" style="width:100%; text-align:center;">
          <div style="width:100%; height:100px;"></div>
          <img alt="" src="img/repair/noRepair.png" style="width:100%;">
          <span style="font-size:16px; color:gray;">暂无数据</span>
        </div>
        <ion-list>
          <div class="cell cell-my-repair-item" ng-click="serviceRecordMain.goDetail(item)"
            ng-repeat="item in serviceRecordMain.repairList track by $index">
            <div class="hd hd-my-repair-item">
              <div class="inspection-div">
                <div class="inspection-name-div">
                  <img src="img/repair/repairIcon.png" width="20px" />
                  <span class="dot" ng-if="item.attribute1 === 'N'" style="background-color: red"></span>
                  <span class="type-inspect inspection-name-span" ng-if="item.type === 'BG_GAS_INSPECTSUB'">预约巡检</span>
                  <span class="type-repair inspection-name-span" ng-if="item.type !== 'BG_GAS_INSPECTSUB'">维修</span>
                </div>
                <div style="float:right">
                  <span ng-if="item.repairState !== '已完成'">
                    <img src="img/repair/orange.png" width="15px">
                  </span>
                  <span ng-if="item.repairState === '已完成'">
                    <img src="img/repair/ying.png" width="15px">
                  </span>
                  <span ng-if="item.repairState !== '已完成'" style="color:orange;">{{item.repairState}}</span>
                  <span ng-if="item.repairState === '已完成'" style="color:#7ED321;">{{item.repairState}}</span>
                </div>
              </div>
              <div style="height:30px;line-height:30px;padding:0px;font-weight: bold;">
                <span ng-if="item.type !== 'BG_GAS_INSPECTSUB'">{{item.repairTypeChina}}</span>
              </div>
              <div style="height:30px;line-height:30px;padding:0px;color:gray;">
                服务编号：{{item.serviceNumber}}
                <span style="float: right;display: block;">{{item.createDate}}</span>
              </div>
            </div>
          </div>
        </ion-list>
        <ion-infinite-scroll distance="1%" immediate-check="false" ng-if="!serviceRecordMain.noMorePage"
          on-infinite="serviceRecordMain.loadMore()">
        </ion-infinite-scroll>
      </div>
    </div>
  </ion-content>
</ion-view>