<template>
  <div class="col-sm-12 binary" >
    <div class="col-sm-6 binary-left" style="overflow-y: auto;width: 35%">
      <user-base-info :row="row" @refresh="search"  @cancel-main="cancel" ></user-base-info>
    </div>
    <div class="col-sm-6 binary-right" style="padding-right:25px;padding-left: 20px;width: 65%">
      <saletabbut  v-if="row" v-ref:list :active="-1">
        <saletab header="流水查询" v-if="permission('流水查询')">
          <record-query-user :row="row" v-if="show == '流水查询'" @deal-msg="dealMsg"></record-query-user>
        </saletab>
        <saletab header="收费查询" v-if="permission('收费查询')">
          <charge-query-user  :row="row" v-if="show == '收费查询'" @deal-msg="dealMsg"></charge-query-user>
        </saletab>
        <saletab header="补气查询" v-if="permission('补气查询')">
          <fill-gas-query-user  :row="row" v-if="show == '补气查询'" @deal-msg="dealMsg"></fill-gas-query-user>
        </saletab>
        <saletab header="换表查询" v-if="permission('换表查询')">
          <change-meter-query-user  :row="row" v-if="show == '换表查询'" @deal-msg="dealMsg"></change-meter-query-user>
        </saletab>
        <saletab header="其他收费" v-if="permission('其他收费')">
          <other-charge-query-user  :row="row" v-if="show == '其他收费'" @deal-msg="dealMsg"></other-charge-query-user>
        </saletab>
        <saletab header="过户查询" v-if="permission('过户查询')">
          <transfer-query-user  :row="row" v-if="show == '过户查询'" @deal-msg="dealMsg"></transfer-query-user>
        </saletab>
        <saletab header="价格调整" v-if="permission('价格调整')">
          <price-change-query-user  :row="row" v-if="show == '价格调整'" @deal-msg="dealMsg"></price-change-query-user>
        </saletab>
        <saletab header="附件查看" v-if="permission('附件查看')">
          <upload-file-history :row="row" v-if="show == '附件查看'" @deal-msg="dealMsg"></upload-file-history>
        </saletab>
        <saletab header="补卡查询" v-if="row.f_meter_type.includes('卡表')&&permission('补卡查询')">
          <fill-card-query-user :row="row" v-if="show == '补卡查询'" @deal-msg="dealMsg"></fill-card-query-user>
        </saletab>
        <saletab header="抄表记录" v-if="row.f_meter_type.includes('卡表')&&permission('抄表记录')">
          <card-hand-record :row="row" v-if="show == '抄表记录'" @deal-msg="dealMsg"></card-hand-record>
        </saletab>
        <saletab header="抄表结算" v-if="!row.f_meter_type.includes('卡表')&&permission('抄表结算')">
          <hand-query-user  :row="row" v-if="show == '抄表结算'" @deal-msg="dealMsg"></hand-query-user>
        </saletab>
        <saletab header="变更记录" v-if="permission('变更记录')">
          <change-record  :row="row" v-if="show == '变更记录'" @deal-msg="dealMsg"></change-record>
        </saletab>
        <saletab header="指令查看" v-if="row.f_meter_type.includes('物联网表')&&permission('指令查看')">
          <query-instruct  :row="row" v-if="show == '指令查看'" @deal-msg="dealMsg"></query-instruct>
        </saletab>
        <tab header="异常报警" v-if="row.f_meter_type.includes('物联网表')&&permission('异常报警')">
          <watch-warning  :row="row" v-if="show == '异常报警'" @deal-msg="dealMsg"></watch-warning>
        </tab>
        <saletab header="表具采集" v-if="row.f_meter_type.includes('物联网表')&&permission('表具采集')">
          <watch-collection  :row="row" v-if="show == '表具采集'" @deal-msg="dealMsg"></watch-collection>
        </saletab>

      </saletabbut>
    </div>
  </div>
</template>

<script>
  import {HttpResetClass} from 'vue-client'
  // 导入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 CardHandRecord from './ic_detail/CardHandRecord'

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

export default {
    title: '用户详细信息',
    props: ['f_userinfo_id'],
    components: {
      PriceChangeQueryUser,
      ChangeMeterQueryUser,
      ChargeQueryUser,
      ChargeRecordQueryUser,
      FillCardQueryUser,
      FillGasQueryUser,
      HandQueryUser,
      OtherChargeQueryUser,
      RecordQueryUser,
      TransferQueryUser,
      WatchWarning,
      WatchCollection,
      QueryInstruct,
      ChangeRecord,
      CardHandRecord
    },
    data () {
      return {
        row: null,
        name: '收费查询',
        show: ''
      }
    },
    ready () {
      this.search()
    },
    methods: {
      permission (name) {
        if (this.$login.r.find(value => value == '收费综合查询')) {
          if (!this.$login.r.find(value => value == name)) {
            return false
          }
        }
        return true
      },
      async search () {
        let http = new HttpResetClass()

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

        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_userinfo_id' () {
        this.search()
      }
    }
  }
</script>
