<template>
	<view>
		<view class="item" hover-class="w-hover" @click="avatarStart()">
			<view class="item-title">头像</view>
			<view class="item-body"><u-avatar mode="aspectFill" size="2.5rem" :src="authStore.user.avatar"></u-avatar></view>
			<view class="item-right">
				<u-icon name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
			</view>
		</view>
		
		<ksp-cropper mode="fixed" :width="400" :height="400"  :maxWidth="1024" :maxHeight="1024" :url="avatar" @cancel="avatar=''" @ok="avatarOk"></ksp-cropper>
		
	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref,computed } from 'vue'
	import { useAuthStore } from '@/store'
	
	// import { avatar as uploadAvatar } from '@/api/system/user/profile.js'
	import { avatar as uploadAvatar } from '@/api/admin'
	
	
	const authStore = useAuthStore();
	/**
	 * 头像处理
	 */
	const avatar = ref("");
	/**
	 * 头像裁剪后的回调
	 */
	const avatarOk = (res) => {
		avatar.value = "";
		authStore.user.avatar = res.path;
		console.debug("头像",res.path);
		uploadAvatar(res.path).then(r=>{
			console.debug("头像上传后",r);
			authStore.user.avatar = r.icon;
		});
	}
	/**
	 * 头像选择
	 */
	const avatarStart = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				avatar.value=res.tempFilePaths[0];
			}
		})
	}
</script>

<style lang="scss" scoped>
	
</style>