<template>
	<u-popup :show="showUserinfo" mode="center" @close="sendshow" closeable round="20rpx">
		<view style="padding: 30rpx;">
			<view style="font-size: 30rpx;font-weight: 700;">设置头像昵称</view>
			<view style="background-color: #ffffff;border-radius: 16rpx; padding: 30rpx;">
				<view class="u-flex u-flex-y-center">
					<view style="font-size: 30rpx;">头像</view>
					<view style="width: 20rpx;"></view>
					<button class="xkl-clear-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u--image width="120rpx" height="120rpx" :src="userinfo.avatar_url" shape="circle">
						</u--image>
						<view style="width: 10rpx;"></view>
					</button>
				</view>
				<view style="height: 30rpx;"></view>
				<view class="u-flex u-flex-y-center">
					<view style="font-size: 30rpx;">昵称</view>
					<view style="width: 20rpx;"></view>
					<!-- <u-input type="nickname" v-model="userInfo.nickname" placeholder="请输入昵称" /> -->
					<input type="nickname" @blur="onNicknameBlur" v-model="userinfo.nickname" placeholder="请输入昵称"
						style="border-bottom: 1px solid #cccccc;height: 60rpx;font-size: 30rpx;" />
				</view>
			</view>
			<view style="height: 20rpx;"></view>
			<u-button @click="setUserinfo" color="#71d5a1">确认</u-button>
		</view>
	</u-popup>
</template>

<script>
	let self;
	export default {
		props: {
			showUserinfo: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				userinfo: {
					nickname: '',
					avatar_url: ''
				},
				avatar_url: '',
				ossdata: {}
			}
		},
		created() {
			self = this;
			self.getOssData();
			self.userinfo = self.$store.state.auth.user;
		},
		mounted() {

		},
		methods: {
			sendshow() {
				this.$emit('update:showUserinfo', false);
			},
			getOssData() {
				self.$http.get('/com/oss/uptoken').then(({
					data
				}) => {
					self.ossdata = data;
				})
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				self.userinfo.avatar_url = avatarUrl;
				self.avatar_url = avatarUrl;

				let ext = self.avatar_url.split('.').pop();
				let key = self.ossdata.dir + Math.random() + '.' + ext;

				uni.uploadFile({
					url: self.ossdata.host, //仅为示例，非真实的接口地址
					filePath: self.avatar_url,
					name: 'file',
					formData: {
						key: key,
						OSSAccessKeyId: self.ossdata.accessid,
						policy: self.ossdata.policy,
						'success_action_status': '200',
						Signature: self.ossdata.signature,
					},
					success: (res) => {
						if (res.statusCode == 200) {
							self.avatar_url = key;
						}
					}
				});
			},
			setUserinfo() {
				if (self.userinfo.nickname.length < 1) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					})
					return;
				}

				if (self.userinfo.nickname.length > 8) {
					uni.showToast({
						title: '最多8个字符',
						icon: 'none'
					})
					return;
				}

				self.$http.post('/shop/v10/user/update', {
					avatar_url: self.avatar_url,
					nickname: self.userinfo.nickname
				}).then(({
					data,
					success,
					msg
				}) => {
					if (success) {
						self.$store.commit('auth/setUser', data);
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						self.sendshow();
					}
				})
			},
			onNicknameBlur(e) {
				const nickname = e.detail.value;

				self.userinfo.nickname = nickname;
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>