<template>
  <div class="col-sm-12" >
    <div class="col-sm-6" style="overflow-y: scroll;width: 40%">
      <user-base-info :row="row"  @cancel-main="cancel"></user-base-info>

    </div>
    <div class="col-sm-6" style="padding-right:25px;padding-left: 20px;width: 60%">
      <tabset  v-if="row" :close="false" v-ref:tabs>
        <tab header="流水查询" v-if="true">
          <record-query-user :row="row" v-if="$refs.tabs.active === 0"></record-query-user>
        </tab>
        <tab header="收费查询" v-if="true">
          <charge-query-user  :row="row" v-if="$refs.tabs.active === 1"></charge-query-user>
        </tab>
        <tab header="补气查询" v-if="true">
          <fill-gas-query-user :row="row" v-if="$refs.tabs.active === 2"></fill-gas-query-user>
        </tab>
        <tab header="换表查询" v-if="true">
          <change-meter-query-user :row="row" v-if="$refs.tabs.active === 3"></change-meter-query-user>
        </tab>
        <tab header="其他收费" v-if="true">
          <other-charge-query-user :row="row" v-if="$refs.tabs.active === 4"></other-charge-query-user>
        </tab>
        <tab header="过户查询" v-if="true">
          <transfer-query-user :row="row" v-if="$refs.tabs.active === 5"></transfer-query-user>
        </tab>
        <tab header="补卡查询" v-if="row.f_meter_type.includes('卡表')">
          <fill-card-query-user :row="row" v-if="$refs.tabs.active === 6"></fill-card-query-user>
        </tab>
        <tab header="指令查看" v-if="row.f_meter_type.includes('物联网表')">
          <query-instruct :row="row"  @select="selected" v-if="$refs.tabs.active === 6"></query-instruct>
        </tab>
        <tab header="异常报警" v-if="row.f_meter_type.includes('物联网表')">
          <watch-warning :row="row" v-if="$refs.tabs.active === 7"></watch-warning>
        </tab>
        <tab header="表具采集" v-if="row.f_meter_type.includes('物联网表')">
          <watch-collection :row="row" v-if="$refs.tabs.active === 8"></watch-collection>
        </tab>
        <tab header="抄表结算" v-if="!row.f_meter_type.includes('卡表')">
          <hand-query-user :row="row" v-if="$refs.tabs.active === 9"></hand-query-user>
        </tab>
      </tabset>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  import UserBaseInfo from './UserBaseInfo'
  // 导入IC卡相关查询界面
  import ChangeMeterQueryUser from './ic_detail/ChangeMeterQueryUser'
  import ChargeQueryUser from './ic_detail/ChargeQueryUser'
  import ChargeRecordQueryUser from './ic_detail/ChargeRecordQuery'
  import FillCardQueryUser from './ic_detail/FillCardQueryUser'
  import FillGasQueryUser from './ic_detail/FillGasQueryUser'
  import HandQueryUser from './ic_detail/HandQueryUser'
  import OtherChargeQueryUser from './ic_detail/OtherChargeQueryUser'
  import RecordQueryUser from './ic_detail/RecordQueryUser'
  import TransferQueryUser from './ic_detail/TransferQueryUser'

  // 导入物联网相关查询
  import QueryInstruct from './iot_detail/QueryInstruct'
  import WatchCollection from './iot_detail/WatchCollection'
  import WatchWarning from './iot_detail/WatchWarning'

  export default {
    title: '用户详细信息',
    props: ['f_userid'],
    components: {
      UserBaseInfo,ChangeMeterQueryUser,ChargeQueryUser,ChargeRecordQueryUser,FillCardQueryUser,FillGasQueryUser,
      HandQueryUser,OtherChargeQueryUser,RecordQueryUser,TransferQueryUser,WatchWarning,WatchCollection,QueryInstruct
    },
    data () {
      return {
        row: null,
        name: '收费查询'
      }
    },
    ready(){
      this.search()
    },
    methods: {
      async search () {
        let http = new HttpResetClass()

        let condition = `f_userid = '${this.f_userid}'`

        let getBaseInfo = await http.load('POST','rs/sql/iot_getUserBaseData',
          {data: {condition: condition}}, {resolveMsg: null, rejectMsg: '获取基本信息出错'})
        this.row = getBaseInfo.data[0]
      },

      cancel(val) {
        this.$emit('cancel-main', val)
      },

      butOper (val) {
        this.name = val
      }
    },
    watch: {
      'f_userid' () {
        this.search()
      }
    }
  }
</script>

