<template>
	<view class="userinfo">
		<view class="avatar">
			<button  class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image v-if="userAvatar" :src="userAvatar" class="head_icon" mode=""></image>
				<image v-else class="head_icon" src="/static/ai/myself.jpg"></image>
			</button>
		</view>
		<view class="content">
			<view class="name" >
				<view class="" v-if="!inputing" @click="handleForceInput">
					<span>{{ nickname ? nickname : '请填写昵称' }}</span>
					<span class="iconfont icon-bianjishuru" style="margin-left: 6px;"></span>
				</view>
				<view v-else class="">
					<input class="inputname" placeholder="请填写昵称" type="nickname" v-model="inputname" :focus="inputing" @blur="handleUpdate" /> 
				</view>
				<!-- <view class="tag" v-if="isVIP" @click="handleGotoVIP">
					AI降临派<span>VIP</span>
				</view> -->
			</view>
			<view class="desc">
				<!-- <view class="left">
					算力：<span class="times">{{ leftTimes }}</span>点
				</view>
				<view class="right" v-if="leftCutTimes">
					AI绘图插队权益：<span class="times">{{ leftCutTimes }}</span>次
				</view> -->
				<view class="tag" v-if="isVIP" @click="handleGotoVIP">
					AI降临派<span>VIP</span>
				</view>
				<view class="tag" v-else>
					AI降临派成员
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { dateFormat } from '@/common/util.js'
	import { curVersion } from '@/common/config.js'
	import { updateAvatar, updateUserName, uploadImage } from '@/api/index.js'
	export default {
		data() {
			return {
				inputing: false,
				inputname: this.nickname
			}
		},
		computed: { 
			...mapState(['userId', 'userAvatar','leftTimes', 'leftCutTimes', 'nickname', 'isVIP'])
		},
		methods: {
			...mapMutations(['setNickname', 'setAvatar']),
			handleGotoVIP() {
				uni.navigateTo({
					url: '/pages/about/vip/vip'
				})
			},
			handleForceInput() {
				this.inputing = true
			},
			async handleUpdate() {
				this.inputing = false
				if (this.inputname) {
					const res = await updateUserName(this.inputname)
					if (res.code === 0) {
						this.setNickname(this.inputname)
					}
				}
			},
			async onChooseAvatar(e) {
				console.log(e.detail)
			    const { avatarUrl } = e.detail 				
				// const fsm = wx.getFileSystemManager()
				// const file = await fsm.readFileSync(avatarUrl)
				// console.log('file:', file)
				const res = await uploadImage(avatarUrl)
				if (res.code === 0) {
					this.handleUpdateAvatar(res.data)
				}
			},
			async handleUpdateAvatar(url) {
				const res = await updateAvatar(url)
				if (res.code === 0) {
					this.setAvatar(url)
				}
			},
			handleRefresh() {
				this.$emit('handleRefresh')
			}
		}
	}
</script>

<style lang="less" scoped>
	.userinfo {
		display: flex;
		color: #FFF;
		padding: 20rpx 40rpx;
		.avatar {
			width: 88rpx;
			height: 88rpx;
			.head_icon {
				border-radius: 8rpx;
				height: 100%;
				width: 100%;
			}
			.avatar-btn {
				height: 100%;
				border-radius: 10rpx;
				padding: 0;
				border: 0;
			}
		}
		.content {
			padding-left: 28rpx;
			flex: 1;
			.name {
				font-size: 32rpx;
				display: flex;
				align-items: center;

			}
			.inputname {
				color: #FFF;
				border: none;
				font-size: 32rpx;
				max-width: 280rpx;
			}
			.desc {
				padding-top: 8rpx;
				display: flex;
				justify-content: space-between;
				.left, .right {
					.times {
						color: @mainColor;
						font-weight: 600;
					}
				}
			}
		}
		
		.tag {
			background: darken(@mainColor, 10%);
			border-radius: 8rpx;
			font-size: 24rpx;
			padding: 2rpx 16rpx;
			color: #FFF;
			font-weight: bold;
			span {
				color: @goldColor;
				font-weight: 600;
			}
			&:active {
				color: lighten(@mainColor, 5%);
			}
		}
	}
</style>