<template>
	<view class="content">
		<image class="content-bg" src="@/static/icon/my01.png" mode=""></image>
		<view :style="{ height: `calc(${globalData.statusBarHeight}rpx + 158rpx)` }"></view>
		<view class="content-in">
			<view class="content-in-info baiyin-flex baiyin-flex-c-b">
				<button class="content-in-info-l" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image v-if="!headImgUrl" src="@/static/icon/my03.png" mode=""></image>
					<image v-else :src="headImgUrl" mode=""></image>
				</button>
				<view v-if="token" class="content-in-info-r">
					<view class="content-in-info-r-t baiyin-flex">
						<text v-if="nameDisabled">{{nickname}}</text>
						<input v-else confirm-type="确定" @confirm="inputNameConfirm" maxlength="15" type="text" :value="nickname" />
						<image src="@/static/icon/my02.png" mode="" @click="nameDisabled = !nameDisabled"></image>
					</view>
					<view class="content-in-info-r-b" v-if="mobile">手机号:{{mobile}}</view>
				</view>
				<view class="content-in-info-r-b" v-else>
					未登录
				</view>
			</view>
			<view class="content-in-item baiyin-flex baiyin-flex-c-sb baiyin-flex-c-b" v-for="(item, index) in list" :key="index" @click="index != 0 ? clickJumpNPage(item) : null">
				<!-- 联系客服生成 -->
				<button class="content-in-item-btn" v-if="index === 0" open-type="contact"></button>
				<view class="baiyin-flex baiyin-flex-c-b">
					<image :src="item.icon" mode=""></image>
					<text>{{ item.title }}</text>
				</view>
				<image src="@/static/icon/my09.png" mode=""></image>
			</view>
			<view class="content-in-btn" @click="handleLogin">
				<u-button
					:text="token ?  '退出登录' : '登录'"
					color="#EA654E"
					:customStyle="{
						width: '560rpx',
						height: '80rpx',
						borderRadius: '10rpx',
						padding: '0rpx',
						margin: '178rpx 0rpx 0rpx 65rpx'
					}"
				></u-button>
			</view>
		</view>
		<com-navbar :leftIcon="false" bgColor="transparent" title="我的" :titleStyle="{ color: '#ffffff', fontSize: '34rpx' }" />
		<com-tabbar
			:list="[
				{
					name: '首页',
					icon: '/static/tabbar/tb1.png',
					selectIcon: '/static/tabbar/td1.png',
					url: '/pages/home/index',
					type: 'type'
				},
				{
					name: '我的需求',
					icon: '/static/tabbar/tb2.png',
					selectIcon: '/static/tabbar/td2.png',
					url: '/pages/demand/index',
					type: 'type'
				},
				{
					name: '发布',
					icon: '/static/tabbar/fb.png',
					selectIcon: '/static/tabbar/fb.png',
					url: '/pages/release/index',
					type: 'type'
				},
				{
					name: '动态',
					icon: '/static/tabbar/tb3.png',
					selectIcon: '/static/tabbar/td3.png',
					url: '/pages/order/index',
					type: 'type'
				},
				{
					name: '我的',
					icon: '/static/tabbar/tb4.png',
					selectIcon: '/static/tabbar/td4.png',
					url: '',
					type: 'myCenter'
				}
			]"
		/>
	</view>
</template>

<script>
import apiBaseConfig from '@/config/index.js';
import { mapMutations } from 'vuex';
import {updateUserMsg} from '@/api/system/index.js'
export default {
	data() {
		return {
			imgBgUrl: apiBaseConfig.imgBgUrl,
			globalData: getApp().globalData,
			scrollTopHeader: 0,
			nameDisabled: true,
			nickname:'用户名称',
			mobile:'',//手机号
			list: [
				{
					icon: require('@/static/icon/my04.png'),
					title: '联系客服'
				},
				{
					icon: require('@/static/icon/my05.png'),
					title: '意见反馈',
					url: '/my/feedback/index'
				},
				{
					icon: require('@/static/icon/my06.png'),
					title: '我的邀请',
					url: '/my/invite/index'
				},
				{
					icon: require('@/static/icon/my07.png'),
					title: '用户协议',
					url: '/my/agreeOn/index'
				},
				{
					icon: require('@/static/icon/my08.png'),
					title: '我的优惠券',
					url: '/my/coupon/index?type=coupon'
				}
			],
			token:'',
			uploadUrl: apiBaseConfig.upload,
			headImgUrl:''
		};
	},
	onLoad() {
		let that = this
		console.log(that.$store.state.login.userInfo.user,'打死你')
		if(that.$store.state.login.userInfo && that.$store.state.login.userInfo.user && that.$store.state.login.userInfo.user.nickname){
			that.nickname = that.$store.state.login.userInfo.user.nickname
		}
		
		if(that.$store.state.login.userInfo && that.$store.state.login.userInfo.user && that.$store.state.login.userInfo.user.headImgUrl){
			that.headImgUrl = that.$store.state.login.userInfo.user.headImgUrl
		}
		let token = uni.getStorageSync('token')
		console.log('token',token)
		if(token){
			that.token = token
		}
		let mobile = uni.getStorageSync('mobile')
		that.mobile = mobile
	},
	methods: {
		onChooseavatar(e) {
			console.log(e,'1211');
			// return;
			let that = this;
			const { avatarUrl } = e.detail;
			that.fdsa = avatarUrl;
			that.uploadFilePromise(avatarUrl)
		},
		uploadFilePromise(url) {
			let that = this
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.uploadUrl, // 仅为示例,非真实的接口地址
					filePath: url,
					name: 'file',
					header: {
						'Authorization': `Bearer ${uni.getStorageSync('token')}`
					},
					success: (res) => {
						const {
							data
						} = JSON.parse(res.data);
						that.updateUser({headImgUrl:data.url})
		
						setTimeout(() => {
							resolve(data.url)
						}, 1000)
					}
				});
			})
		},
		inputNameConfirm(e) {
			console.log('======inputNameConfirm:', e.detail.value);
			let that = this
			this.updateUser({nickname:e.detail.value})
		},
		async updateUser(data){
			let that = this
			const back_data = await updateUserMsg(data)
			console.log(back_data)
			const {code} = back_data
			if(code === 200){
				uni.showToast({
					title:'修改成功!',
					icon:'none'
				})
			}
		},
		clickJumpNPage(row) {
			if (row.url) {
				this.$uniGo.navigateTo({
					url: row.url
				});
			}
		},
		handleLogin(){
			if(this.token){
				uni.showModal({
					content: '是否要退出登录',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title:'退出成功!',
								icon:'none'
							})
							//执行退出
							uni.clearStorageSync()
							this.token = uni.getStorageSync('token')
						}
					}
				})
			}else{
				this.$uniGo.navigateTo({
					url:'/my/login/login'
				})
			}
			
		}
	}
};
</script>

<style>
page {
	background-color: #f7f8f9;
}
</style>
<style lang="scss" scoped>
.content {
	&-bg {
		width: 100%;
		height: 340rpx;
		position: absolute;
		top: 0%;
		left: 0%;
		z-index: -1;
	}
	&-in {
		width: calc(100% - 30rpx * 2);
		margin: 0rpx 30rpx 0;
		&-info {
			padding: 35rpx 30rpx;
			background-color: #ffffff;
			border-radius: 14rpx;
			margin-bottom: 16rpx;
			&-l {
				width: 120rpx;
				height: 120rpx;
				margin: 0 30rpx 0 0;
				padding: 0rpx;
				border: none;
				outline: none;
				background: transparent;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			&-l::after {
				border: none;
			}
			&-r {
				&-t {
					margin-bottom: 17rpx;
					input,
					text {
						font-size: 36rpx;
						font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
						font-weight: 500;
						color: #666666;
						margin-right: 34rpx;
					}
					image {
						width: 32rpx;
						height: 32rpx;
						margin-top: 5rpx;
					}
				}
				&-b {
					font-size: 24rpx;
					font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
					font-weight: 400;
					color: #666666;
				}
			}
		}
		&-item {
			padding: 26rpx 22rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			margin-bottom: 16rpx;
			position: relative;
			&-btn {
				position: absolute;
				top: 0%;
				left: 0%;
				padding: 0rpx;
				width: 100%;
				height: 100%;
				outline: none;
				border: none;
				background: transparent;
				border-radius: 10rpx;
			}
			&-btn::after {
				outline: none;
				border: none;
			}
			> image {
				width: 34rpx;
				height: 34rpx;
			}
			> view {
				font-size: 24rpx;
				font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
				font-weight: 400;
				color: #333333;
				image {
					margin-right: 12rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		&-item:last-child {
			margin-bottom: 0rpx;
		}
	}
}
</style>