<template>
	<view class="container">
		<view :class="['upload', picUrl && 'no_border' ]" @click="headerUploadClick">

			<view v-if="!picUrl">
				<view class="add"></view>
				<view class="column"></view>
			</view>

			<image v-if="picUrl" class="upload_img" :src="picUrl" mode="" />
		</view>
		<view class="tips">
			<text class="desc">提示：</text>
			建议大小300*300像素的图片
		</view>

		<nav-footer />
	</view>
</template>

<script>
	import { request, upload, picUrl as imageUrl } from '../../../utils/index';
	import { apiArr } from '../../../api/user';
	export default {
		data() {
			return {
				picUrl: '',
			}
		},
		methods: {
			headerUploadClick() {
				let _this = this;
				wx.showLoading({
					title: '上传中',
				})
				uni.chooseMedia({
					count: 1,
					success(res) {
						console.log('123131', res);
						const tempFilePaths = res.tempFiles;
						
						// 调用公共上传图片方法
						upload(tempFilePaths[0].tempFilePath,(res)=>{
							let datas = JSON.parse(res)
							console.log(datas.data);
							let url = imageUrl + datas.data.path
							_this.picUrl = url;
							
							// 调用业务接口提交图片
							request(apiArr.avatar, "POST", {
								avatar: datas.data.path
							}, { silent: false, nested: true }).then((res) => {
								uni.hideLoading();
								uni.showToast({
									title: '上传头像成功',
									icon: 'success',
									mask: true,
									success() {
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1500)
									}
								})
							})
						})
					},
					fail(err) {
						console.log('拉起上传图片失败', err);
						uni.hideLoading();
					}
				})
			},
		},
		onLoad() {

		},
		onShow() {

		}
	}
</script>

<style>
	@import url("./index.css");
</style>