<template>
  <div id="unit" class="flex-row">
    <div :class="{'basic-main':!isEdit,'binary-left':isEdit}" :style="{width: messlist==='mess' ? '50%' : '100%'}">
      <bill-list v-show="!viewDetail" @select-changed="selected" v-ref:list></bill-list>
      <bill-detail v-if="viewDetail" :data="row"></bill-detail>
    </div>

    <div class="binary-right" v-if="isEdit" style="width: 40%;" :style="{width: messlist==='mess' ? '50%' : '100%'}">
      <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.$refs.list.$refs.paged.$refs.grid.selectStore.selected = null
        this.isEdit = false
        this.viewDetail = true
        this.row = val
      },
      'back' () {
        this.$refs.list.$refs.paged.$refs.grid.selectStore.selected = null
        this.viewDetail = !this.viewDetail
      },
      'success' () {
        this.isEdit = false
        this.viewDetail = false
        this.row = null
        this.$refs.list.search()
      },
      'refresh' () {
        this.$refs.list.$refs.paged.$refs.grid.selectStore.selected = null
        this.isEdit = false
        this.viewDetail = false
        this.row = null
      }
    }

  }
</script>
