<template>
	<view class="content">
		<view class="edgeInsetTop"></view>
		<wanl-image-cutter @ok="getCropperImage" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500" />
		<view class="text-center padding-top-xl" :style="{backgroundImage: `url(${$wanlshop.maks()})`}">
			<view @tap="chooseImage" class="cu-avatar avatar" v-if="path" :style="{ backgroundImage: 'url(' + path + ')' }"></view>
			<view @tap="chooseImage" class="cu-avatar avatar" v-else :style="{ backgroundImage: 'url(' + $wanlshop.oss(user.avatar, 100, 100) + ')' }"></view>
			<view class=" text-sm" @tap="chooseImage">点击修改头像</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			url: '',
			path: ''
		};
	},
	computed: {
		...mapState(['user'])
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				count: 1, // 默认9
				sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: res => {
					// 设置url的值，显示控件
					this.url = res.tempFilePaths[0];
				}
			});
		},
		getCropperImage(e) {
			this.path = e.path;
			this.url = '';
			// 上传图片
			this.$api.get({
				url: '/wanlshop/common/uploadData',
				success: updata => {
					this.$api.upload({
						url: updata.uploadurl,
						filePath: e.path,
						name: 'file',
						formData: updata.storage == 'local' ? null : updata.multipart,
						success: res => {
							this.$api.post({
								url: '/wanlshop/user/profile', 
								data: {avatar: res.fullurl},
								success: data => {
									this.$store.commit('user/setUserInfo', {avatar: data.avatar});
								}
							});
						}
					});
				}
			});
		},
		oncancle() {
			this.url = '';
		}
	}
};
</script>
<style>
.avatar {
	width: 5rem;
	height: 5rem;
	background-color: #e5e5e5;
	border-radius: 50%;
	margin: 30rpx;
}
</style>
