<template>
	<el-container class="page-user">
		<el-aside style="width: 160px;">
			<el-container>
				<el-header style="height: auto;display: block;">
					<div class="user-info-top">

						<x-upload v-model="user.avatar" :data={token:token} v-if="avatarupload" :api="avatarupload" width="100" height="100" icon="el-icon-avatar" ref="uploader" :onRemove="onRemove" class="xuavatar" round :cropper="true" :aspectRatio="1/1">
						</x-upload>
						<el-avatar :size="100" v-else :src="user.avatar"></el-avatar>
						<h2 class="nickname">{{ user.nickname || user.username }}</h2>
						<!-- <p><el-tag effect="dark" round size="large" disable-transitions>{{ user.role }}</el-tag></p> -->
						<p>
							<el-button-group>
							    <el-button @click="xupdate('message', '发送消息', 'drawer')" type="info" size="small" style="padding:5px">
							    	系统消息
							    </el-button>
							    <el-button @click="xupdate('user', '编辑信息', 'fdsafdafafa')" type="info" color="#607d8b" size="small" style="padding:5px">
							    	编辑资料
							    </el-button>
						  	</el-button-group>
						</p>
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component" @click="openPage">
								<el-icon v-if="item.icon"><component :is="item.icon"/></el-icon>
								<template #title>
									<span>{{item.title}}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main style="padding: 0px;">
			<Suspense>
				<template #default>
					<component :data="user" :is="page"/>
				</template>
				<template #fallback>
					<el-skeleton :rows="3" />
				</template>
			</Suspense>
		</el-main>
	</el-container>


	<x-update v-if="updateKey" :name="updateKey" ref="xupdate" @success="handleSuccess" @closed="updateKey=''"></x-update>
</template>

<style>
	.xuavatar {
		margin: auto;
		border-radius: 10px !important;
	}

	.page-user .user-info-top .nickname {
		font-size: 14px;
		margin-top: 8px;
	} 

	.xuavatar .el-upload--picture-card { 
		--el-upload-picture-card-size:80px; 
		border-radius: 10px !important;	
	}
</style>

<script>
	import { defineAsyncComponent } from 'vue'

	export default {
		name: 'userCenter',
		components: {
			account: defineAsyncComponent(() => import('./components/account')),
			seting: defineAsyncComponent(() => import('./components/seting')),
			pushSettings: defineAsyncComponent(() => import('./components/pushSettings')),
			password: defineAsyncComponent(() => import('./components/password')),
			space: defineAsyncComponent(() => import('./components/space')),
			logs: defineAsyncComponent(() => import('./components/logs')),
		},
		props: {
			modelValue: { type: Object, default: () => {} },
			type: { type: String, default: "" }
		},
		data() {
			return {
				menu: [
					{
						groupName: "基本设置",
						list: [
							{
								icon: "el-icon-postcard",
								title: "账号信息",
								component: "account"
							},
							{
								icon: "el-icon-operation",
								title: "行为轨迹",
								component: "seting"
							},
							{
								icon: "el-icon-lock",
								title: "密码",
								component: "password"
							},
							{
								icon: "el-icon-bell",
								title: "通知设置",
								component: "pushSettings"
							}
						]
					},
					{
						groupName: "数据管理",
						list: [
							{
								icon: "el-icon-coin",
								title: "存储空间信息",
								component: "space"
							},
							{
								icon: "el-icon-clock",
								title: "Offer",
								component: "logs"
							},
							{
								icon: "el-icon-clock",
								title: "租房",
								component: "logs"
							},
							{
								icon: "el-icon-clock",
								title: "我的附件",
								component: "logs"
							}
						]
					},
				],
				user: {},
				userData: this.modelValue,
				token: '',
				avatarupload: '',
				updateKey: '',
				page: "account"
			}
		},
		created() {
			this.loaddata();
		},
		methods: {

			xupdate(key, name, type){
				this.updateKey = key;
				this.$nextTick(() => {
					this.$refs.xupdate.open().getComponentType(type).setConfig({name:name, remoteurl:'table/getUpdate?name='+key+'&token='+this.token});
				})
			},
			loaddata(){
				this.$http.post('user/index/get',{uid: this.userData.uid, type:this.type}).then((res) => {
					if (res.code==200) {
						Object.assign(this.$data, res.data);
						return false;
					}
					this.$alert(res.message, "提示", {type: 'error'});
				});
			},
			onRemove(){
				this.$http.post('avatar/index/delete',{token: this.token}).then((res) => {
					if (res.code==200) {
						this.userData.avatar = '';
						this.$refs.uploader.clearFiles();
						this.$message.success(res.message || "操作成功")
						return false;
					}
					this.$alert(res.message, "提示", {type: 'error'});
				});
				return false;
			},
			openPage(item){
				this.page = item.index
			}
		}
	}
</script>