<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>
    <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-input">
      <label class="col-xs-4 control-label text-left">开始时间</label>
      <datepicker
        :value.sync="model.f_start_date"
        placeholder='开始时间'
        :disabled-days-of-week="[]"
        :format="'yyyy-MM-dd'"
        :show-rest-button="reset"
        v-model="model.f_start_date">
      </datepicker>
    </div>
    <div class="row app-input">
      <label class="col-xs-4 control-label text-left">结束时间</label>
      <datepicker
        :value.sync="model.f_end_date"
        placeholder='结束时间'
        :disabled-days-of-week="[]"
        :format="'yyyy-MM-dd'"
        :show-rest-button="reset"
        v-model="model.f_end_date">
      </datepicker>
    </div>
    <div class="row app-btn" style="margin-bottom: -5px;">
      <button class="btn btn-primary col-xs-6" @click= "historinfo()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>查询</button>
    </div>
    <div v-for='row in user' class="app-list auto " @click= "checkhistory(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_number}}</span>
        <span class="col-xs-3">用户类型：</span><span class="col-xs-3">{{row.f_usertype}}</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 LocalPagedList from './LocalPagedList'
  import Vue from 'vue'
  import { PagedList } from 'vue-client'
  import * as Util from '../Util'

  export default {
    title: '安检历史查询',
    data() {
      return {
        model: {
          f_userid:'',
          f_user_name: '',
          f_meter_number: '',
          f_cardid: '',
          f_address: ''
        },
        user:[],
        showModal: false,
        param: null
      }
    },
    methods: {
      //头部事件回掉
      back () {
        this.$back()
      },
      // 跳到用户信息组件
      checkhistory(row) {
          this.$goto('query-check-history-item', {userinfo: row})
      },
      historinfo(){
          // 只能自己拼接输入条件
          let condition = '1=1'
          for (var key in this.model) {
            if (this.model[key] !== '') {
              if (key == 'f_start_date'){
                condition = condition + `and f_check_date >=  to_date('${this.model[key]}','yyyy-MM-dd')`
              } else if(key=='f_end_date'){
                condition = condition + ` and f_check_date <=  to_date('${this.model[key]}','yyyy-MM-dd')`
              } else
              condition  = condition + ` and ${key} like '%${this.model[key]}%'`
            }
          }
        this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/path/getUserinfomation`,{data:{condition:condition}})
            .then((res)=>{
              this.user = res.data
            })
            .catch(()=>{

            })
      }
    }
  }
</script>
<style>

</style>
