<template>
  <!-- <div>通用查询Index</div> -->
  <div class="main-content main-content-padding" id="GeneralQueryIndex">
    <h-card class="list-tab-box margin-bottom">
      <h-tabs
        v-model:activeKey="tabData.activeKey"
        @tabClick="onTabClick"
        id="GeneralQueryIndex-queryTabs"
      >
        <!-- <h-tab-pane
          v-for="page in tabData.linkData?.pageLinkList"
          :key="page.pageName"
          :tab="page.locale ? t(page.locale) : page.name"
        ></h-tab-pane> -->
        <!--TODO: 先去掉多语言-->
        <h-tab-pane
          v-for="page in tabData.linkData?.pageLinkList"
          :key="page.pageName"
          :tab="page.name"
        ></h-tab-pane>
      </h-tabs>
    </h-card>

    <template v-if="tabData.activeKey.length > 0 && components[tabData.activeKey]">
      <component
        :is="components[tabData.activeKey]"
        :active-key="tabData.activeKey"
        :propsData="provideData"
      ></component>
    </template>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  computed,
  // provide,
  // defineAsyncComponent,
  // computed,
} from 'vue';
import {
  getInfo,
  ICP_CONFIG,
  getPageLinksData,
  registerComponents,
} from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods';
import { getPageLinksData, hasPermission } from '@/utils/hasPermissionUtil'; 
import { registerComponents } from '@/utils/componentUtils';
*/
import { commonApi } from '@remote/icpx-platform/commonApi';
/* import { commonApi } from '@/api/commonApi/index'; */
import components from './components/index';
import { getGeneralQueryData } from '@/api/platform/generalQuery';
import { message } from '@crami/ui';
import { useI18n } from '@crami/locale';

export default defineComponent({
  name: 'GeneralQueryIndex',

  setup() {
    const { t } = useI18n();
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });
    // tab栏相关
    const tabData = reactive({
      activeKey: '',
      items: [],
      linkData: {
        pageLinkList: [],
      },
    });
    const onTabClick = (activeKey: string) => {
      if (!provideData.value[activeKey]) {
        tabData.linkData &&
          tabData.linkData.pageLinkList.map(item => {
            if (item.pageName === activeKey) {
              const _params = {};
              item.paraList &&
                item.paraList.map(paraItem => {
                  _params[paraItem.name] = paraItem.value;
                });
              provideData.value[item.pageName] = _params;
            }
          });
      }
    };
    const flag = ref('true');
    onMounted(() => {
      setByProjectAndTypeFun();
      const modules = import.meta.glob('./components/*.vue');
      registerComponents(modules);
    });
    //获取treeViewName
    const setByProjectAndTypeFun = () => {
      getGeneralQueryData({
        ...commonApi().studioCache.getMetaInfo.params,
        ...{
          type: 'pageLinks',
          name: 'P_COMMON_QUERY_LINK', //commonParams.value?.ItemName,
        },
      }).then(res => {
        if (res.code === 200 && res.data && res.data.pageLinkList.length > 0) {
          tabData.linkData = getPageLinksData(res.data);
          if (
            tabData.linkData &&
            tabData.linkData?.pageLinkList &&
            tabData.linkData?.pageLinkList[0]
          ) {
            const pageLink = tabData.linkData.pageLinkList[0];
            tabData.activeKey = pageLink.pageName;
            const _params = {};
            pageLink.paraList &&
              pageLink.paraList.map(item => {
                _params[item.name] = item.value;
              });
            provideData.value[pageLink.pageName] = _params;
          }
        } else {
          message.warning(res.msg);
        }
      });
    };

    const provideData = ref({});
    // 获取当前页面组件，通过defineAsyncComponent的方式引入
    const getComponent = () => {
      if (tabData.activeKey && components[tabData.activeKey]) {
        const link = components[tabData.activeKey];
        return link;
      }
      return '';
    };
    return {
      t,
      tabData,
      flag,
      provideData,
      onTabClick,
      getComponent,
      components,
    };
  },
});
</script>
<style lang="less" scoped>
@import '@/theme/default/variables.less';

@import url('./index.less');
.tabBox {
  padding: 5px 24px 0 0 !important;
  background-color: #fff;
  border-radius: 6px;
  :deep(.ant-tabs-top > .ant-tabs-nav) {
    margin: 0 !important;
    .ant-tabs-tab-btn {
      font-size: 16px !important;
    }
  }

  // tab
  :deep(.ant-tabs-tab) {
    color: @text-color-secondary;
  }
  :deep(.ant-tabs-ink-bar) {
    background-color: @modal-formgroup-color;
    border-radius: 1px;
    border: none;
  }
  :deep(.ant-tabs-nav-list) {
    margin-left: 22px !important;
  }
}
</style>
