<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div class="account-setting">
      <div class="left-box">
        <div class="left-label">账号类型</div>
      </div>
      <ScrollContainer viewClass="h-full" style="height: calc(100% - 72px)">
        <Tabs 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>
      </ScrollContainer>
    </div>
  </PageWrapper>
</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 Email = defineAsyncComponent(() => import('./components/Email.vue'));
  const Sms = defineAsyncComponent(() => import('./components/Sms.vue'));
  const WeCom = defineAsyncComponent(() => import('./components/WeCom.vue'));
  const DingTalk = defineAsyncComponent(() => import('./components/DingTalk.vue'));
  const WebHook = defineAsyncComponent(() => import('./components/WebHook.vue'));
  const WeChat = defineAsyncComponent(() => import('./components/WeChat.vue'));
  const { t } = useI18n();

  const settingList = [
    {
      key: '1',
      name: t('邮箱配置'),
      component: Email,
    },
    {
      key: '2',
      name: t('短信配置'),
      component: Sms,
    },
    {
      key: '3',
      name: t('企业微信配置'),
      component: WeCom,
    },
    {
      key: '4',
      name: t('钉钉配置'),
      component: DingTalk,
    },
    {
      key: '5',
      name: t('WebHook配置'),
      component: WebHook,
    },
    {
      key: '6',
      name: t('微信公众号配置'),
      component: WeChat,
    },
  ];
</script>
<style lang="less" scoped>
  .account-setting {
    height: 100%;
    background-color: @component-background;
    border-radius: 16px;

    .left-box {
      border-bottom: 1px solid #ddd;
      padding: 16px;
      margin-bottom: 8px;

      .left-label {
        color: @primary-color;
        border-left: 4px solid @primary-color;
        padding-left: 12px;
        font-weight: bold;
        line-height: 17px;
      }
    }

    :deep(.ant-tabs-top) {
      > .ant-tabs-nav {
        padding: 0 16px;

        &::before {
          border-bottom: 1px solid #ddd;
        }
      }

      .ant-tabs-content-holder {
        overflow: auto;
      }
    }
  }
</style>
