<template>
	<view class="container">
		<tt-cropper mode="ratio" :imageUrl="avatarModel.imageUrl" :width="500" :height="500" :radius="90" :delay="300"
			@cancel="onCancel" @confirm="onConfirm">
		</tt-cropper>
		<!-- <view class="preview">
			<image class="avatar-image" :src="avatarModel.avatarPath" mode="aspectFill" @click="previewImage(avatarModel.avatarPath)"></image>
		</view> -->
		
		<view class="preview">
		  <image class="avatar-image" :src="avatarModel.avatarPath" mode="aspectFill" @click="previewImage(avatarModel.avatarPath)"></image>
		  <image class="blur-image" :src="avatarModel.avatarPath" mode="aspectFill"></image>
		</view>



		<button type="default" @click="selectFile">选择图片</button>
		<button type="primary" @click="submitImage">提交</button>
	</view>
</template>

<script setup>
	import {onMounted,ref} from 'vue';
	import {uploadAvatarFile,updateUserInfoHeaderFileId,getUserInfo} from '@/api/mine';
	import {useUserStore} from '@/store/user.js';
	import config from '@/config';
	import $modal from '@/plugins/modal.js'
	import $tab from '@/plugins/tab.js'
	const userStore = useUserStore();
	const avatarModel = ref({
		imageUrl: '',
		avatarName: '',
		avatarPath: '',
	});
	
	onMounted(()=>{
		//初始头像挂载
		avatarModel.value.avatarPath=userStore.user.photo==""?config.baseUrlPre+config.defaultAvatarPath:config.baseUrlPre+userStore.user.photo
	})


	function selectFile(){
		let chooseFile = uni.chooseFile;
		if (typeof wx !== 'undefined' && typeof wx.chooseMessageFile === 'function') {
			//切换微信小程序选择文件的方法
			chooseFile = wx.chooseMessageFile;
		}
		if (typeof chooseFile !== 'function') {
			return reject({
				errMsg: ERR_MSG_FAIL + ' 请指定 type 类型，该平台仅支持选择 image 或 video。',
			});
		}
		chooseFile({
			count: 1,
			type: 'image',
			success: (res) => {
				avatarModel.value.imageUrl = res.tempFiles[0].path;
				avatarModel.value.avatarName = res.tempFiles[0].name;
			}
		});
	};

	// 关闭截切页
	function onCancel(){
		avatarModel.value.imageUrl = "";
	};

	// 确定裁剪
	function onConfirm(res){
		const params = {
			id: new Date().getTime(),
			url: res.tempFilePath,
		};
		avatarModel.value.imageUrl = "";
		avatarModel.value.avatarPath = res.tempFilePath;
	};

	// 预览图片
	function previewImage(url){
		uni.previewImage({
			urls: [url],
		});
	};

	//提交
	function submitImage(){
		if (!avatarModel.value.avatarPath) return;
		const data = {
			name: avatarModel.value.avatarName,
			filePath: avatarModel.value.avatarPath
		}
		uploadAvatarFile(data).then(res => {
			if ('success' === res.returnMsg) {
				const params = {
					userid: userStore.user.useId,
					headerFileId: res.returnParams
				}
				updateUserInfoHeaderFileId(params).then(res => {
					if ('success' === res.returnMsg) {
						// const _user = userStore.user
						getUserInfo(userStore.user.useId).then(res => {
							userStore.user.photo = res.returnParams[0].photo;
							uni.setStorageSync('userInfo', userStore.user)
						})
						$modal.msgSuccess('提交成功');
						setTimeout(() => {
							$tab.navigateBack()
						}, 1000);
					}
				})
			}

		}).catch(err => {
			$modal.showToast('文件' + data.name + '上传失败,请重新选择上传')
			switch (err) {
				case -201:
					console.log('文件上传失败 未找到该文件');
					break;
				case -20201:
					console.log('文件上传失败 返回值不是JSON字符串');
					break;
				default:
					console.log('err', err)
			}
		})
	};
</script>

<style lang="scss" scoped>
	
	.container{
		// .preview {
		// 	padding: 1rem;
		// 	text-align: center;
		// 	margin: 3rem auto;
		// 	image {
		// 		width: 15.625rem;
		// 		height: 15.625rem;
		// 	}
		// }
		
		button {
			margin-top: 10px;
			width: 90%;
		}
	}
	
	/* wxss */
	.preview {
	      margin: 3rem auto;
	      width: 15rem;
	      height: 15rem;
	  position: relative;
	  overflow: hidden;
	}
	
	.avatar-image,
	.blur-image {
	  width: 100%; /* 使图片充满容器 */
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	
	.avatar-image {
	  border-radius: 50%; /* 裁剪成圆形 */
	  z-index: 2; /* 确保圆形头像在模糊层上方 */
	}
	
	.blur-image {
	  filter: blur(5px); /* 调整模糊程度 */
	  clip-path: circle(50% at center); /* 初始裁剪成圆形 */
	  animation: expandBlur 0.5s forwards; /* 动画效果，展开模糊区域 */
	}
	
	@keyframes expandBlur {
	  to {
	    clip-path: circle(100% at center); /* 动画结束时裁剪成整个容器大小 */
	  }
	}

	
</style>