<template>
  <div>
    <TwoColumnPage>
      <template #left>
        <ItemLeftList ref="itemleftModal" :id="id" @on-result-change="_leftResult"></ItemLeftList>
      </template>
      <template #right>
<!--        <NoData v-if="!currentComponent" msg="请选中左侧数据后，查看此界面信息"/>-->
        <!-- eslint-disable-next-line vue/require-component-is -->
        <component ref="refModal" :is="currentComponent" @on-result-change="_rightResult"></component>
      </template>
    </TwoColumnPage>
  </div>
</template>

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

export default {
  components: {
    ItemLeftList,
    TwoColumnPage,
    // eslint-disable-next-line vue/no-unused-components
    ItemRightList
    // NoData
  },
  props: {
    id: null
  },
  data() {
    return {
      currentComponent: 'ItemRightList',
      switchStatusData: this.id
    }
  },
  computed: {
    switchStatus: function() {
      return this.status // 直接监听props里的status状态
    }
  },
  methods: {
    _leftResult(data) {
      this.currentComponent = 'ItemRightList'
      this.$refs.refModal._open(data.join(','))
    },
    _rightResult() {
      this.$refs.itemleftModal._page()
    }
  }
}
</script>
