/*
 * @Description:
 * @Version: 2.0
 * @Autor: mayako
 * @Date: 2020-02-04 10:00:12
 * @LastEditors  : gezuxia
 * @LastEditTime : 2020-02-14 17:36:36
 */
export default {
  name: 'DaoSettingLayout',
  componentName: 'DaoSettingLayout',
  functional: true,
  render(h, context) {
    const slots = context.slots();
    // title slot name
    const layoutTitleSlot = slots['layout-title'];
    const layoutTitleHelperSlot = slots['layout-title-helper'];
    const defaultSlot = slots.default;
    const footerSlot = slots.footer;
    // help 判断是否有slot 添加div：help的内容
    const LayoutTitleHelper = layoutTitleHelperSlot
      ? h('div', { class: 'helper-text' }, [
        layoutTitleHelperSlot
      ]) : '';
    // title
    const LayoutTitle = layoutTitleSlot
      ? h('div', { class: 'dao-setting-layout-title' }, [
        h('div', { class: 'dao-setting-title' }, [
          layoutTitleSlot,
          LayoutTitleHelper
        ])
      ]) : '';

    const Footer = footerSlot
      ? h('div', { class: 'dao-setting-layout-footer' }, [
        footerSlot
      ]) : '';

    let staticClass = 'dao-setting-layout';

    if (context.data.staticClass) {
      staticClass += ` ${context.data.staticClass}`;
    }

    // 大的div cla
    return h('div', {
      ...context.data,
      // 此处不用 `class: 'dao-setting-layout'` 的原因为：
      // dao-setting-layout 这个类会覆盖外部传入的动态绑定 class
      // 导致在组件外部传入 :class="['testClass']" 类似用法会失效
      staticClass
    }, [
      LayoutTitle, defaultSlot, Footer
    ]);
  }
};
