<template>
  <a-card
    style="width: 100%"
    :tab-list="tabListNoTitle"
    :active-tab-key="noTitleKey"
    @tabChange="key => onTabChange(key, 'noTitleKey')"
    :body-style="{ padding: 50 }"
    :head-style="{ textAlign: 'center' }"
  >
    <div v-if="noTitleKey === 'model1'" style="margin: 10px auto;width:50%">
      <a-card title="" :bordered="false">
          <RiskModeBaseForm></RiskModeBaseForm>
      </a-card>
    </div>
    <div v-else-if="noTitleKey === 'model2'" style="margin: 10px auto;width:60%;">
      <a-card title="" :bordered="true">
        <RiskModeMiddleForm></RiskModeMiddleForm>
      </a-card>
    </div>
    <div v-else style="margin: 10px auto;width:50%">
      <a-card title="" :bordered="false">
        <RiskModeHighForm></RiskModeHighForm>
      </a-card>
    </div>
  </a-card>
</template>
<script lang="ts" setup>

import { ref,reactive } from 'vue';
import RiskModeBaseForm from "./components/RiskModeBaseForm.vue"
import RiskModeMiddleForm from "./components/RiskModeMiddleForm.vue"
import RiskModeHighForm from "./components/RiskModeHighForm.vue"
const tabListNoTitle = [
  {
    key: 'model1',
    tab: '基本指标法',
  },
  {
    key: 'model2',
    tab: '标准法',
  },
  {
    key: 'model3',
    tab: '高级计量法',
  },
];
const key = ref('tab1');
const noTitleKey = ref('model1');

const onTabChange = (value: string, type: string) => {
  console.log(value, type);
  if (type === 'key') {
    key.value = value;
  } else if (type === 'noTitleKey') {
    noTitleKey.value = value;
  }
};

</script>
<style scoped>
/* 使用深度选择器来修改 Ant Design 卡片标签栏的样式 */
:deep(.ant-card-head) {
display: flex;
justify-content: center;
}

:deep(.ant-tabs-nav) {
margin: 0 auto !important;
}

:deep(.ant-tabs-nav-wrap) {
display: flex;
justify-content: center;
}

:deep(.ant-tabs-tab) {
margin: 0 8px !important;
}
</style>