<template>
  <div ref="wrapperRef" :class="prefixCls">
    <Tabs
      tab-position="left"
      :tabBarStyle="tabBarStyle"
      v-model:activeKey="componentCode"
      @change="changeKey"
    >
      <template v-for="item in settingList" :key="item.key">
        <TabPane :tab="item.name">
          <div :style="'display: flex; height:' + data.height">
            <component :is="tabs[item.component]" />
          </div>
        </TabPane>
      </template>
    </Tabs>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { Tabs } from 'ant-design-vue';
  import { ScrollContainer } from '@/components/Container';
  import { settingList } from './data';
  import { useRoute } from 'vue-router';
  import {
    CreateFlow,
    UncompletedTask,
    CompletedTask,
    MyTask,
    ReadTask,
    MyDraft,
    DelegateTask,
  } from './page';

  const route = useRoute();
  let componentCode = ref('');
  componentCode.value = route.query.component;
  const TabPane = Tabs.TabPane;
  const tabs = {
    CreateFlow,
    UncompletedTask,
    CompletedTask,
    MyTask,
    ReadTask,
    MyDraft,
    DelegateTask,
  };
  const data = reactive({
    height: document.documentElement.clientHeight - 104.5 + 'px;',
  });

  const prefixCls = 'account-setting';
  const tabBarStyle = {
    width: '220px',
  };
  function changeKey(e) {
    componentCode.value = e;
  }
</script>
<style lang="less" scoped>
  .account-setting {
    margin: 12px;
    background-color: @component-background;

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

    .ant-tabs-tab-active {
      background-color: @item-active-bg;
    }
  }
</style>
