<template>
  <div>
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <validator name="v">
            <div class="row">
              <div class="form-group col-sm-3" :class="[$v.f_user_name.required ? 'has-error' : '']">
                <label class="font_normal_body">用&ensp;户&ensp;名：</label>
                <input type="text" style="width:60%" class="input_search" placeholder='用户名' v-model="model.f_user_name"
                       v-on:keyup.enter="search" v-validate:f_user_name = "['required']"
                       condition="f_user_name = '{}'">
              </div>
              <div class="form-group col-sm-3" :class="[$v.f_phone.required ? 'has-error' : '']">
                <label class="font_normal_body">电&emsp;&emsp;话：</label>
                <input type="text" style="width:60%" class="input_search" placeholder='电话' v-model="model.f_phone"
                       v-on:keyup.enter="search" v-validate:f_phone = "['required']"
                       condition="f_phone = '{}'">
              </div>
              <div class="form-group col-sm-3 button-range">
                <button class="button_search button_spacing" :disabled='!$v.valid' @click="$parent.$parent.search()" v-el:cx>查询</button>
                <button class="button_clear button_spacing" @click="$parent.$parent.clear()">清空</button>
              </div>
            </div>
          </validator>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' v-ref:grid class="list_area table_sy" style="height: 100%">
        <template partial='head'>
          <tr>
            <th style="white-space: nowrap;">序号</th>
            <th style="white-space: nowrap;">报建编号</th>
            <th style="white-space: nowrap;">报建类型</th>
            <th style="white-space: nowrap;">报建性质</th>
            <th style="white-space: nowrap;">用户名</th>
            <th style="white-space: nowrap;">电话</th>
            <th style="white-space: nowrap;">当前环节</th>
            <th style="white-space: nowrap;">报装时间</th>
          </tr>
        </template>
        <template partial='body'>
          <tr>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{$index+1}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.f_apply_num}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.f_apply_type}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.f_apply_nature}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.f_user_name}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.f_phone}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.defname}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" style="text-align: center;">
              <nobr><font>{{row.f_apply_date}}</font></nobr>
            </td>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'

export default {
  title: '合同列表',
  data () {
    return {
      model: new PagedList('rs/sql/publicSupervisory', 20, null)
    }
  },
  ready () {
    // this.search()
  },
  methods: {
    clear () {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null
      })
    },
    click (row) {
      this.$dispatch('click', row)
    },
    search () {
      this.$dispatch('search')
    }
  },
  computed: {
  },
  watch: {
  },
  events: {
  }
}
</script>
<style scoped>
</style>
