<template>
  <app-tabs ref="appTab" :tab-list="tabList" class="flex-1 overflow-h">
    <template #tabPane="{ item }">
      <component :is="item.name" :ref="item.name" :provider-row="providerRow" @onTableClick="onTableClick" />
    </template>
  </app-tabs>
</template>

<script>
import Provider from './Provider';

import Resource from './Resource';

export default {
  components: { Provider, Resource },
  data() {
    return {
      // ...TABLE_CONFIG, // table相关
      activeName: 'Provider',
      providerRow: null,
      tabList: [
        { label: '数据提供方', name: 'Provider' },
        { label: '数据资源项', name: 'Resource' },
      ],
    };
  },
  computed: {
    currentConfig() {
      return '';
      // return this[this.configName]
    },
  },
  mounted() {},
  methods: {
    onTableClick(row, action) {
      if (action === 'dataSource') {
        this.$refs.appTab.setActive('Resource');
        this.providerRow = row;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.com {
  transition: opacity 0.3s;
}

.leave {
  opacity: 0;
}
</style>
