<template>
  <div id="unit" class="flex-row">
    <div style="flex: 1;">
      <bill-list v-if="!viewDetail" @select-changed="selected"  v-ref:list ></bill-list>
      <bill-detail v-if="viewDetail" :data="row"></bill-detail>
    </div>

    <div class="flex" v-if="isEdit" style="width: 40%;">
      <add-bill :data="row"></add-bill>
      <div style="overflow: hidden">
        <bill-change-detail v-if="row.id" :bill_id="row.id"></bill-change-detail>
      </div>
    </div>

  </div>
</template>

<script>

import BillList from './BillList'
import BillDetail from './BillDetail'
import AddBill from './AddBill'
import BillChangeDetail from "./BillChangeDetail";

export default  {
  title: '发票管理',
  components: {
    BillChangeDetail,
    BillList, BillDetail, AddBill
  },
  data () {
    return {
      row: null,
      isEdit: false,
      viewDetail: false,
    }
  },

  methods: {
    selected (row) {
      this.isEdit = true
      this.viewDetail = false
      this.row = row.val
    }
  },

  events: {
    'add' () {
      this.isEdit = true
      this.viewDetail = false
      this.row = null
    },
    'view' (val) {
      this.isEdit = false
      this.viewDetail = true
      this.row = val
    },
    'back' () {
      this.viewDetail = !this.viewDetail
    },
    'success' () {
      this.isEdit = false
      this.viewDetail = false
      this.row = null
      this.$refs.list.search()
    },
    'refresh' () {
      this.isEdit = false
      this.viewDetail = false
      this.row = null
    }
  }

}

</script>
