import { useNamespace } from '@ibiz-template/vue-util';
import { computed, defineComponent, PropType, ref, watch } from 'vue';
import './exp-view-base.scss';
import { IExpBarModel } from '@ibiz-template/model';
import { ListExpViewController } from '@ibiz-template/controller';

export const ExpViewBase = defineComponent({
  name: 'ExpViewBase',
  props: {
    controller: {
      type: Object as PropType<ListExpViewController>,
      required: true,
    },
    expBarModel: {
      type: Object as PropType<IExpBarModel>,
    },
  },
  setup(props) {
    const ns = useNamespace('exp-view');

    const cssVars = ref({});

    watch(
      () => props.expBarModel?.width,
      (newVal, oldVal) => {
        if (newVal !== oldVal && newVal) {
          cssVars.value = ns.cssVarBlock({
            'left-width': `${newVal}px`,
          });
        }
      },
    );

    // 是否显示头部
    const isShowHeader = computed(() => {
      return (
        props.expBarModel?.showTitleBar ||
        props.expBarModel?.enableSearch ||
        props.controller.model.toolbar
      );
    });

    return { ns, cssVars, isShowHeader };
  },
  render() {
    const c = this.controller;

    // 外面的插槽同样传给view-layout
    const inheritSlots: IData = {};
    Object.keys(this.$scopedSlots).forEach(key => {
      inheritSlots[key] = (arg: IData) => this.$scopedSlots[key]!(arg);
    });
    return (
      <div class={[this.ns.b()]} style={this.cssVars}>
        <div class={[this.ns.b('left')]}>
          <view-layout
            class={[
              c.complete && this.ns.b(this.controller.model.typeClass),
              c.complete && this.ns.m(this.controller.model.modelClass),
            ]}
            isComplete={c.complete}
            modelData={c.model}
            viewMode={c.modal.mode}
            isLoading={c.viewLoading.isLoading}
            scopedSlots={{
              caption: () => {
                return (
                  <div class={this.ns.b('caption')}>
                    {c.complete && c.model.source.getPSSysImage() ? (
                      [
                        <app-icon
                          class={this.ns.be('caption', 'icon')}
                          icon={c.model.source.getPSSysImage()}
                        ></app-icon>,
                        <span
                          class={this.ns.be('caption', 'text')}
                          title={c.caption}
                        >
                          {c.caption}
                        </span>,
                      ]
                    ) : (
                      <span
                        class={this.ns.be('caption', 'text')}
                        title={c.caption}
                      >
                        {c.caption}
                      </span>
                    )}
                  </div>
                );
              },
              ...inheritSlots,
              default: () => {
                return (
                  <div
                    class={[
                      this.ns.b('exp-bar'),
                      this.ns.is('no-header', !this.isShowHeader),
                    ]}
                  >
                    <div class={this.ns.b('exp-bar-header')}>
                      <div class={this.ns.b('exp-bar-header-left')}>
                        <div
                          class={this.ns.be('exp-bar-header-left', 'caption')}
                        >
                          {this.expBarModel?.showTitleBar &&
                            (this.expBarModel?.getPSSysImage ? (
                              [
                                <app-icon
                                  class={this.ns.be('caption', 'icon')}
                                  icon={this.expBarModel?.getPSSysImage}
                                ></app-icon>,
                                <span
                                  class={this.ns.be('caption', 'text')}
                                  title={this.expBarModel?.title}
                                >
                                  {this.expBarModel?.title}
                                </span>,
                              ]
                            ) : (
                              <span
                                class={this.ns.be('caption', 'text')}
                                title={this.expBarModel?.title}
                              >
                                {this.expBarModel?.title}
                              </span>
                            ))}
                        </div>
                      </div>
                      <div class={this.ns.b('exp-bar-header-right')}>
                        <div class={this.ns.e('quick-search')}>
                          {c.complete && this.expBarModel?.enableSearch && (
                            <quick-search
                              value={c.query}
                              viewMode={c.modal.mode}
                              placeholder={c.model.placeholder}
                              onUpdate={(val: string) => {
                                c.query = val;
                              }}
                              onSearch={() => c.onSearch()}
                            ></quick-search>
                          )}
                        </div>
                        <div class={this.ns.e('toolbar')}>
                          {c.complete && c.model.toolbar && (
                            <view-toolbar
                              modelData={c.model.toolbar}
                              on-neuronInit={c.nerve.onNeuronInit(
                                c.model.toolbar.source.name,
                              )}
                              toolbarState={c.toolbarState}
                              viewMode={c.modal.mode}
                            ></view-toolbar>
                          )}
                        </div>
                      </div>
                    </div>
                    <div class={this.ns.b('exp-bar-content')}>
                      {inheritSlots.default && inheritSlots.default()}
                    </div>
                  </div>
                );
              },
            }}
          ></view-layout>
        </div>
        <div class={[this.ns.b('right')]}>
          {this.$scopedSlots.expView && this.$scopedSlots.expView({})}
        </div>
      </div>
    );
  },
});