<template>
  <div class="flex-row auto">
    <div class="flex" style="width: 10%">
      <div v-for="val in details">
        <button class="btn btn-info" @click="buttonControl(val)">{{val}}</button>
      </div>
    </div>
    <div style="width: 100%;overflow: auto">
      <!--抄表信息-->
      <sell-oper :data="data" v-if="sell"></sell-oper>
      <!--换表信息-->
      <hand-oper :data="data" v-if="hand"></hand-oper>
      <!--换表信息-->
      <exchange :data="data" v-if="exchange"></exchange>
      <!--其他收费信息-->
      <other-charge :data="data" v-if="othercharge"></other-charge>
      <!--补卡信息-->
      <replace-card :data="data" v-if="replacecard"></replace-card>
      <!--变更信息-->
      <change-message :data="data" v-if="changemessage"></change-message>
      <!--操作信息-->
      <handle-message :data="data" v-if="handlemessage"></handle-message>
      <!--过户信息-->
      <transfer-message :data="data" v-if="transfermessage"></transfer-message>
    </div>
  </div>
</template>

<script>
  import SellOper from './oper/SellOper'
  import HandOper from './oper/HandOper'
  import Exchange from './oper/ExchangeOper'
  import OtherCharge from './oper/OtherCharge'
  import ReplaceCard from './oper/ReplaceCard'
  import ChangeMessage from './oper/ChangeMessage'
  import HandleMessage from './oper/HandleMessage'
  import TransferMessage from './oper/TransferMessage'

  export default {
    title: '用户基本信息',
    components: {
      SellOper, HandOper, Exchange, OtherCharge, ReplaceCard, ChangeMessage, HandleMessage, TransferMessage
    },
    data () {
      return {
        details: ['收费明细', '抄表明细', '换表信息', '其他收费', '补卡信息', '变更信息', '操作信息', '过户信息'],
        sell: false,
        hand: false,
        exchange: false,
        othercharge: false,
        replacecard: false,
        changemessage: false,
        handlemessage: false,
        transfermessage: false
       // data: this.data
      }
    },
    props: ['data'],
    ready () {
      this.buttonControl('收费明细')
    },
    methods: {
      buttonControl (val) {
        this.sell = val === '收费明细'
        this.hand = val === '抄表明细'
        this.exchange = val === '换表信息'
        this.othercharge = val === '其他收费'
        this.replacecard = val === '补卡信息'
        this.changemessage = val === '变更信息'
        this.handlemessage = val === '操作信息'
        this.transfermessage = val === '过户信息'
      }
    }
  }

</script>
