<template>
  <div style="overflow-x: hidden;">
    <div v-if='old'>
      <p class="bg-info text-center" style="padding: 8px;">旧表信息</p>
      <div class="row auto">
        <machine-meter v-if=" row && (row.f_meter_type === '机表' || row.f_meter_type === '远传表')"
                       :row='row' :message='message'></machine-meter>
        <gas-card-meter v-if="row && (row.f_meter_type == '气量卡表')" :row='row' :message='message'></gas-card-meter>
        <amount-card-meter v-if="row && (row.f_meter_type == '金额卡表')" :row='row' :message='message'></amount-card-meter>
        <iot-meter v-if="row && (row.f_meter_type == '物联网表')" :row='row' :message='message'></iot-meter>
      </div>
      <div class="row" v-if='message' style="height: 150px; width: 90%; margin-left:5%">
        <div class="alert alert-warning">
          <a href="#" class="close" data-dismiss="alert" @click="closePrompt()">&times;</a>
          <strong>提示！</strong>{{msg}}
        </div>
      </div>
    </div>
    <ul class="nav nav-tabs"  v-if="new" >
      <li role="presentation" class="active"><a href="#">新表信息</a></li>
    </ul>
    <change-new-meter v-if="new" :row='row'></change-new-meter>
  </div>
</template>
<script>
/**
 *换表管理
 *组合界面，加载机表，物联网表，气量卡表，金额卡表旧表信息，以及控制显示换新表信息
 */

export default {
  title: '换表登记',
  data () {
    return {
      new: false,
      old: true,
      message: false,
      msg: null
    }
  },
  props: ['row'],
  ready () {
    console.log('看下换表父组件的row内容：', this.row)
  },
  methods: {
    closePrompt () {
      this.$dispatch('refresh')
    }
  },
  events: {
    'firstsuccess' (type, data) {
      if (type === 'nohand') {
        this.old = false
        this.new = true
        // this.$dispatch('success', '换表管理', data)
      } else if (type === 'hand') {
        // if (data.errorType === 'hand') {
        //   this.message = false
        //   this.message2 = true
        // } else {
        //   this.message = true
        //   this.message2 = false
        // }
        this.message = true
        if (data.errorType === 'owe') {
          this.msg = '该表有欠费,请转到缴费进行清欠'
        } else if (data.errorType === 'hasowe') {
          this.msg = '该表已产生欠费'
        } else if (data.errorType === 'hand') {
          this.msg = '该表有未抄表,请转到抄表管理界面进行抄表'
        } else if (data.errorType === 'iot') {
          this.msg = '该表结算已产生欠费,请转到缴费界面进行缴费'
        } else if (data.errorType === 'split') {
          this.msg = '该表下面有未抄的分表信息,请先对分表进行抄录,才能换表！'
        } else if (data.errorType === 'exceeduse') {
          this.msg = '该表用量已超出'
        }
        this.$dispatch('refreshrow', data)
      }
    }
  }
}
</script>
