<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="col-sm-4 form-group form-input-group" style="width: 20%">
            <label class="control-label">开始时间</label>
            <datepicker
              :value.sync="$parent.$parent.startDate"
              placeholder='开始时间' style="margin-top: 8px"
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd 00:00:00'"
              :show-rest-button="reset"
              v-model="$parent.$parent.startDate">
            </datepicker>
          </div>
          <div class="col-sm-4 form-group form-input-group" style="width: 20%">
            <label class="control-label">结束时间</label>
            <datepicker
              :value.sync="$parent.$parent.endDate"
              placeholder='结束时间' style="margin-top: 8px"
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd 23:59:59'"
              :show-rest-button="reset"
              v-model="$parent.$parent.endDate">
            </datepicker>
          </div>
          <div class="row">
            <div class="span" style="margin-top:8px;float:right">
              <button class="button_spacing button_search" @click="search()">查询</button>
            </div>
          </div>
          </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
            <th>所属区域</th>
            <th>小区数量</th>
            <th>用户数量</th>
            <th>已安装报警器数</th>
<!--            <th>已安装胶管数</th>
            <th>已安装波纹管数</th>-->
            <th>已安装热水器数</th>
            <th>已安装壁挂锅炉数</th>
            <th>已安装灶具数</th>
            <th>已安装抽油烟机数</th>
          </tr>
        </template>
        <template partial='body'>
          <td>{{row.f_distinct}}</td>
          <td>{{row.area_count}}</td>
          <td>{{row.user_count}}</td>
          <td>{{row.f_baojingqi_count}}</td>
<!--          <td>{{row.f_user_phone}}</td>
          <td>{{row.f_card_id}}</td>-->
          <td>{{row.f_reshuiqi_count}}</td>
          <td>{{row.f_bigualu_count}}</td>
          <td>{{row.f_zaoju_count}}</td>
          <td>{{row.f_chouyouyanji_count}}</td>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
import { PagedList } from 'vue-client'
import * as Util from '../Util'

export default {
  title: '安检设备报表统计',
  data () {
    let model = new PagedList('rs/sql/querySafeCheckDevicesList', 20, {startDate: 'this.startDate', endDate: 'this.endDate'})
    model.startDate = ''
    model.endDate = ''
    return {
      model:model,
      startDate: Util.toStartDateYearString() + ' 00:00:00',
      endDate: Util.toEndDateString() + ' 23:59:59',
      isBusy: false
    }
  },
  methods: {
    async search(args){
      if(!this.startDate){
        this.$showMessage('请选择起始时间')
        return
      }
      if(!this.endDate){
        this.$showMessage('请选择结束时间')
        return
      }
      this.model.startDate = this.startDate
      this.model.endDate = this.endDate
      await this.model.search(args.condition, args.model)
    }
  },
  ready(){
  },
  watch:{
  }

}
</script>
