<template>
	<view class="user-container">
		<view class="flex-col page">
			<view class="flex-col justify-start relative section">
				<view class="shrink-0 section_2"></view>
				<u-avatar class="shrink-0 image pos" :showLoading="true" size="64px" :src="avatar"
					@click="avatarClick"></u-avatar>
				<text class="text pos_2">{{nickName}}</text>
				<view class="flex-row justify-between section_4 pos_4">
					<text class="font">部门：{{deptName}}</text>
					<!-- <text class="font">手机号：{{userInfo.phonenumber}}</text> -->
				</view>
			</view>
			<!-- <uni-card class="card-box" is-shadow>
				<u-grid :border="false" @click="gridClick" col="3">
					<u-grid-item v-for="(baseListItem,baseListIndex) in gridList" :key="baseListIndex"
						:name="baseListItem.url">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="48"></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</uni-card> -->
			<view class="custom-cell-group">
				<view class="custom-cell" @click="handleFeedbackClick">
					<image src="/static/images/user-icons/server-man.svg" class="custom-cell-icon"></image>
					<text class="custom-cell-title">问题反馈</text>
					<view class="custom-cell-arrow">></view>
				</view>
				<view class="custom-cell" @click="handleSettingsClick">
					<image src="/static/images/user-icons/setting-fill.svg" class="custom-cell-icon"></image>
					<text class="custom-cell-title">个人设置</text>
					<view class="custom-cell-arrow">></view>
				</view>
				<view class="custom-cell">
					<image src="/static/images/user-icons/level.svg" class="custom-cell-icon"></image>
					<text class="custom-cell-title">版本号</text>
					<text class="custom-cell-value">{{version}}</text>
				</view>
			</view>
			<view class="out-button-box">
				<u-modal :show="outLoginShow" title="退出登录" showCancelButton content='是否注销,并退出登录？'
					@cancel="outLoginShow = false" @confirm="outLogin"></u-modal>
				<u-button type="primary" text="退出登录" @click="outLoginShow = true"></u-button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		mapActions
	} from 'vuex'
	export default {
		components: {},
		props: {},
		computed: {
			// 使用对象展开运算符将 getter 混入 computed 对象中
			...mapGetters([
				'name',
				'nickName',
				'deptName',
				'avatar',
			])
		},
		onLoad() {
			this.version = uni.$u.sys().appWgtVersion;
		},
		onShow() {
			this.GetInfo();
		},
		data() {
			return {
				version:'V2.1.2',
				outLoginShow: false,
				gridList: [{
						name: 'photo',
						title: 'agv',
						url: '/pages/agv/agv'
					},
					// {
					// 	name: 'lock',
					// 	title: '帮助',
					// 	url: ''
					// },
					// {
					// 	name: 'star',
					// 	title: '客服',
					// 	url: ''
					// },
				]
			};
		},

		methods: {
			...mapActions([
				'LogOut',
				'GetInfo'
			]),
			avatarClick() {

			},
			gridClick(url) {
				if (url === '') {
					return;
				}
				uni.navigateTo({
					url
				});
			},
// 处理问题反馈点击事件
				handleFeedbackClick() {
					// 处理问题反馈点击事件
				},
				handleSettingsClick() {
					// 处理个人设置点击事件
				},
			// 退出登录
			outLogin() {
				this.LogOut().then(() => {
					// 退出登录成功处理
				}).catch((error) => {
					// 退出登录失败处理
				});
				this.outLoginShow = false;
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}, 500)
			}
		},
	};
</script>

<style scoped>
	@import url("user.css");
</style>