/**
 * pro-layout
 * @author niewei
*/
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner';
import ProLayoutContentSearch from 'mars-pro/packages/pro-layout-content-search';
import ProFullHeight from 'mars-pro/packages/pro-full-height'
import ProResizeObserver from 'mars-pro/packages/pro-resize-observer'
import ProAffix from 'mars-pro/packages/pro-affix'
import ProCollapseTransition from 'mars-pro/packages/pro-collapse-transition' 
import ProScrollActive from 'mars-pro/packages/pro-scroll-active'



import omit from 'mars-pro/src/pro/omit';
export default {
  name: 'ProLayout',

  componentName: 'ProLayout',

  components: {
    ProLayoutContaner,
    ProLayoutContentSearch,
    ProFullHeight,
    ProResizeObserver,
    ProAffix,
    ProCollapseTransition,
    ProScrollActive
  },
  
  props: {
    uiType: {
      type: String,
      default: 'contaner'
    }
  },
  computed: {},
  methods: {
    renderSlots(){
      const slots = omit(this.$slots || {}, ['default'])
      return Object.keys(slots).map(item => (
          <template slot={item}>{ slots[item] }</template>
      ))
    },
    renderLayout(type){
      const layoutDatas = {
        props: this.$attrs,
        attrs: this.$attrs,
        on: this.$listeners,
        'class': {
          'pro-layout': true
        },
        scopedSlots: this.$scopedSlots,
      }

      if(type === 'search'){
        return <ProLayoutContentSearch {...layoutDatas}/>
      }else if(type === 'height'){
        return <ProFullHeight {...layoutDatas}>{this.renderSlots()}</ProFullHeight>
      }else if(type === 'resize'){
        return <ProResizeObserver {...layoutDatas}></ProResizeObserver>
      }else if(type === 'affix'){
        return <ProAffix {...layoutDatas}>{this.renderSlots()}</ProAffix>
      }else if(type === 'transition'){
        return <ProCollapseTransition {...layoutDatas}>{this.renderSlots()}</ProCollapseTransition>
      }else if(type === 'active'){
        return <ProScrollActive {...layoutDatas}>{this.renderSlots()}</ProScrollActive>
      }else{
        return <ProLayoutContaner {...layoutDatas}>{this.renderSlots()}</ProLayoutContaner>
      }
    }
  },
  render() {
    const _formItemDatas = {
      props: {
        ...this.$attrs,
      },
      attrs: {
        ...this.$attrs,
      },
      on: this.$listeners
    }
    return this.renderLayout(this.uiType)
  }
}