<template>
	<view class="update-hbd">
		<view class="publish-container-box">
			<view class="update-itme">
				<view class="">
					<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" :previewFullImage="true" width="400rpx" height="300rpx">
						<view class="toux">
							修改头像
						</view>
					</up-upload>
				</view>
			</view>
			<view class="update-itme" @click="open">
				修改昵称
			</view>
		</view>
	</view>
	<InputBox v-if="inputVisible" @submit="submitNote" @blurCom="blurCom" text="修改"></InputBox>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		updateUserImage,
		updateUserName
	} from '@/apis/user.js'
	import {
		uploadFile
	} from '@/utils/http.js'
	const emit = defineEmits(['updata'])
	const fileList1 = ref([]); //1
	const inputVisible = ref(false);
	const open = () => {
		inputVisible.value = true;
	}
	const blurCom = () => {
		inputVisible.value = false;
	}
	const submitNote = async(name) => {
		blurCom();
		uni.showLoading({
			title: '正在修改...'
		});
		let res = await updateUserName(name);
		try {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: "修改成功"
				})
				emit('updata');
			} else {
				uni.showToast({
					icon: "none",
					title: "修改失败，请检查网络"
				})
				emit('updata');
			}
		} catch (error) {
			uni.showToast({
				icon: "none",
				title: "修改失败，请检查网络"
			})
			emit('updata');
		} finally {
			// httpStatic.value = false;
			uni.hideLoading();
		}
	}
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		for (let item of lists) {
			try {
				uni.showLoading({
					title: '正在修改...'
				});
				let res = await uploadFile(item.url); // 调用上传文件的方法
				res = JSON.parse(res);
				let jg = await updateUserImage(res.url);
				if (jg.code == 200) {
					uni.showToast({
						icon: "none",
						title: "修改成功"
					})
					emit('updata');
				} else {
					uni.showToast({
						icon: "none",
						title: "修改失败，请检查网络"
					})
					emit('updata');
					fileList1.value = [];
				}
			} catch (error) {
				uni.showToast({
					icon: "none",
					title: "修改失败，请检查网络"
				})
				emit('updata');
				fileList1.value = [];
			} finally {
				// httpStatic.value = false;
				uni.hideLoading();
			}
		}
	};
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};
</script>

<style lang="scss" scoped>
	.update-hbd {
		display: flex;
		flex-flow: column;
	}

	.update-itme {
		margin: 20rpx auto;
		height: 60rpx;
		width: 30vw;
		font-size: 40rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #000;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.toux {
		width: 100%;
		margin: 0 auto;
		// background-color: #aaaaff;
	}
</style>