<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '个人',
	},
	}
</route>

<template>
	<PageLayout :navbarShow="false">
		<view :class="{'gray': appStore.isGray == 1 }">
			<view class="avatar-area">
				<wd-img width="100" height="100" :round="true" :radius="50"
					:src="getFileAccessHttpUrl(userStore.userInfo.avatar)" @click="ChooseImage"></wd-img>
			</view>
			<view class="info-area shadow-warp mb-5">
				<view class="user">
					<wd-text custom-class="title" :text="userStore.userInfo.realname"></wd-text>
					<view class="tag">
						<view class="cuIcon-people mr-1"></view>
						<wd-text text="用户"></wd-text>
					</view>
				</view>
				<view class="department">
					<wd-text custom-class="title" :text="userStore.userInfo.department"></wd-text>
					<view class="tag">
						<view class="cuIcon-group mr-1"></view>
						<wd-text text="单位"></wd-text>
					</view>
				</view>
				<view class="job">
					<wd-text custom-class="title" :text="post"></wd-text>
					<view class="tag">
						<view class="cuIcon-news mr-1"></view>
						<wd-text text="职务"></wd-text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y>
				<wd-cell-group custom-class="shadow-warp" border clickable>
					<template v-for="(item, index) in dataSource" :key="index">
						<wd-cell :title="item.title" is-link @click="handleCell(item)">
							<template #icon>
								<view :class="item.class" class="mr-2"></view>
							</template>
						</wd-cell>
					</template>
				</wd-cell-group>
			</scroll-view>
		</view>
	</PageLayout>
</template>

<script lang="ts" setup>
	import { ref, watch, onBeforeUnmount } from 'vue'
	import { getFileAccessHttpUrl } from '@/common/uitls'
	import { onLoad } from '@dcloudio/uni-app'
	import { useToast, useMessage } from 'wot-design-uni'
	import { useRouter } from '@/plugin/uni-mini-router'
	import { http } from '@/utils/http'
	import { useUserStore } from '@/store/user'
	import useUpload from '@/hooks/useUpload'
	import { getEnvBaseUrl } from '@/utils/index'
	import { queryPostByUserIdApi, editUserApi } from '@/api/system/user'
	import { useAppStore } from '@/store'

	const userStore = useUserStore()
	const appStore = useAppStore()
	const toast = useToast()
	const router = useRouter()
	const message = useMessage()
	const post = ref('')
	let stopWatch : any = null

	const dataSource = [
		// { key: 'collect', title: '收藏', class: 'cuIcon-favorfill text-yellow' },
		// { key: 'redPacket', title: '红包', class: 'cuIcon-redpacket_fill text-red' },
		{ key: 'setting', title: '个人资料', class: 'cuIcon-settingsfill text-cyan' },
		{ key: 'scan', title: '扫码', class: 'cuIcon-scan text-red' },
		// { key: 'location', title: '定位', class: 'cuIcon-location text-cyan' },
		{ key: 'exit', title: '退出', class: 'cuIcon-exit text-cyan' },
	]

	const load = () => {
		//根据userid获取职位名称
		queryPostByUserIdApi(userStore.userInfo.userid).then((res : any) => {
			post.value = res
		})
	}

	const ChooseImage = () => {
		uni.showLoading({ title: '上传中...' })
		const { loading, data, error, run } = useUpload({ name: 'file' }, { url: `${getEnvBaseUrl()}/sys/common/upload?appPath=用户头像/` + userStore.userInfo.realname })
		if (stopWatch) stopWatch()
		run()
		stopWatch = watch(
			() => [loading.value, error.value, data.value],
			([loading, err, data]) => {
				if (loading == false) {
					if (err) {
						toast.warning('修改失败')
						uni.hideLoading()
					} else {
						if (data) {
							editAvatar(data.message)
						}
					}
				}
			},
		)
	}
	const editAvatar = (avatar) => {
		editUserApi({ id: userStore.userInfo.userid, avatar }).then((res : any) => {
			if (res.success) {
				toast.success('修改成功~')
				userStore.editUserInfo({ avatar: getFileAccessHttpUrl(avatar) })
			} else {
				toast.warning(res.message)
			}
			uni.hideLoading()
		})
			.catch((err) => {
				uni.hideLoading()
				toast.warning('修改失败')
			})
	}
	const scan = () => {
		// #ifndef H5
		uni.scanCode({
			success: function (res) {
				console.log('条码res：' + res)
				console.log('条码类型：' + res.scanType)
				console.log('条码内容：' + res.result)
				//条码内容包含QRCODELOGIN则是去扫码登录的逻辑
				if (res.result.indexOf('QRCODELOGIN') != -1) {
					const data = {
						qrcodeId: res.result,
						token: userStore.userInfo.token,
					}
					http({
						url: '/sys/scanLoginQrcode',
						data,
						header: { 'content-type': 'application/x-www-form-urlencoded' },
						method: 'POST',
					}).then((res : any) => {
						console.log('扫码接口返回内容res：', res)
						if (res.success) {
							toast.success(res.result)
						} else {
							toast.warning(res.result)
						}
					})
				}
			},
		})
		// #endif
		// #ifdef H5
		toast.warning('H5暂不支持')
		// #endif
	}
	const exit = () => {
		console.log(message)
		message
			.confirm({
				title: '提示',
				msg: '确定退出吗？',
			})
			.then(() => {
				userStore.clearUserInfo()
				uni.removeStorageSync('logintime') //清除登录时间
				router.replaceAll({ name: 'login' })
			})
	}
	const handleCell = (item) => {
		switch (item.key) {
			case 'scan':
				scan()
				break
			case 'setting':
				router.push({ name: 'userEdit' })
				break
			case 'exit':
				exit()
				break
			default:
				toast.show('功能暂未开发~')
		}
	}
	onBeforeUnmount(() => {
		stopWatch?.()
	})
	onLoad(() => {
		load()
	})
</script>

<style lang="scss" scoped>
	//
	.avatar-area {
		/* #ifdef MP-WEIXIN */
		background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
		/* #endif */
		/* #ifndef MP-WEIXIN */
		background-image: url('@/static/blue.png');
		/* #endif */
		background-size: cover;
		height: 400upx;
		display: flex;
		justify-content: center;
		padding-top: 40upx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.info-area {
		display: flex;
		padding: 30upx;
		background-color: #fff;
		color: #8799a3;
		justify-content: space-around;
		/* 新增：均匀分配空间 */

		:deep(.wd-text) {
			color: var(--color-gray);
		}

		.user,
		.job,
		.department {
			flex: 1 1 auto;
			/* 修改：允许项目增长 */
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 15upx;
			/* 新增：增加内边距扩大间距 */
			min-width: 0;
			/* 新增：防止文本溢出 */

			.tag {
				display: flex;
				align-items: center;
			}

			.wd-text.title {
				font-size: 18px;
				min-height: 18px;
				margin-bottom: 16upx;
				white-space: nowrap;
				/* 新增：防止文本换行 */
				overflow: hidden;
				/* 新增：隐藏溢出 */
				text-overflow: ellipsis;
				/* 新增：显示省略号 */
				max-width: 100%;
				/* 新增：限制最大宽度 */
			}
		}

		.user {
			border-right: 0.5px solid rgba(0, 0, 0, 0.1);

			.wd-text.title {
				color: #f37b1d;
			}
		}

		.job {
			.wd-text.title {
				color: #39b54a;
			}
		}

		.department {
			border-right: 0.5px solid rgba(0, 0, 0, 0.1);

			.wd-text.title {
				color: #aa00ff;
			}
		}
	}

	:deep(.wd-cell-group) {
		margin: 0 26upx;
		border-radius: 18upx;
		overflow: hidden;
		--wot-cell-line-height: 32px;

		.wd-cell {
			--wot-cell-title-fs: 15px;
			--wot-cell-title-color: var(--color-gray);

			.wd-cell__left {
				font-size: 15px;
			}
		}
	}
</style>