<template>
  <PageWrapper dense fixedHeight contentFullHeight>
    <a-tabs v-model:activeKey="activeKey" @tab-click="handleTabClick">
      <a-tab-pane key="1" tab="单位换算">
        <ConversionConfig ref="configRef" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="单位换算配置">
        <ConversionList />
      </a-tab-pane>
    </a-tabs>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import ConversionList from './components/ConversionList.vue';
  import ConversionConfig from './components/ConversionConfig.vue';

  const activeKey = ref('1');
  const configRef = ref();
  const handleTabClick = (key) => {
    if (key === '1') configRef.value.getOptions();
  };
</script>
<style lang="less" scoped>
  :deep(.ant-tabs) {
    background: #fff;
    border-radius: 16px;
    height: 100%;

    .ant-tabs-nav {
      margin-bottom: 0;
      height: 50px;

      .ant-tabs-tab {
        padding: 18px 16px;

        & + .ant-tabs-tab {
          margin: 0;
        }
      }
    }
  }
</style>
