<template>
	<ContentWrap v-loading="formLoading" style="overflow-y: auto;" class="ContentWrap">
		<div class="top" style="position: relative;overflow: hidden;">
			<!-- 默认回显第一个商品的主图 -->
			<!-- <SPuUploadImg v-model="formData.items[0].picUrl" :disabled="true" v-if="activeName == 'info'" /> -->
			<van-tabs v-model:active="activeName">
				<van-tab title="基本信息" name="info"/>
				<van-tab title="分配角色" name="AssignRoles"/>
			</van-tabs>
		</div>
		<div class="bottom">
      <UserForm :obj="userObj" ref="userFormRef" :isDetail="true" :openType="openType" v-if="activeName == 'info'" />
      <UserAssignRoleForm :obj="userObj" ref="userAssignRoleFormRef" :isDetail="true"  v-if="activeName == 'AssignRoles'" />
		</div>

	</ContentWrap>

</template>

<script lang="ts" setup>
import UserForm from './UserForm.vue';
import UserAssignRoleForm from './UserAssignRoleForm.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.query)
const openType = route.query.type;
const userObj = JSON.parse(route.query.obj);
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'ProductSpuForm' })

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const activeName = ref('info') // Tag 激活的窗口

onMounted(() => {
  // 当子组件挂载时，改变父组件的样式
  document.getElementsByTagName('section')[1].style.padding = '0px';
  document.getElementsByTagName('section')[1].style.width = '100%';
  document.getElementsByTagName('section')[1].style.background = '#f5f7f9';
  document.getElementsByTagName('section')[1].querySelector('div').style.border = 'none';
});
onUnmounted(() => {
  // 当子组件卸载时，恢复父组件的原始样式
  document.getElementsByTagName('section')[1].style.width = 'auto';
  document.getElementsByTagName('section')[1].style.padding = '20px';
  document.getElementsByTagName('section')[1].style.background = 'var(--el-color-white)';
});
</script>



<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style>