<template>
  <div class="col-sm-12" style="height: 100%">
      <div class="col-sm-5" style="overflow-y: scroll;padding-right:20px;">
        <tabset v-ref:tabs :close="false">
          <meter-msg :f_userinfo_id="f_userinfo_id" style="width: 98%"></meter-msg>
        </tabset>
      </div>
    <div class="col-sm-7" style="padding-right:10px;height: 90%;">
      <criteria partial='criteria' v-ref:criteria  @condition-changed='search'>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="form-group form-input-group" >
            <label class="control-label" style="word-break:keep-all;">查询时间</label>
            <datepicker placeholder="起始时间"
                        :value.sync="model.f_start_date"
                        width="200px"
                        v-model="model.f_start_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"

            ></datepicker>
            <div style="line-height: 2">&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;</div>
            <datepicker placeholder="结束时间"
                        :value.sync="model.f_end_date"
                        width="200px"
                        v-model="model.f_end_date"
                        :format="'yyyy-MM-dd HH:mm:ss'"
            ></datepicker>
            <div class="form-group form-input-group">
              <button  class="btn btn-success "  @click="search()" v-el:cba>查询</button>
              &nbsp;
              <button class="btn btn-success "  @click="$parent.$parent.cancel()" >返回</button>
            </div>
          </div>
        </div>
      </criteria>
      <tabset v-ref:tabs :close="false">
        <tab header="收费查询" >
          <meter-charge-query  :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 0"></meter-charge-query>
        </tab>
        <tab header="换表查询">
          <meter-change-meter-query :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 1"></meter-change-meter-query>
        </tab>
        <tab header="抄表查询">
          <meter-hand-query :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 2"></meter-hand-query>
        </tab>
<!--        <tab header="冲正查询">-->
<!--          <meter-reversal-query  :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 3"></meter-reversal-query>-->
<!--        </tab>-->
        <tab header="过户查询">
          <meter-transfer-query :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 3"></meter-transfer-query>
        </tab>
        <tab header="其他收费">
          <meter-other-charge-query :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 4"></meter-other-charge-query>
        </tab>
        <tab header="补卡查询">
          <meter-fill-card-query :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 5"></meter-fill-card-query>
        </tab>
        <tab header="补气查询">
          <meter-fill-gas-query :f_userinfo_id="f_userinfo_id" :args="args" v-if="$refs.tabs.active === 6"></meter-fill-gas-query>
        </tab>
      </tabset>
    </div>
    </div>
</template>

<script>
  import ChargeQuery from './ChargeQuery'
  import OtherChargeQuery from './OtherChargeQuery'
  import HandQuery from './HandQuery'
  import ReversalQuery from './ReversalQuery'

  export default {
    title: '机表',
    components: {
      ChargeQuery,
      OtherChargeQuery,
      HandQuery,
      ReversalQuery
    },
    props:
      {
        row:'',
        isdeal:{},
        f_start_date:'',
        f_end_date:''
      },
    data() {
      return {
        args:null,
        f_userinfo_id: this.row.f_userinfo_id,
        condition: '',
        rowdata: {},
      }
    },
    methods: {
      search (args) {
        this.args = args
      },
    },
    ready () {
      this.$refs.criteria.model.f_start_date = this.f_start_date
      this.$refs.criteria.model.f_end_date = this.f_end_date
      this.$refs.criteria.search()
    },
    watch: {
    }
  }
</script>
