<template>
  <ScrollContainer>
    <PageWrapper dense contentFullHeight fixedHeight>
      <div ref="wrapperRef" class="account-setting">
        <div class="left-box">
          <div class="left-label">ERP厂商</div>
        </div>
        <Tabs tab-position="left" :tabBarStyle="tabBarStyle" class="h-full">
          <template v-for="item in settingList" :key="item.key">
            <TabPane :tab="item.name" class="h-full">
              <component :is="item.component" />
            </TabPane>
          </template>
        </Tabs>
      </div>
    </PageWrapper>
  </ScrollContainer>
</template>
<script lang="ts" setup>
  import { Tabs, TabPane } from 'ant-design-vue';
  import { ScrollContainer } from '/@/components/Container/index';
  import { PageWrapper } from '/@/components/Page';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { defineAsyncComponent } from 'vue';
  const kingdee = defineAsyncComponent(() => import('./components/kingdee.vue'));
  const yonyou = defineAsyncComponent(() => import('./components/yonyou.vue'));
  const dingjie = defineAsyncComponent(() => import('./components/dingjie.vue'));
  const sap = defineAsyncComponent(() => import('./components/sap.vue'));
  const oracleebs = defineAsyncComponent(() => import('./components/oracleebs.vue'));
  const dynamic365 = defineAsyncComponent(() => import('./components/dynamic365.vue'));
  const { t } = useI18n();
  const tabBarStyle = {
    width: '220px',
  };
  const settingList = [
    {
      key: '1',
      name: t('金蝶配置'),
      component: kingdee,
    },
    {
      key: '2',
      name: t('用友配置'),
      component: yonyou,
    },
    {
      key: '3',
      name: t('鼎捷配置'),
      component: dingjie,
    },
    {
      key: '4',
      name: t('SAP配置'),
      component: sap,
    },
    {
      key: '5',
      name: t('Oracle EBS配置'),
      component: oracleebs,
    },
    {
      key: '6',
      name: t('Dynamic365配置'),
      component: dynamic365,
    },
  ];
</script>
<style lang="less" scoped>
  .account-setting {
    height: 100%;
    background-color: @component-background;
    margin-right: 7px;

    .left-box {
      height: 50px;
      border: 1px solid #f0f0f0;
      width: 220px;
      line-height: 50px;
      margin-bottom: 10px;

      .left-label {
        margin-left: 20px;
      }
    }

    .base-title {
      padding-left: 0;
    }

    .ant-tabs-tab-active {
      background-color: @item-active-bg;
    }

    :deep(.ant-tabs-content-holder),
    :deep(.ant-tabs-content) {
      height: 100%;
    }
  }

  :deep(.ant-tabs-content) {
    overflow: auto;
  }
</style>
