<template>
	<view class='container'>
		<view class="info-box">
			<!-- 微信小程序 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="item">
				<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<text class="fs-36">头像</text>
					<view class="flex flex-column-center">
						<image class="w-100 h-100" style="border-radius: 50%;" :src="userHeader">
						</image>
						<image class="w-27 h-27 ml-20" src="@/static/right.png"></image>
					</view>
				</button>
			</view>
			<!-- #endif -->
			
			<!-- APP或H5 -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view  @click="uploadHeadPortrait = true" class="item">
				<text>头像</text>
				<view class="flex flex-column-center">
					<image class="w-80 h-80" style="border-radius: 50%;" :src="userHeader">
					</image>
					<image class="w-27 h-27 ml-20" src="@/static/right.png"></image>
				</view>
			</view>
			<!-- #endif -->
		
			<view @click="$wskj.to('/pages/my/modifynickname')" class="item">
				<text>昵称</text>
				<view>
					<text>{{ userNickName }}</text>
					<image class="w-27 h-27 ml-20" src="@/static/right.png"></image>
				</view>
			</view>
			
			<view @click="genderShow = true" class="item">
				<text>性别</text>
				<view>
					<text>{{ userGender == 0? '女' : '男' }}</text>
					<image class="w-27 h-27 ml-20" src="@/static/right.png"></image>
				</view>
			</view>
		
			<view @click="$wskj.to('/pages/my/modifyjieshao')" class="item">
				<text>个人介绍</text>
				<view>
					<text v-if="bio">{{ bio.substr(0,8) }}</text>
					<text v-else>暂无</text>
					<image class="w-27 h-27 ml-20" src="@/static/right.png"></image>
				</view>
			</view>
		
			<view class="item">
				<text>绑定手机号</text>
				<view>
					<text>{{ userMobile }}</text>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<view @click="outloginShow = true" class="fullscreen-btn">
				<text>退出</text>
			</view>
		</view>
		
		<!--头像上传弹出层-->
		<u-action-sheet @select="onHeadSelect" @close="closeHead" :actions="list" :show="uploadHeadPortrait"
			cancelText="取消"></u-action-sheet>
			
		<!--性别弹出层-->
		<u-picker :show="genderShow" :columns="genderList" :closeOnClickOverlay="true" @close="genderShow = false" @cancel="genderShow = false" @confirm="onGenderSelect"></u-picker>
		
		<!-- 退出弹窗 -->
		<wskj-modal :show="outloginShow" title="退出提醒" :showCancelButton="true" confirmText="确定" confirmColor="#B1231A"
			@close="outloginShow = false" @cancel="outloginShow = false"
			@confirm="onConfirmOutLogin">
			<view class="pt-40 pb-40">
				<view>
					<text class="fs-28">确定要退出当前账号？</text>
				</view>
			</view>
		</wskj-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				userHeader: '',
				userNickName: '',
				userGender: '',
				userMobile: '',
				bio: '',
				
				uploadHeadPortrait: false,
				list: [{
						name: "拍摄",
						index: 0
					},
					{
						name: "从相册选取",
						index: 1
					}
				],
				
				genderShow: false,
				genderList: [
					["女", "男"]
				],

				outloginShow: false
			};
		},
		async onShow() {
			await this.$store.dispatch('user/getUserInfo');
			
			this.bio = this.user.userInfo.bio
			this.userNickName = this.user.userInfo.nickname
			this.userGender = this.user.userInfo.gender
			this.userMobile = this.user.userInfo.mobile
			this.userHeader = this.user.userInfo.avatar
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			// 选择上传头像某一项触发
			onHeadSelect(item) {
				const {
					index
				} = item
				// console.log(index)
				if (index === 0) { // 拍摄
					this.chooseImage('camera')
				} else if (index === 1) { // 从相册选择
					this.chooseImage('album')
				}
			},
			// 上传头像弹出层关闭的回调
			closeHead() {
				this.uploadHeadPortrait = false
			},
			chooseImage(type) {
				uni.chooseImage({
					sourceType: [type],
					count: 1,
					sizeType: 'original',
					success: async (res) => {
						// console.log(res)
						const tempFilePaths = res.tempFilePaths[0];
						// 请求后端接口获取完整图片地址
						const imgUrl = await this.$wskj.uploadImg(tempFilePaths)
						// console.log('imgUrl',imgUrl)
						this.userHeader = imgUrl.fullurl
			
						this.editUserInfo()
					}
				})
			},
			// 获取微信头像
			async chooseavatar(e){
				// console.log(e)
				const wxHeader = e.detail.avatarUrl
				const imgUrl = await this.$wskj.uploadImg(wxHeader)
				
				uni.showLoading({
					title: ''
				})
				this.editUserInfo(imgUrl)
			},
			onGenderSelect(e){
				// console.log(e)
				const gender = e.indexs[0]
				// console.log(gender) 0女  1男
				this.genderShow = false
				const params = {
					url: '/api/user/profile',
					loadingTip: '',
					data: {
						gender
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.$u.toast(res.msg || '修改成功')
					this.userGender = gender
					this.$store.dispatch('user/getUserInfo');
				}).catch(err => {
					// console.log(err)
					this.$u.toast(err.msg || '修改失败')
				})
			},
			editUserInfo(imgUrl) {
				const params = {
					url: '/api/user/profile',
					data: {
						avatar: imgUrl.fullurl
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.$u.toast(res.msg || '修改成功')
					this.userHeader = imgUrl.fullurl
					this.$store.dispatch('user/getUserInfo');
				}).catch(err => {
					// console.log(err)
					this.$u.toast(err.msg || '修改失败')
				})
			},
			onConfirmOutLogin() {
				this.outloginShow = false
				uni.showLoading({
					title: ''
				})
				uni.clearStorageSync();
				
				setTimeout(() => {
					uni.hideLoading()
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}, 600)
			}
		},
	};
</script>

<style scoped>
	.container {
		height: 100%;
	}
	.info-box {
		background-color: #FFF;
	}

	.item {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #F5F5F5;
	}

	.btn-box {
		width: 100%;
		padding: 0 20rpx;
		position: absolute;
		bottom: 100rpx;
		box-sizing: border-box !important;
	}
	
	button {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>