<template>
	<view class="wrap">
		<template v-if="imgSrc">
			<view class="showArea">
				<view class="iconBox" @click="handleDel">
					<view class="cuIcon-close"></view>
				</view>
				<wd-img :radius="4" enable-preview label="头像" width="60px" height="60px" :src="imgSrc"></wd-img>
			</view>
		</template>
		<template v-else>
			<div class="uploadArea" @click="handleUpload">
				<view class="iconBox">
					<view class="cuIcon-cameraadd"></view>
				</view>
			</div>
		</template>
		<wd-message-box></wd-message-box>
	</view>
</template>

<script setup lang="ts">
	import { useMessage, useToast } from 'wot-design-uni'
	import { computed, watch } from 'vue'
	import { getEnvBaseUrl } from '@/utils/index'
	import { getFileAccessHttpUrl } from '@/common/uitls'
	import { useUserStore } from '@/store/user'
	const userStore = useUserStore()
	
	defineOptions({
		name: 'avatar',
		options: {
			// apply-shared‌：当前页面样式会影响到子组件样式.(小程序)
			// shared‌：当前页面样式影响到子组件，子组件样式也会影响到当前页面.(小程序)
			styleIsolation: 'shared',
		},
	})
	const props = defineProps(['modelValue'])
	const emit = defineEmits(['update:modelValue'])

	const toast = useToast()
	const message = useMessage()
	const api = {
		uploadUrl: `${getEnvBaseUrl()}/sys/common/upload`,
	}
	let stopWatch

	const imgSrc = computed(() => {
		return getFileAccessHttpUrl(props.modelValue)
	})
	const handleDel = () => {
		message
			.confirm({
				msg: '确定要删除这个头像吗？',
				title: '提示',
			})
			.then(() => {
				emit('update:modelValue', '')
			})
			.catch(() => {
				console.log('点击了取消按钮')
			})
	}
	const handleUpload = () => {
		const { loading, data, error, run } = useUpload({ name: 'file' }, { url: `${getEnvBaseUrl()}/sys/common/upload?appPath=用户头像/` + userStore.userInfo.realname})
		if (stopWatch) stopWatch()
		run()
		stopWatch = watch(
			() => [loading.value, error.value, data.value],
			([loading, err, data], oldValue) => {
				if (loading == false) {
					if (err) {
						toast.warning('修改失败')
					} else {
						if (data) {
							emit('update:modelValue', data.message)
						}
					}
				}
			},
		)
	}
</script>

<style lang="scss" scoped>
	.showArea {
		position: relative;
		width: fit-content;

		.iconBox {
			position: absolute;
			right: 0;
			top: 0;
			border-bottom-left-radius: 3px;
			padding: 3px 6px;
			height: auto;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 1;
			color: #fff;
			font-size: 12px;
			line-height: 1;
			border-radius: 2px;
		}
	}

	.uploadArea {
		width: 60px;
		height: 60px;

		.iconBox {
			height: 100%;
			width: 100%;
			border: 2px solid #eee;
			color: #8799a3;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 27px;
		}
	}
</style>