<template>
  <div id="unit" class="flex-row">
    <div :class="{'basic-main':!meterShow,'binary-left':meterShow}">
      <meter-list @select-changed="selected" v-ref:arealist   :style="style" :f_filialeids.sync="f_filialeids" :refresh="refresh"></meter-list>
    </div>
    <div v-if="meterShow" style="width: 60%" class="binary-right">
      <div class="flex">
        <meter-msg v-ref:addareamsg :bookinfo="bookinfo"></meter-msg>
      </div>
    </div>
    <div v-if="addShow" style="width: 60%" class="binary-right">
      <div class="flex">
        <add-meter-book v-ref:addareamsg :changeinfo="changeinfo" :dowhat="dowhat"></add-meter-book>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    title: '抄表册管理',
    components: {
    },
    data () {
      return {
        // 分公司id串
        width: '100%',
        f_filialeids: this.$login.f.f_orgids,
        meterShow: false,
        addShow: false,
        bookinfo: {},
        style: 'col-sm-2 ',
        changeinfo: {},
        dowhat: '',
        refresh: 1
      }
    },
    ready () {

    },
    props: {

    },
    methods: {
      selected (obj) {
        this.style = 'col-sm-3 '
        this.bookinfo = obj.val
        this.dowhat = 'add'
        this.meterShow = true
        this.addShow = false
      },
      refresh () {
        this.meterShow = false
      }
    },
    events: {

    }
  }
</script>

