<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 src="@/static/icon/my03.png" mode=""></image>
				</button>
				<view class="content-in-info-r">
					<view class="content-in-info-r-t baiyin-flex">
						<text v-if="nameDisabled">用户名称</text>
						<input v-else confirm-type="确定" @confirm="inputNameConfirm" maxlength="15" type="text" value="用户名称" />
						<image src="@/static/icon/my02.png" mode="" @click="nameDisabled = !nameDisabled"></image>
					</view>
					<view class="content-in-info-r-b">手机号:12385757454</view>
				</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="退出登录"
					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';
export default {
	data() {
		return {
			imgBgUrl: apiBaseConfig.imgBgUrl,
			globalData: getApp().globalData,
			scrollTopHeader: 0,
			nameDisabled: true,
			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'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		...mapMutations(['upDateUserInfoMount']),
		onChooseavatar(e) {
			console.log(e);
			return;
			let self = this;
			const { avatarUrl } = e.detail;
			this.fdsa = avatarUrl;
			console.log(avatarUrl, e, 'fsdafdsa');
			wx.getFileSystemManager().readFile({
				filePath: avatarUrl, //选择图片返回的相对路径
				encoding: 'base64', //编码格式
				success: res => {
					//成功的回调
					console.log(res);
					console.log(res.data);
					userUpdatePOST({
						headImgUrl: res.data
					}).then(res => {
						console.log(res.code, 'pppppppppppp');
						if (res.code === 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							});
							console.log(111111111111);
							// self.upDateUserInfoMount();
						}
					});
				}
			});
		},
		inputNameConfirm(e) {
			console.log('======inputNameConfirm:', e);
		},
		clickJumpNPage(row) {
			if (row.url) {
				this.$uniGo.navigateTo({
					url: row.url
				});
			}
		},
		handleLogin(){
			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>