<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>
					<a-col span="4">
						<common-left-sider :menu_list="menu_list" :selected_key="[1]" @changeKey="changeKey" @click="clickMenu"></common-left-sider>
					</a-col>
					<a-col span="20">
						<div  style="width: 100%;background-color: #fff;padding: 10px;">
							<company-basic v-if="curKey == 1"></company-basic>
							<company-department v-if="curKey == 2"></company-department>
							<company-licence v-if="curKey == 3"></company-licence>
							<company-image v-if="curKey == 4"></company-image>
						</div>
					</a-col>
				</a-row>
			</a-col>
		</a-row>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import CompanyBasic from '@/components/company/basic/index.vue'
	import CompanyDepartment from '@/components/company/department/index.vue'
	import CompanyLicence from '@/components/company/licence/index.vue'
	import CompanyImage from '@/components/company/image/index.vue'
	import { store } from '@/store';
	import { useMenu } from '@/hooks/useMenu';
	let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu();
	let companyList = ref<object[]>([{}, {}, {}, {}, {}, {}])
	let menu_list = ref([{name: '基本资料',key: 1},{name: '部门管理',key: 2},{name: '上传营业执照',key: 3},{name: '上传企业图片',key: 4},{name: '资料预览',key:5}])
	let curKey = ref<Number>(1)
	const changeKey = (data) => {
		curKey.value = data.key;
	}
	
	const clickMenu = (val) => {
		if(val.key === 5) {
			store.commit('getPageType', {
				pageType: ''
			})
			sessionStorage.setItem('pageType', '')
			store.commit('permissions/SET_PERMISSION', null)
			store.commit('permissions/SET_MENU', [])
			onMenu('/personal')
		}
	}
	
</script>

<style>
</style>