<script lang="tsx">
  import { h } from 'vue'
  import JeeMenu from './JeepayMenu.vue'
  import { MenuItem } from 'ant-design-vue'

// 将 v-if= false的过滤掉 
function filterFunc(item){
    return (typeof item.type) != 'symbol' // v-if =false type = symbol , 否则为 object 
}

  export default {
    setup(props, { slots, attrs, emit }) {

        // 20220415 @terrfly修改， 解决不动态渲染的问题：
        // 查询所有可显示的 插槽元素，  注意： filterSlots 不可以在页面渲染使用， 仅仅作为判断使用
        // 注意！！ ：：   页面渲染只有直接使用slots.default() 才可以动态改变， 例如修改状态更新下拉按钮效果 ，  如果定义变量， 则不会动态渲染。 
        const filterSlots = slots.default().filter(filterFunc)


        if (filterSlots.length <= 2) { // 小于等于三个直接渲染
          return () => h(
            'div',
            { style: 'display:flex; justify-content: space-evenly;' },
            slots.default().filter(filterFunc) // 子节点数组
          )

        } else { // 下拉效果 
          
          return () => (
            <div>
               { [slots.default().filter(filterFunc)[0]] }
                <JeeMenu>
                {
                  slots.default().filter(filterFunc).filter((r, index) => index >= 1).map(item => {
                    return <MenuItem>{item}</MenuItem>
                  })
                }
                </JeeMenu>
              </div>
            ) 
        }
    }
  }
</script>