<template>
  <div class="app-bg auto">
    <tools-page :need-back='true' title="安检计划"  @back="back()"></tools-page>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">用户编号</label>
        <input class="col-xs-8" v-model="model.f_userid" placeholder="请输入用户编号">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">用户姓名</label>
        <input class="col-xs-8" v-model="model.f_username" placeholder="请输入用户姓名">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">表号</label>
          <input class="col-xs-8" v-model="model.f_meter_no" placeholder="请输入表编号">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">卡号</label>
        <input class="col-xs-6" v-model="model.f_cardid" placeholder="请输入用户卡号">
        <div class="input-group col-xs-2">
          <span class="input-group-btn">
            <button class="btn btn-default " type="button" @click="readCard">读卡</button>
          </span>
        </div>
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">地址</label>
        <input class="col-xs-8" v-model="model.f_address" placeholder="请输入用户地址（可模糊查询）">
      </div>
      <div class="row app-btn" style="margin-bottom: -5px;">
        <button class="btn btn-primary col-xs-6" @click= "planinfomation()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>查询</button>
      </div>

    <div v-for='row in user' class="app-list auto " @click= "checkplan(row)">
      <div class="row" style="color: #00B9F1;">
        <span class="col-xs-3">户号：</span><span class="col-xs-3">{{row.f_userid}}</span>
        <span class="col-xs-3">姓名：</span><span class="col-xs-3">{{row.f_username}}</span>
      </div>
      <div class="row">
        <span class="col-xs-3">表号：</span><span class="col-xs-3">{{row.f_meter_no}}</span>
        <span class="col-xs-3">用户类型：</span><span class="col-xs-3">{{row.f_user_type}}</span>
      </div>
      <div class="row">
        <span class="col-xs-3">地址：</span><span class="col-xs-8">{{row.f_address}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'

export default {
  title:'抄表用户信息',
  data () {
    return {
      model: {
        f_userid:'',
        f_username: '',
        f_meter_no: '',
        f_cardid: '',
        f_address: ''
      },
      //拿到的用户
      user: [],
      context: '',
      // 未上传成功的数据
      result: []
    }
  },
  methods: {
    // 读取卡号
    readCard () {
      let card = this.$androidUtil.read()
      this.model.f_cardid = card.msg.CardID
    },
    //头部事件回掉
    back () {
      this.$back()
    },
    //根据条件拿到用户
    planinfomation () {
      // 只能自己拼接输入条件
      let condition = '1=1'
      for (var key in this.model) {
        if (this.model[key] !== '') {
          condition  = condition + ` and ${key} like '%${this.model[key]}%'`
        }
      }
      let url = `${this.$androidUtil.getProxyUrl()}/rs/sql/singleTable`
      this.$resetpost(url,
        {data: {tablename: 't_userfiles',condition: condition}},
        { resolveMsg: null, rejectMsg: null }
      ).then((back) => {
        this.user = back.data
      }).catch((reason) => {
        this.$showMessage(`没有该用户，请在营业厅核查, 原因: ${reason}`)
      })
    },
    checkplan(row) {
      this.$goto("tableset",{user:row})
    }
  }
}
</script>
<style>

</style>
