import { IModal, ViewMode } from '@ibiz-template/runtime';
import {
  defineComponent,
  PropType,
  h,
  ref,
  Ref,
  toRef,
  getCurrentInstance,
  VNode,
} from 'vue';
import qs from 'qs';
import {
  useListExpViewController,
  useRoute,
  useRouteKey,
} from '@ibiz-template/vue-util';

export const ListExpView = defineComponent({
  name: 'ListExpView',
  props: {
    context: Object as PropType<IContext>,
    params: { type: Object as PropType<IParams> },
    srfnav: String,
    modelPath: { type: String, required: true },
    modal: { type: Object as PropType<IModal> },
    noLoadDefault: { type: Boolean, required: false },
  },
  setup(props) {
    const { proxy } = getCurrentInstance()!;
    const c = useListExpViewController(proxy, props.modelPath);
    const routeViewKey: Ref<string> = ref('');
    const defaultSelectKeys: Ref<string[]> = ref([]);

    if (c.context.isRouter === true) {
      const route = useRoute(proxy);

      // 第一次设置key是由自身通知，后续走监听
      c.nerve.self.evt.on('created', () => {
        // 解析首页上下文参数里的主键
        if (route.params.params1) {
          const params1Str = route.params.params1 as string;
          const params1Obj = qs.parse(params1Str, { delimiter: ';' });
          const key = params1Obj[c.model.appEntity.deName] as string;
          if (key) {
            c.navItem.key = key;
            defaultSelectKeys.value = [key];
          }
        }
        // 监听并变更routeViewKey
        useRouteKey(toRef(c.navItem, 'key'), proxy, routeViewKey);
      });
    }

    return { c, defaultSelectKeys, routeViewKey };
  },
  render() {
    const isRouter = this.c.context.isRouter === true;
    let listComponent: VNode | null = null;
    let expBarModel = null;
    if (this.c.complete) {
      const { listExpBar } = this.c.model;
      const { list } = listExpBar;
      expBarModel = listExpBar;
      if (this.c.providers[list.name]) {
        listComponent = h(this.c.providers[list.name].component, {
          props: {
            modelData: list,
            context: this.c.context,
            params: this.c.params,
            isExpView: true,
            isSelectFirstDefault: true,
            mdCtrlActiveMode: 1,
            defaultSelectKeys: this.defaultSelectKeys,
          },
          on: {
            neuronInit: this.c.nerve.onNeuronInit(list.name),
          },
        });
      }
    }
    return (
      <exp-view-base
        controller={this.c}
        expBarModel={expBarModel}
        scopedSlots={{
          default: () => listComponent,
          expView: () => {
            if (this.c.complete) {
              const { listExpBar } = this.c.model;
              const { list } = listExpBar;
              if (!list.navView) {
                return null;
              }
              if (isRouter) {
                if (this.routeViewKey) {
                  return <router-view key={this.routeViewKey}></router-view>;
                }
                return null;
              }
              // 非路由模式下绘制嵌入视图
              return h('ViewShell', {
                attrs: {
                  context: this.c.navItem.context,
                  params: this.c.navItem.params,
                  modal: { mode: ViewMode.EMBED },
                  modelPath: list.navView.source.modelPath,
                },
                key: this.c.navItem.key,
              });
            }
          },
        }}
      ></exp-view-base>
    );
  },
});
