<template>
  <div>
    <TwoColumnPage>
      <template slot="left">
        <ItemLeftList ref="leftModal" :rightSelectData =rightSelectData  @on-result-change="_leftResult"></ItemLeftList>
      </template>
      <template slot="right">
        <ItemRightList ref="rightModal" @child-data="_rightSelectData" @on-result-change="_rightResult"></ItemRightList>
      </template>
    </TwoColumnPage>
  </div>
</template>

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

export default {
  components: {
    TwoColumnPage,
    ItemLeftList,
    ItemRightList
  },
  data() {
    return {
      id: '',
      rightSelectData: []
    }
  },
  methods: {
    _leftResult(data) {
      console.log('ItemTabs', data)
      this.$refs.rightModal._open(this.id, data)
    },
    _rightResult() {
      this.$refs.leftModal._page()
    },
    _rightSelectData(data) {
      this.rightSelectData = []
      if (data.length > 0) {
        const rightSelectId = []
        for (let i = 0; i < data.length; i++) {
          rightSelectId.push(data[i].id)
        }
        this.rightSelectData = rightSelectId
      }
    },
    _open(id) {
      this.id = id
      this.$refs.leftModal._open(this.id)
      // this.$refs.rightModal._getColumn()
    },
    _clearTable() {
      this.$refs.rightModal._clearAll()
    }
  }
}
</script>
