<template>
  <div class="write-content">
    <div class="write-part">
      <AmortizeList ref="amortize" :rpFlag="rpFlag" @writeOffBack="amortizeWriteOffBack" @change="amortizeChange" @query="amortizeQuery" @complete="amortizeComplete"/>
    </div>
    <div class="write-part" style="margin-left: 12px;">
      <CashList ref="cash" :rpFlag="rpFlag" :writeOffAble="true" :extraQuery="cashExtraQuery" @change="cashChange" @writeOff="cashWriteOff" @writeOffBack="cashWriteOffBack" @complete="cashComplete"/>
    </div>
  </div>
</template>

<script>
import AmortizeList from './modules/AmortizeList.vue'
import CashList from './modules/CashList.vue'

export default {
  name: 'Writeoff',
  components: {
    AmortizeList,
    CashList
  },
  props: {
    // 0应收 1应付
    rpFlag: {
      type: String,
      default: '0',
    }
  },
  data() {
    return {
      amortizeList: [],
      cashList: [],
      cashExtraQuery: null,
    }
  },
  methods: {
    // 费用列表选中变化
    amortizeChange(val) {
      this.amortizeList = val;
    },
    // 账单列表选中变化
    cashChange(val) {
      this.cashList = val;
    },
    // 账单列表点击核销
    cashWriteOff(val) {

    },
    // 费用列表点击反核销
    amortizeWriteOffBack(val) {

    },
    // 账单列表点击反核销
    cashWriteOffBack(val) {

    },
    amortizeQuery(params) {
      this.cashExtraQuery = params;
      this.$nextTick(() => {
        this.$refs.cash.getList();
      })
    },
    // 费用列表核销完成
    amortizeComplete() {
      this.$refs.cash.getList();
    },
    // 账单列表核销完成
    cashComplete() {
      this.$refs.amortize.getList();
    }
  }
}
</script>
<style scoped>
  .write-content {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
  }

  .write-part {
    flex: 1;
    width: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

</style>
