<template>
  <div>
    <div id="h">
      <criteria-paged :model="model">
        <criteria partial='criteria' @condition-changed='search'>
          <div novalidate class="form-inline auto" partial>
            <div class="form-group">
              <!-- 营业网点:
              <v-select :value.sync="model.network"
                  :options='$parent.$parent.network' placeholder='请选择'
                  close-on-select clear-button
                  v-model="model.network"></v-select>
              操作员姓名:
              <v-select :value.sync="model.operator"
                  :options='$parent.$parent.operator' placeholder='请选择'
                  close-on-select clear-button
                  v-model="model.operator"></v-select> -->
              <label for="startDate">开始日期:</label>
              <datepicker id="startDate" placeholder="开始日期"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
              <label for="startDate">结束日期:</label>
              <datepicker id="endDate" placeholder="结束日期"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :disabled-days-of-Week="[]"
                          :format="'yyyy-MM-dd'"
                          :show-reset-button="reset">
              </datepicker>
              <button class="btn btn-default" @click="search()">查询</button>
              <report-print id='gongyeshe' top='1cm' left='1cm' width='100%' height='100%'></report-print>
              <report-excel id='gongyeshe'></report-excel>
            </div>
          </div>
        </criteria>

        <div partial='list' id='gongyeshe'>
          <data-grid :model="model" classname="reporttable" partial='list'>
            <template partial='head'>
              <tr>
                <th colspan='4' style="border: 1px solid white; border-bottom: 1px solid black; text-align: center;">
                  <h1 align="center">批次故障量</h1>
                </th>
              </tr>
              <tr>
                <th>批次</th>
                <th>投运量</th>
                <th>故障量</th>
                <th>故障占比</th>
              </tr>
            </template>
            <template partial='body'>
              <tr>
                <td style="text-align: center;">{{row.jb}}</td>
                <td style="text-align: center;">{{row.jbnumber}}</td>
                <td style="text-align: center;">{{row.breaknumber}}</td>
                <td style="text-align: center;">{{row.bili}}</td>
              </tr>
            </template>
          </data-grid>
        </div>
      </criteria-paged>
    </div>

</template>
<script>
  import { PagedList } from 'vue-client'
  export default {
    title: '批次故障量',
    data () {
      return {
        model: new PagedList('rs/sql/getBatch', 20, {startDate: 'this.model.startDate', endDate: 'this.model.endDate'})
      }
    }
  }
</script>
