<template>
  <div>
    <p slot="header" style="font-size: 14px;color: #1c2438;font-weight: 700;line-height: 20px;">
      采购单耗材详情列表
    </p>
    <TwoColumnPage>
      <template slot="left">
        <ItemLeftList ref="leftModal" @on-result-change="_leftResult" />
      </template>
      <template slot="right">
        <ItemRightList ref="rightModal" @on-result-change="_rightResult" />
      </template>
    </TwoColumnPage>
  </div>
</template>

<script>
import TwoColumnPage from '../../../../components/base/TwoSameColumnPage'
import ItemLeftList from './ItemLeftList'
import ItemRightList from './ItemRightList'

export default {
  components: {
    TwoColumnPage,
    ItemLeftList,
    ItemRightList
  },
  data() {
    return {
      purchaseId: ''
    }
  },
  methods: {
    _leftResult(data) {
      this.$refs.rightModal._open(data, this.purchaseId)
    },
    _rightResult() {
      this.$refs.leftModal._page()
    },
    _open(data) {
      if (data !== undefined && data.id !== undefined) {
        this.purchaseId = data.id
      }
      this.$refs.leftModal._page(data)
      this.$refs.rightModal._init()
    },

    _clearPage() {
      this.$refs.leftModal._page()
    }
  }
}
</script>
