<template>
  <!--  <div class="app-botton" @click="back()" v-if="show">-->
  <!--    <span class="glyphicon glyphicon-menu-left">返回</span>-->
  <!--  </div>-->
  <div class="select-overspread auto" style="padding-bottom:5px;">
    <div class="auto repair-info-content compatible">
      <div class="row" style="display: flex;align-items: center">
        <div class="col-xs-3 col-sm-3 col-md-3 form-input-group">
          模糊查询:
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 form-input-group mg8">
          <input type="text" class="form-control" v-model="model.f_userinfo"  placeholder='模糊查询'>
        </div>
      </div>
      <div class="row" style="display: flex;align-items: center">
        <div class="col-xs-3 col-sm-3 col-md-3 form-input-group">
          用户编号:
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 form-input-group mg8">
          <input type="text" class="form-control" v-model="model.f_userid"  placeholder='用户编号'>
        </div>
      </div>
      <div class="row" style="display: flex;align-items: center">
        <div class="col-xs-3 col-sm-3 col-md-3 form-input-group">
          用户姓名:
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 form-input-group mg8">
          <input type="text" class="form-control" v-model="model.f_username"  placeholder='用户姓名'>
        </div>
      </div>
      <div class="row" style="display: flex;align-items: center">
        <div class="col-xs-3 col-sm-3 col-md-3 form-input-group">
          用户地址:
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 form-input-group mg8">
          <input type="text" class="form-control" v-model="model.f_address"  placeholder='用户地址'>
        </div>
      </div>
      <div class="row" style="text-align: center;margin-top: 30px;margin-bottom: 30px" >
        <button style="width: 70%" type="button" name="button" class="btn btn-primary" @click="search()">查询</button>
        <!--            <button type="button" name="button" class="btn btn-primary pull-right" @click="read()">读卡</button>-->
      </div>
    </div>
    <div partial class="panel panel-default well" style="padding: 0px;background-color:#ffffff;" v-for="row in users">
      <div class="panel-body inbg" @click="selectUser(row)">
        <div class="row auto"  >
          <div class="col-sm-4">
            用户编号: {{row.f_userinfo_code}}
          </div>
          <div class="col-sm-4">
            用户姓名: {{row.f_user_name}}
          </div>
          <div class="col-sm-4">
            用户电话: {{row.f_user_phone}}
          </div>
          <div class="col-sm-3">
            用户类别: {{row.f_user_type}}
          </div>
          <div class="col-sm-9">
            地址信息: {{row.f_address}}
          </div>
          <div class="col-sm-6">
            表底数: {{row.f_meter_base}}
          </div>
          <div class="col-sm-6">
            表上余额: {{row.f_balance_amount}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  <phone-info-table  :user="user" :is-need-condition="false" :is-group="false" v-if="show"></phone-info-table>-->
</template>

<script>
import Vue from 'vue'
import { HttpResetClass } from 'vue-client'
export default {
  title: '移动端用户信息查询',
  props: {

  },
  data () {
    return {
      users:[],
      model:{
        f_userid:'',
        f_username:'',
        f_address:''
      },
      user:'',
      show:false
    }
  },
  methods: {
    search() {
      // console.log("Vue.user",Vue.user)
      this.model.f_userid ? this.model.f_userid : '1=1'
      let condition = `ti.f_orgid = '${Vue.user.orgid}'`
      condition += this.model.f_userid ? ` and ti.f_userinfo_code = '${this.model.f_userid}'` : ' and 1=1'
      condition += this.model.f_username ? ` and ti.f_user_name like '%${this.model.f_username}%'` : ' and 1=1'
      condition += this.model.f_address ? ` and tua.f_address like '%${this.model.f_address}%'` : ' and 1=1'
      if (this.model.f_userinfo){
        condition += ` and (
        ti.f_userinfo_code like '%${this.model.f_userinfo}%'
        or ti.f_user_name like '%${this.model.f_userinfo}%'
        or ti.f_user_phone like '%${this.model.f_userinfo}%'
        or f_meternumber like '%${this.model.f_userinfo}%'
        or tua.f_address like '%${this.model.f_userinfo}%'
        or ti.f_rent_phone like '${this.model.f_userinfo}'
        or ti.f_zuhu_phone like '${this.model.f_userinfo}'
        )`
      }
      console.log(condition)
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_UserInfo`, {
        data: {
          condition:condition
        }
      },{rejectMsg:null,resolveMsg:null}).then((res) => {
        console.log("查找用户返回的结果")
        console.log(res.data)
        this.users = res.data
      })
    },
    selectUser(row){
      this.user = row
      var prpdata = {
        _this:this,
        title:"用户信息",
        safe:false
      }
      this.$dispatch('gotoson',prpdata)
      this.$goto('info-table',{user:row,},'self')
    },
    back(){
      this.show = false
    },
    read(){
      // 读卡
      let res =  HostApp.read()
      if(res.code == 200){
        let cardid = res.msg.CardID
        let condition1 = `tf.f_card_id = '${cardid}'`
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_UserInfo`, {
          data: {
            condition:condition1
          }
        }).then((res) => {
          console.log("查找用户返回的结果")
          console.log(res.data)
          this.users = res.data
        })
      }else{
        HostApp.alert('读卡异常，请检查读卡设备!')
      }
    }
  },
  ready(){
  }
}
</script>
<style>
.app-botton {
  position:fixed;
  background: #87b2dd;
  color: #FFF;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  z-index: 10;
  opacity:0.5;
  bottom: 50px;
  margin-top: -10px;
  height: 40px;
}
</style>
