<template>
	<div class="content-padding-inline" style="margin-top: 30px;">
		<a-row :gutter="[10,10]" type="flex" justify="center">
			<a-col span="18">
				<a-row  :gutter="20">
					<a-col span="4">
						<common-left-sider :menu_list="menu_list" :selected_key="[1]"
							@changeKey="changeKey"></common-left-sider>
					</a-col>
					<a-col span="20">
						<div style="width: 100%;background-color: #fff;height: calc(100vh - 100px); overflow: auto; padding: 10px;border-radius: 8px;">
							<user-expense v-if="curKey == 1"></user-expense>
							<user-password v-if="curKey == 2"></user-password>
							<user-email v-if="curKey == 3"></user-email>
							<user-conver v-if="curKey == 4"></user-conver>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import UserExpense from '@/components/user/expense/index.vue'
	import UserPassword from '@/components/user/password/index.vue'
	import UserEmail from '@/components/user/email/index.vue'
	import UserConver from '@/components/user/conver/index.vue'
	let companyList = ref<object[]>([{}, {}, {}, {}, {}, {}])
	let menu_list = ref([{ title: '费用管理', key: 1 },{ title: '修改登录密码', key: 2},{ title: '修改邮箱', key: 3},{ title: '生成招聘者代码', key: 4}])
	let curKey = ref<Number>(1)
	const changeKey = (data) => {
		curKey.value = data.key;
	}
</script>

<style>
</style>