<template>
	<view class="app status-bar-gap">
		<view class="page-bc"></view>
		<view class="page">
			<view style="display: flex;align-items: center">
				<view style="margin-right: 32rpx">
					<up-image :show-loading="true" src="../../static/images/ygtx.png" width="136rpx" height="136rpx"
						radius="136rpx"></up-image>
				</view>
				<view>
					<view class="nameTitle"># {{ state.userInfo.UserName }}</view>
					<view class="gysName">{{ state.userInfo.CustomName }}</view>
				</view>
			</view>
			<view class="common">
				<view class="type-bc">
					<view class="type-item type-item-gc" @tap="toPages('/pages/receive/index')">
						<view class="type-item-text">采购收料</view>
					</view>
					<view class="type-item type-item-gc" @tap="toPages('/pages/receive/index')">
						<view class="type-item-text">来料验证</view>
					</view>
					<view class="type-item type-item-gc" @tap="toPages('/pages/receive/index')">
						<view class="type-item-text">来料验证</view>
					</view>
					<view class="type-item type-item-gc" @tap="toPages('/pages/receive/index')">
						<view class="type-item-text">来料验证</view>
					</view> 
				</view>
			</view>

			<view class="input-box">
				<view class="input-item u-flex" style="justify-content: space-between;align-items: center">
					<view class="item-title">扫描记录</view>
					<up-icon name="play-right-fill" size="8"></up-icon>
				</view>
				<view class="input-item u-flex" style="justify-content: space-between;align-items: center">
					<view class="item-title">检查更新</view>
					<view>0.0.1</view>
				</view>
				<!-- <view class="input-item u-flex" style="justify-content: space-between;align-items: center">
					<view class="item-title">语言切换</view>
					<up-icon name="play-right-fill" size="8"></up-icon>
				</view> -->
				<!-- <view class="input-item u-flex" style="justify-content: space-between;align-items: center">
					<view class="item-title">语音播报</view>
					<up-icon name="play-right-fill" size="8"></up-icon>
				</view> -->
			</view>
			
			<view class="outLogin" @click="outLoginFun">退出登录</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { logout } from "../../common/request/api/api";
	const state = reactive({
		userInfo:{}
	})
	onShow(() => {
		console.log(uni.getStorageSync('userInfo').Context);
		state.userInfo = uni.getStorageSync('userInfo').Context
		console.log(state.userInfo);
	})
	const toPages = (url : string, data : any = {}) => {
		uni.$u.route({
			url: url,
			params: data
		})
	}
	const outLoginFun = () => {
		logout({}).then((res:any) => {
			uni.removeStorageSync('userInfo')
			uni.removeStorageSync('TOKEN')
			uni.reLaunch({
			    url: '/pages/client/account/login'
			});
		})
	}
</script>
<style lang="scss" scoped>
	.multi-line-omit {
		word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
		text-overflow: ellipsis; // 溢出用省略号显示
		overflow: hidden; // 超出的文本隐藏
		display: -webkit-box; // 作为弹性伸缩盒子模型显示
		-webkit-line-clamp: 1; // 显示的行
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
	}

	.app {
		background-color: #F5F5F5;

		.page-bc {
			position: fixed;
			top: 0;
			width: 100%;
			height: 640rpx;
			background: linear-gradient(180deg, rgba(46, 128, 254, 1) 0%, #F5F5F5 100%);
		}

		.page {
			z-index: 1;
			// margin-top: 68rpx;
			padding: 0 32rpx;

			.nameTitle {
				font-size: 44rpx;
				font-weight: 600;
			}

			.gysName {
				font-size: 28rpx;
				margin-top: 8rpx;
				// font-weight: 600;
			}

			.common {
				margin-top: 110rpx;
				min-height: 262rpx;
				background-color: #ffffff;
				border-radius: 24rpx;
				box-sizing: border-box;
				padding:28rpx 28rpx 0 28rpx;

				.title {
					padding: 26rpx 0 23rpx 0;
				}

				.type-bc {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					// margin-top: 120rpx;

					.type-item {
						width: calc(50% - 16rpx);
						height: 160rpx;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						background-position: center;
						margin-bottom: 24rpx;
						border-radius: 22rpx;
						overflow: hidden;
					}

					.type-item-text {
						color: white;
						font-weight: 600;
						font-size: 36rpx;
						font-family: PingFang SC;
						margin: 24rpx;
					}

					.type-item-gc {
						background-image: url(../../static/bc/homeBcItem.png);
					}
				}
			}

			.input-box {
				background-color: white;
				box-sizing: border-box;
				padding: 0 16rpx;
				border-radius: 16rpx;
				margin: 16rpx 0;

				.u-textarea {
					padding: 0 !important;
					font-size: 24rpx !important;
					color: #999999 !important;
				}

				.input-item {
					box-sizing: border-box;
					padding: 24rpx 16rpx;
					color: #222222;
					font-size: 28rpx;
					font-weight: 400;
					border-bottom: 1rpx solid #EBEBEB;

					.item-title {
						//font-weight: 500;
						font-size: 30rpx;
						color: #333333;
					}

					.item-text {
						font-weight: 400;
						font-size: 27rpx;
						color: #999999;
					}
				}
			}
			.outLogin{
				margin: 80rpx auto;
				width: 75%;
				text-align: center;
				background-color: rgba(46, 128, 254, 1);
				color: #ffffff;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 80rpx;
			}
		}
	}
</style>