<template>
	<view class="container">
		<!-- 顶部标题 -->
		<!-- <view class="header">
      <text class="title">我的</text>
    </view> -->

		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="avatar-wrapper">
				<image class="avatar" @click="avatarClick()" :src="userInfo.avatar" mode="aspectFill" @error="avatarError"></image>
			</view>
			<view class="user-detail">
				<text class="username">{{userInfo.nickName}}</text>
			</view>
			<view class="star-icon">
				<uni-icons type="star" size="24" color="#ff9900"></uni-icons>
			</view>
		</view>

		<!-- 我的服务区域 -->
		<view class="services">
			<text class="services-title">我的服务</text>
			<view class="grid-container">
				<!-- 个人信息 -->
				<view class="grid-item" @click="navigateTo('/pages/mine/me/index')">

					<view class="icon-wrapper">
						<!--            <uni-icons type="person" size="24" color="#666"></uni-icons>-->
						<image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
					</view>
					<text class="icon-text">个人信息</text>
				</view>

				<!-- 通知公告 -->
				<view class="grid-item" @click="navigateTo('/pages/mine/announcement/index')">
					<view class="icon-wrapper">
						<!--            <uni-icons type="notification" size="24" color="#666"></uni-icons>-->
						<image style="width: 28px;height: 28px;" src="/static/images/my/notice.png"></image>
					</view>
					<text class="icon-text">通知公告</text>
				</view>

				<!-- 投诉建议 -->
				<view class="grid-item" @click="navigateTo('/pages/feedback/index')">
					<view class="icon-wrapper">
						<!--            <uni-icons type="chat" size="24" color="#666"></uni-icons>-->
						<image style="width: 28px;height: 28px;" src="/static/images/my/complaints.png"></image>
					</view>
					<text class="icon-text">投诉建议</text>
				</view>

				<!-- 食堂评价 -->
				<view class="grid-item" @click="navigateTo('/pages/review/index')">
					<view class="icon-wrapper">
						<!--            <uni-icons type="star" size="24" color="#666"></uni-icons>-->
						<image style="width: 28px;height: 28px;" src="/static/images/my/evaluation.png"></image>
					</view>
					<text class="icon-text">食堂评价</text>
				</view>

				<!-- 体检报告 -->
				<view class="grid-item" @click="navigateTo('/pages/survey/index')">
					<view class="icon-wrapper">
						<!--            <uni-icons type="help" size="24" color="#666"></uni-icons>-->
						<image style="width: 28px;height: 28px;" src="/static/images/my/report.png"></image>
					</view>
					<text class="icon-text">体检报告</text>
				</view>
			</view>
		</view>

		<u-action-sheet :actions="list" :show="avatarShow" safeAreaInsetBottom closeOnClickOverlay cancelText="取消"
			round="10" @close="avatarShow = false" @select="avatarSelect"></u-action-sheet>
	</view>
</template>

<script>
	import {
		getUserProfile,
		uploadAvatar
	} from "@/api/system/user"
	import config from '@/config'
	import { getToken } from '@/utils/auth'
	import { showConfirm } from '@/utils/common'
	export default {
		data() {
			return {
				userInfo: {},
				defaultImg: '/static/images/my/face.png',
				avatarShow: false,
				list: [{
					name: '上传头像',
					val: 1
				}, {
					name: '查看头像',
					val: 2
				}]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : {}
			this.getUserInfo()
		},
		methods: {
			avatarClick() {
				this.avatarShow = true
			},
			
			avatarSelect(e) {
				if (e.val == 1) {
					uni.chooseImage({
						count: 1,
						success: chooseImageRes => {
							uni.showLoading({
								title: '上传中...'
							})
							uni.uploadFile({
								url: config.baseUrl + '/system/user/profile/avatar',
								filePath: chooseImageRes.tempFilePaths[0],
								name: 'avatarfile',
								header: {
									'Authorization': 'Bearer ' + getToken()
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes);
									if(uploadFileRes.statusCode == 200) {
										let reslut = JSON.parse(uploadFileRes.data)
										console.log('reslut',reslut)
										if(reslut.code == 200) {
											uni.showToast({ title: reslut.msg,icon: 'none' });
											this.getUserInfo()
										}else{
											uni.showToast({ title: reslut.msg,icon: 'none' });
										}
									}else if(uploadFileRes.statusCode == 401) {
										showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
										  if (res.confirm) {
										    uni.reLaunch({ url: '/pages/login/login' })
										  }
										})
									}else{
										uni.showToast({ title: uploadFileRes.errMsg,icon: 'none' });
									}
									uni.hideLoading()
								},
								fail: (uploadFileErr) => {
									let { message } = uploadFileErr
									if (message == 'Network Error') {
									  message = '后端接口连接异常'
									} else if (message.includes('timeout')) {
									  message = '系统接口请求超时'
									} else if (message.includes('Request failed with status code')) {
									  message = '系统接口' + message.substr(message.length - 3) + '异常'
									}
									uni.showToast({ title: message,icon: 'none' });
									uni.hideLoading()
								}
							});
						}
					});
				}else if(e.val == 2) {
					uni.previewImage({
						urls: [this.userInfo.avatar]
					});
				}
			},
			
			getUserInfo() {
				getUserProfile().then(res => {
					this.userInfo = res.user
					if(!this.userInfo.avatar) {
						this.userInfo.avatar = this.defaultImg
					}
					console.log('this.userInfo',this.userInfo)
					uni.setStorageSync('userInfo', this.userInfo)
				})
			},
			
			avatarError(e) {
				console.log(e)
				if (e.type == 'error') {
					this.userInfo.avatar = this.defaultImg
				}
			},
			
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 10vh;
		background-color: #F9FBFF;
	}

	.header {
		padding: 14px 16px 16px;
		background: #F9FBFF;

		.title {
			font-size: 18px;
			font-weight: 500;
			color: #333;
		}
	}

	.user-info {
		display: flex;
		align-items: center;
		padding: 16px;
		background: #fff;
		margin-bottom: 10px;

		.avatar-wrapper {
			margin-right: 12px;

			.avatar {
				width: 60px;
				height: 60px;
				border-radius: 30px;
			}
		}

		.user-detail {
			flex: 1;

			.username {
				margin-left: 12px;
				font-size: 18px;
				font-weight: 500;
				color: #333;
			}
		}

		.star-icon {
			padding: 8px;
		}
	}

	.services {
		background: #fff;
		padding: 16px;

		.services-title {
			font-size: 16px;
			color: #333;
			margin-bottom: 26px;

			font-weight: 400;
		}

		.grid-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;

			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon-wrapper {
					width: 48px;
					height: 48px;
					//border-radius: 24px;
					//background: #f5f5f5;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 3px;
				}

				.icon-text {
					font-size: 14px;
					color: #666;
				}
			}
		}
	}
</style>