<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<view class="box">
			<view>头像</view>
			<view style="display: flex;align-items: center;">
				<button class="head-btn" @click="chooseAvatar">
					<image class="head-img" v-if="!form.avatar" :src="imgUrl(store.userinfo.avatar)" mode="">
					</image>
					<image class="head-img" v-else :src="imgUrl(form.avatar)"></image>
				</button>
				<uni-icons type="right" size="24"></uni-icons>
			</view>
		</view>
		<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
			<view>姓名</view>
			<input disabled style="text-align: right;" type="nickname"
				placeholder-style="font-size: 32rpx;color: #999999;" v-model="store.userinfo.realname"
				placeholder="请输入姓名" />
		</view>
		<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
			<view>手机号</view>
			<input style="text-align: right;" type="nickname" v-model="store.userinfo.phone"
				placeholder="请输入手机号" placeholder-style="font-size: 32rpx;color: #999999;" />
		</view>
		<view class="box" style="padding-top: 30rpx;padding-bottom: 30rpx;">
			<view>劳动合同号</view>
			<input style="text-align: right;" type="nickname" disabled v-model="store.userinfo.workNo"
				placeholder="请输入劳动合同号" placeholder-style="font-size: 32rpx;color: #999999;" />
		</view>
	</view>
	<view class="line">

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		userEditApi,
	} from '@/api/api.js';
	import {
		beforeJump,
		imgUrl
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';
	const baseUrl = import.meta.env.VITE_REQUEST_BASE_URL + '/jeecg-boot/sys/common/upload'
	const store = useStore()

	const jump = (url) => {
		beforeJump(url, () => {
			uni.navigateTo({
				url
			})
		})
	}
	const chooseAvatar = () => {
		uni.chooseImage({
			count: 1,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				const photoPath = '用户头像/' + store.userinfo.realname
				uni.uploadFile({
					url: baseUrl, //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
						appPath: photoPath
					},
					success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						form.avatar = JSON.parse(res.data).message
						userEditApi({
							avatar: form.avatar,
							id: store.userinfo.id
						}).then((res) => {
							if (res) {
								uni.showToast({
									title: res,
									icon: 'success',
									duration: 2000
								})
							}
						}).catch((err) => {
							console.log(err);
						})
					},
					fail(err) {
						console.log('图片上传出错', err);
					}
				});
			}
		});

	}

	const form = reactive({
		avatar: '',
		realname: '',
		phone: ''
	})
	onLoad(() => {
		uni.setNavigationBarColor({
			frontColor: "#ffffff",
			backgroundColor: '#bebebe'
		})
	})
</script>

<style scoped lang="scss">
	.choose {
		font-size: 32rpx;
		color: #999999;
	}

	.choosed {
		font-size: 32rpx;
		color: #333333;
	}

	button::after {
		display: none;
	}

	.content {
		padding: 30rpx 30rpx 0 30rpx;

		.box:not(:last-child) {
			border-bottom: 1rpx solid #EFEFEF;
		}

		.box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			font-size: 32rpx;
			color: #333333;

			button {
				background-color: #fff;
				margin: 0;
				padding: 0;
				border: none;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #f8f8f8;
				}
			}

			.value {
				color: #999999;
			}
		}

		.out_login {
			color: #ED361D;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 60rpx;
			text-align: center;
		}
	}

	.line {
		height: 10rpx;
		background: #F8F8F8;
	}

</style>