<template>
  <div>
    <TwoColumnPage>
      <template #left>
        <SampleLeftList ref="leftModal" :id="id" @on-result-change="_leftResult"></SampleLeftList>
      </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 SampleLeftList from './SampleLeftList'
import SampleRightList from './SampleRightList'

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