<style scoped>
  .app-row {
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .search_input {
    border: 0;
    outline: none;
    width: 100%;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .input-font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .btn-font{
    font:600 16px PingFang-SC-Bold;
    color: #499EDF;
  }
  .btn-color{
    background-color: #FFFFFF;
    border-radius: 10px ;
    border: 1px solid #499EDF;
  }
  .app-text {
    font-size: 12px;
  }
  .panel-self{
    border-radius: 10px;
    border:1px solid #499EDF;
    background-color: #F8F8F8;
  }
  .header-bar {
    background-color: #499EDF;
    color: white;
    padding: 10px;
    text-align: center;
    position: relative;
  }
  .header-title {
    font-size: 18px;
    font-weight: bold;
  }
  .back-button {
    position: absolute;
    left: 10px;
    top: 10px;
    color: white;
  }
  .sound-button {
    position: absolute;
    right: 10px;
    top: 10px;
    color: white;
  }
  .btn-new {
    background-color: #499EDF;
    color: white;
    border-radius: 10px;
    border: none;
  }
  .user-info {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #f8f8f8;
    padding: 10px;
    border-radius: 5px;
  }
</style>

<template>
  <div class="auto">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_meternumber" class="font text-left">表 号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_meternumber" class="search_input input-font" v-model="model.f_meternumber" placeholder="请输入表号" condition="f_meternumber = '{}'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_userinfo_code" class="font text-left">用户名称：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_name" class="search_input input-font" v-model="model.f_user_name" placeholder="请输入用户名称 (可模糊查询)" condition="f_user_name like '%{}%'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_address" class="font text-left">用户地址：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_address" class="search_input input-font" v-model="model.f_address" placeholder="请输入用户地址 (可模糊查询)" condition="f_address like '%{}%'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_residential_area" class="font text-left">小区名称：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_residential_area" class="search_input input-font" v-model="model.f_residential_area" placeholder="请输入小区名称 (可模糊查询)" condition="f_residential_area like '%{}%'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_seal_number" class="font text-left">表 封 号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_seal_number" class="search_input input-font" v-model="model.f_seal_number" placeholder="请输入表封号" condition="f_seal_number = '{}'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_phone" class="font text-left">电 话 号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_phone" class="search_input input-font" v-model="model.f_user_phone" placeholder="请输入电话号" condition="f_user_phone = '{}'"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../../assets/表号.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_card_id" class="font text-left">卡 号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_card_id" class="search_input input-font" v-model="model.f_card_id" placeholder="请输入卡号" condition="f_card_id = '{}'"/>
              </div>
            </div>

            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%; margin-right: 10px;" @click="search">查询</button>
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div class="auto app-text" @click="$parent.$parent.$parent.inspect(row)" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>用户编号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_userinfo_code }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>用户名称:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_user_name }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>表号:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_meternumber }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>用户类型:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font">{{ row.f_user_type }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>用户电话:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_user_phone }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font"><b>小区名称:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_residential_area }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="float: left"><b>用户地址:</b></p>
                  <p class="panel-title col-xs-7 text-left input-font" >{{ row.f_address }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>

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


export default {
  title: '黑名单管理',
  data () {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/SwitchValveSeachUser`, 5),
    }
  },
  ready () {

  },
  methods: {
    inspect(row){
      var pardate = {
        _this:this,
        tittle:'黑名单限制',
        safe:true
      }
      this.$dispatch('gotoson',pardate)
      this.$goto('block-user-details', {item: row}, 'self', this.reload)
    },
    reload(){
      console.log('--')
    }
  },
  components: {
  }
}
</script>
