<template>
  <ResizePageWrapper dense contentFullHeight fixed-height contentClass="flex">
    <template #resizeLeft>
      <BasicTree
        :title="t('同步类型')"
        :clickRowToExpand="true"
        :treeData="settingList"
        :selectedKeys="[selectId]"
        :fieldNames="{ key: 'key', title: 'name' }"
        @select="handleSelect"
      />
    </template>
    <template #resizeRight>
      <ScrollContainer class="account-setting">
        <component :is="settingList[selectId].component" :image="settingList[selectId].image" />
      </ScrollContainer>
    </template>
  </ResizePageWrapper>
</template>
<script lang="ts" setup>
  import { ScrollContainer } from '/@/components/Container/index';
  import { ResizePageWrapper } from '/@/components/Page';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { defineAsyncComponent, ref } from 'vue';
  import flowSyncPng from '/@/assets/sync/flowSync.png';
  import formSyncPng from '/@/assets/sync/formSync.png';
  import apiSyncPng from '/@/assets/sync/apiSync.png';
  import { BasicTree } from '/@/components/Tree';
  const partSync = defineAsyncComponent(() => import('./components/partSync.vue'));
  const allSync = defineAsyncComponent(() => import('./components/allSync.vue'));
  const SyncCommon = defineAsyncComponent(() => import('./components/SyncCommon.vue'));

  const { t } = useI18n();
  const selectId = ref(0);
  const settingList = [
    {
      key: 0,
      name: t('基础数据增量同步'),
      component: partSync,
    },
    {
      key: 1,
      name: t('基础数据全量同步'),
      component: allSync,
    },
    {
      key: 2,
      name: t('流程同步'),
      component: SyncCommon,
      image: flowSyncPng,
    },
    {
      key: 3,
      name: t('表单同步'),
      component: SyncCommon,
      image: formSyncPng,
    },
    {
      key: 4,
      name: t('接口同步'),
      component: SyncCommon,
      image: apiSyncPng,
    },
  ];
  function handleSelect(selectIds) {
    selectId.value = selectIds[0];
  }
</script>
<style lang="less" scoped>
  :deep(.vben-tree-header) {
    padding: 0 16px;
  }

  .account-setting {
    height: 100%;
    background-color: @component-background;
    border-radius: 16px;
    padding: 16px;

    .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) {
    height: calc(100% - 60px);
  }

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