<template>
  <div class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:criteria>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-3" >
              <label class="font_normal_body">客户编号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_userinfo_code" placeholder='客户编号'
                     condition="f_userinfo_code = '{}'" @keyup.enter="search()">
            </div>
            <!--            <div class="form-group col-sm-3">-->
            <!--              <label class="font_normal_body">客户状态</label>-->
            <!--              <v-select :value.sync="model.f_user_state" v-model="model.f_user_state"-->
            <!--                        :options='$parent.$parent.userstates' placeholder='客户状态'-->
            <!--                        close-on-select condition="f_user_state='{}'"></v-select>-->
            <!--            </div>-->
            <div class="form-group col-sm-3" >
              <label  class="font_normal_body">表&emsp;&emsp;号</label>
              <input type="text" class="input_search" style="width:60%" v-model="model.f_meternumber" placeholder='表号'
                     condition="f_meternumber = '{}'" @keyup.enter="search()">
            </div>
            <div class="form-group col-sm-4 button-range" >
              <button class="button_search" style="margin-right: 10px"  @click="search()" v-el:cba>查询</button>
              <button class="button_search" style="margin-right: 10px"  @click="$parent.$parent.close()" >关闭</button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
        <template partial='head'>
          <tr>
            <th><nobr>用户编号</nobr></th>
            <th><nobr>用户信息</nobr></th>
            <th><nobr>地址信息</nobr></th>
            <th><nobr>用户状态</nobr></th>
            <th><nobr>气表类型</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{row.f_userinfo_code}}</td>
          <td style="text-align: center;">{{row.f_user_name}}&nbsp;&nbsp;{{row.f_user_phone ? row.f_user_phone : ''}}</td>
          <td style="text-align: center;">{{row.f_address_detail ? row.f_address + row.f_address_detail : row.f_address}}</td>
          <td style="text-align: center;">{{row.f_user_state}}</td>
          <td style="text-align: center;">{{row.f_meter_classify}}</td>

        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from 'vue-client'

  export default {
    title: '违约金规则使用人',
    data () {
      return {
        model: new PagedList('rs/sql/sale_getFiles', 20, {})
      }
    },
    props: ['row'],
    ready () {
      this.search()
    },
    methods: {
      close(){
        this.$dispatch('close')
      },
      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      selfSearch (args) {
        this.$refs.paged.$refs.grid.selectInit()
        if(this.row){
          args.condition = `${args.condition} and f_overdue_set = '${this.row.id}'`
        }else{
          args.condition = `${args.condition} and f_orgid = '${this.$login.f.orgid}'`
        }
        this.condition = args.condition
        this.model.search(args.condition, args.model)
      },
    },
    watch: {
      'row' () {
        this.search()
      }
    },
    computed: {
    }
  }
</script>
