//// Tabs.jsx
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Tabs',
  props: {
    defaultActiveKey: {
      type: String,
      default: ''
    }
  },
  emits: ['change'],
  setup(props, context) {
    const children = context.slots.default()
    const titles = children.map((panel) => {
      const { key, title } = panel.props || {}
      return {
        key,
        title
      }
    })

    const actKey = ref(props.defaultActiveKey)
    const changeActKey = (key) => {
      actKey.value = key
      context.emit('change', key)
    }

    const render = () => (
      <>
        <ul class="nav nav-tabs">
          {titles.map((item) => {
            const { key, title } = item
            return (
              <li class="nav-item">
                <button
                  key={key}
                  onClick={() => changeActKey(key)}
                  class="nav-link"
                  class={{ active: actKey.value === key }}
                >
                  {title}
                </button>
              </li>
            )
          })}
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade show active">
            {children.find((panel) => {
              const { key } = panel.props || {}
              return actKey.value === key
            })}
          </div>
        </div>
      </>
    )

    return render
  }
})

//// TabPanel.vue
<template>
  <slot></slot>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  }
})
</script>

//// 使用组件（写死 tab-panel 可以）
<script setup>
import Tabs from '@/components/Tab/Tabs.jsx'
import TabPanel from '@/components/Tab/TabPanel.vue'

const onTabsChange = (key) => {
  console.log('tab changed', key)
}
</script>

<template>
  <tabs default-active-key="1" @change="onTabsChange">
    <tab-panel key="1" title="tab1">
      <div>This is tab1 content...</div>
    </tab-panel>
    <tab-panel key="2" title="tab2">
      <div>This is tab2 content...</div>
    </tab-panel>
  </tabs>
</template>

//// 使用组件（v-for tab-panel 不行）
<script setup>
import Tabs from '@/components/Tab/Tabs.jsx'
import TabPanel from '@/components/Tab/TabPanel.vue'
import { ref } from 'vue'

const data = ref([
  {
    title: 'tab1',
    description: 'This is tab1 content...'
  },
  {
    title: 'tab2',
    description: 'This is tab2 content...'
  }
])

const onTabsChange = (key) => {
  console.log('tab changed', key)
}
</script>

<template>
  <tabs default-active-key="1" @change="onTabsChange">
    <tab-panel v-for="(item, k) in data" :key="k" :title="item.title">
      <div>{{ item.description }}</div>
    </tab-panel>
  </tabs>
</template>