<template>
  <div id="unit" class="flex-row">
    <div class="binary-left" style="width: 44%">
      <tabset v-ref:tabs :close="false" v-if="row.f_meter_type === '物联网表'" style="height: 100%;overflow-y: scroll">
        <meter-msg  :watchdata="userdata" :watchmsg="row" :meternumberf="row.f_meternumber"  @cancel-main="cancel"></meter-msg>
      </tabset>
      <tabset v-ref:tabs :close="false" v-else>
        <meter-msg-meter  :row="row"  @cancel-main="cancel"></meter-msg-meter>
      </tabset>
    </div>
    <div class="binary-right" style="width: 54%">
      <tabset v-ref:tabs :close="false" v-if="row.f_meter_type === '物联网表'" style="float: top">
        <tab header="指令信息">
          <query-instruct :searchobj="row" :meternumberf="row.f_meternumber"  @select="selected"></query-instruct>
        </tab>
        <tab header="报警">
          <watch-warning :searchobj="row" :meternumberf="row.f_meternumber"></watch-warning>
        </tab>
        <tab header="采集">
          <watch-collection :isdeal="false" :searchobj="row" :meternumberf="row.f_meternumber" ></watch-collection>
        </tab>
        <tab header="费用">
          <watch-cost :searchobj="row" :meternumberf="row.f_meternumber" ></watch-cost>
        </tab>
        <tab header="充值">
          <watch-recharge :searchobj="row"  :meternumberf="row.f_meternumber"></watch-recharge>
        </tab>
        <!--<tab header="标记信息">
          <meter-userparameter-msg :searchobj="row"  :meternumberf="row.f_meternumber"></meter-userparameter-msg>
        </tab>-->
      </tabset>
      <tabset v-ref:tabs :close="false" v-else>
        <div v-if="row.f_meter_type.includes('卡表')">
          <tab header="流水查询" >
            <meter-record-query  :searchdata="row" v-if="$refs.tabs.active === 0"></meter-record-query>
          </tab>
          <tab header="收费查询" >
            <meter-charge-query  :searchdata="row" v-if="$refs.tabs.active === 1"></meter-charge-query>
          </tab>
          <tab header="补卡查询">
            <meter-fill-card-query :searchdata="row" v-if="$refs.tabs.active === 2"></meter-fill-card-query>
          </tab>
          <tab header="补气查询">
            <meter-fill-gas-query :searchdata="row" v-if="$refs.tabs.active === 3"></meter-fill-gas-query>
          </tab>
          <!--<tab header="冲正查询">-->
            <!--<meter-reversal-query  :searchdata="row" v-if="$refs.tabs.active === 4"></meter-reversal-query>-->
          <!--</tab>-->
          <tab header="换表查询">
            <meter-change-meter-query :searchdata="row" v-if="$refs.tabs.active === 4"></meter-change-meter-query>
          </tab>

          <tab header="其他收费">
            <meter-other-charge-query :searchdata="row" v-if="$refs.tabs.active === 5"></meter-other-charge-query>
          </tab>
          <tab header="过户查询">
            <meter-transfer-query :searchdata="row" v-if="$refs.tabs.active === 6"></meter-transfer-query>
          </tab>
        </div>

        <div  style="float: top" v-else>
          <tab header="抄表查询">
            <meter-hand-query :searchdata="row" v-if="$refs.tabs.active === 0"></meter-hand-query>
          </tab>
<!--          <tab header="冲正查询">-->
<!--            <meter-reversal-query  :searchdata="row" v-if="$refs.tabs.active === 1"></meter-reversal-query>-->
<!--          </tab>-->
          <tab header="换表查询">
            <meter-change-meter-query :searchdata="row" v-if="$refs.tabs.active === 1"></meter-change-meter-query>
          </tab>

          <tab header="其他收费">
            <meter-other-charge-query :searchdata="row" v-if="$refs.tabs.active === 2"></meter-other-charge-query>
          </tab>
          <tab header="过户查询">
            <meter-transfer-query :searchdata="row" v-if="$refs.tabs.active === 3"></meter-transfer-query>
          </tab>
        </div>
      </tabset>
    </div>
  </div>
</template>

<script>
  import WatchWaring from './WatchWarning'
  import { HttpResetClass } from 'vue-client'

  let getnumber = function * (self) {
    let condition = `uf.f_meternumber='${self.row.f_meternumber}'`
    let load = new HttpResetClass()
    load.load('POST', 'rs/sql/iot_getBaseInfo',
      {data: {condition: condition}},
      {resolveMsg: null, rejectMsg: null}).then((res) => {
        self.userdata = res.data[0]
      })
  }
  export default {
    components: {WatchWaring},
    title: '物联网表',
    props: ['row'],
    data () {
      return {
        // 开关阀需要使用
        userdata: {}
      }
    },
    methods: {
      search () {
        getnumber(this)
      },
      cancel (val) {
        this.$emit('cancel-main', val)
      }
    },
    ready () {
      this.search()
    },
    watch: {
      'row' () {
        this.search()
      }
    }
  }
</script>
