<script>
import { Tabs } from 'ant-design-vue'
export default {
  name: 'SdWebflowTabs',
  functional: true,
  inheritAttrs: false,
  render(createElement, context) {
    const children = []
    context.children
      // 去掉不显示的tab页
      .filter((tab) => context.props.removedTabs.indexOf(tab.key) === -1)
      .forEach((tab) => {
        // 把key暴露到DOM结构上
        if (tab?.data?.key) {
          tab.data.attrs = tab.data.attrs || {}
          tab.data.attrs['data-key'] = tab.data.key
        }

        // 把每个tab插入到合适的位置
        const after = tab.data?.attrs?.['sd-after']
        if (after) {
          const referIndex = children.findIndex((tab2) => tab2.key === after)
          if (referIndex !== -1) {
            children.splice(referIndex + 1, 0, tab)
            return
          }
        } else {
          const before = tab.data?.attrs?.['sd-before']
          if (before) {
            const referIndex2 = children.findIndex((tab2) => tab2.key === before)
            if (referIndex2 !== -1) {
              children.splice(referIndex2, 0, tab)
              return
            }
          }
        }
        // 没找到该插入的位置，放到最后
        children.push(tab)
      })
    return [createElement(Tabs, context.data, children)]
  },
}
</script>
