<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;" v-show="!show">
      <div class="auto repair-info-content compatible">
        <div class="row">
          <div class="col-xs-3 col-sm-3 col-md-3 form-input-group mg8">
            <input type="text" class="form-control" v-model="model.f_userid"  placeholder='用户ID'>
          </div>
          <div class="col-xs-3 col-sm-3 col-md-3 form-input-group mg8">
            <input type="text" class="form-control" v-model="model.f_username"  placeholder='姓名'>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 form-input-group mg8">
            <input type="text" class="form-control" v-model="model.f_address"  placeholder='地址'>
          </div>
          <div class="col-xs-2 col-sm-2 col-md-2  form-input-group mg8">
            <button type="button" name="button" class="btn btn-primary" @click="search()">查询</button>
          </div>
        </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>
        </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() {
        this.model.f_userid ? this.model.f_userid : '1=1'
        let condition = `f_orgstr like '%${Vue.user.f_orgids}%'`
        condition += this.model.f_userid ? ` and f_userinfo_code = '${this.model.f_userid}'` : ' and 1=1'
        condition += this.model.f_username ? ` and f_user_name like '%${this.model.f_username}%'` : ' and 1=1'
        condition += this.model.f_address ? ` and f_address like '%${this.model.f_address}%'` : ' and 1=1'
        console.log(condition)
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/sql/tel_UserInfo`, {
          data: {
            condition:condition
          }
        }).then((res) => {
          console.log("查找用户返回的结果")
          console.log(res.data)
          this.users = res.data
        })
      },
      selectUser(row){
        this.user = row
        this.show = true
      },
      back(){
        this.show = false
      }
    },
    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>
