<style>
.bg {
 background-color: blue;
 height: 1px;
 border: 0;
}
</style>

<template>
  <div>
    <criteria-paged :model="model">
      <criteria partial='criteria' @condition-changed='search'>
        <div partial>
          <form >
            <div class="form-group">
              <label for="f_keyword">小区关键字：</label>
              <input class="form-control" id="f_keyword"
              v-model=model.f_keyword condition="f_residential_area like '%{}%'" />
            </div>
            <button type="button" class="btn btn-default" @click="search">查询</button>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid >
        <template partial='head'>
          <tr>
            <th>小区</th>
            <th>任务数/未修/在修/已修</th>
            <th>隐患级别/A/B/C</th>
          </tr>
        </template>
        <template partial='body'>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.f_residential_area}}</td>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.n}}/{{row.unchecked}}/{{row.halfchecked}}/{{row.checked}}</td>
          <td @click="$parent.$parent.$parent.inspect(row)">{{row.na}}/{{row.nb}}/{{row.nc}}</td>
        </template>
      </data-grid>
    </criteria-paged>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import LocalPagedList from './LocalPagedList'
import Vue from 'vue'
import { PagedList } from 'vue-client'

export default {
  title: '小区列表界面 RepairAreaList',
  data() {
    return {
      model: Vue.android ? new LocalPagedList('维修小区分组', 5, {f_repairman: 'this.repairman'}) : new PagedList(Vue.url + 'sql/维修小区分组', 5, {f_repairman: 'this.repairman'})
    }
  },
  methods: {
    refresh() {
      console.log("refresh items state")
      // hard code relationship
      this.$children[0].$children[1].search()
    },
    inspect(row) {
      this.$goto('repair-list', {f_residential_area: row.f_residential_area}, 'self', this.refresh)
    }
  },
  ready() {
      this.model.repairman = Vue.user.name
      this.refresh()
  },
}
</script>
