import { computed, defineComponent, ref } from 'vue';
import { IndexViewModel } from '@ibiz-template/model';
import { useNamespace } from '@ibiz-template/vue-util';
import { Namespace } from '@ibiz-template/core';
import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss';

function renderLogo(ns: Namespace, model: IndexViewModel) {
  return (
    <div class={[ns.e('logo'), model.source?.mainMenuAlign?.toLowerCase()]}>
      {model.appIconPath ? (
        <img class={ns.e('logo-img')} src={model.appIconPath}></img>
      ) : null}
      <div
        class={[
          ns.e('logo-caption'),
          model.source?.mainMenuAlign?.toLowerCase(),
        ]}
      >
        {model.caption}
      </div>
    </div>
  );
}

export const AppLayout = defineComponent({
  name: 'AppLayout',
  props: {
    model: {
      type: IndexViewModel,
      required: true,
    },
    // 视图是否完成加载
    isComplete: {
      type: Boolean,
      default: false,
    },
    // 是否显示分页导航
    isShowTabPageExp: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const ns = useNamespace('layout');

    // 菜单收缩变化
    const collapseChange = ref(false);

    const collapseMenus = () => {
      collapseChange.value = !collapseChange.value;
      emit('onCollapseChange', collapseChange.value);
    };

    const isBlank = computed(() => props.model.source.blankMode === true);

    return { ns, collapseChange, isBlank, collapseMenus };
  },
  render() {
    if (this.isComplete) {
      let content = null;
      if (this.model.source.mainMenuAlign === 'CENTER') {
        content = this.$slots.menu;
      } else {
        content = [
          <i-sider
            hide-trigger
            class={[
              this.ns.b('nav'),
              this.ns.is('collapse', this.collapseChange),
            ]}
            value={this.collapseChange}
            key='1'
          >
            {renderLogo(this.ns, this.model)}
            {this.$slots.menu}
          </i-sider>,
          <i-layout class={[this.ns.b('content')]} key='2'>
            <i-header class={this.ns.b('header')} key='3'>
              <div class={this.ns.be('header', 'left')}>
                {renderLogo(this.ns, this.model)}
                <div class={this.ns.be('header', 'collapse-icon')}>
                  {!this.collapseChange ? (
                    <ion-icon
                      src={'./assets/img/menu-fold.svg'}
                      on-click={() => this.collapseMenus()}
                    />
                  ) : (
                    <ion-icon
                      src={'./assets/img/menu-unfold.svg'}
                      on-click={() => this.collapseMenus()}
                    />
                  )}
                </div>
                {this.model.source.mainMenuAlign === 'TOP' ? (
                  <i-menu
                    class={this.ns.be('header', 'menu')}
                    mode='horizontal'
                    active-name='1'
                  ></i-menu>
                ) : null}
              </div>
              <div class={this.ns.be('header', 'right')}>
                <app-user />
              </div>
            </i-header>
            <i-content class={this.ns.be('content', 'main')} key='4'>
              {this.$slots.tabPageExp}
              {this.$slots.default}
            </i-content>
            {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */}
          </i-layout>,
        ];
      }
      return (
        <i-layout
          class={[
            this.ns.b(),
            this.isBlank ? this.ns.m('blank') : '',
            this.ns.is('collapse', this.collapseChange),
            this.ns.is('tab', this.isShowTabPageExp),
          ]}
        >
          {content}
        </i-layout>
      );
    }
    return null;
  },
});