<template>
	<view class="header">
		<view class="title text-center">局长信箱即接即办系统</view>
		<view class="flex gap user v-center">
			<image class="avatar" src="/static/images/user.png" mode="aspectFit"></image>
			<view>
				<view class="mb-4">
					<text class="mr-8">{{ store.state.user.name }}</text>
					<text>{{ store.state.user.empNo }}</text>
				</view>
				<view>
					<text>{{ store.state.user.roleName }}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="body">
		<fui-list>
			<fui-list-cell arrow @tap="goFav">
				<text>我的收藏</text>
			</fui-list-cell>
			<fui-list-cell arrow :marginTop="30" @tap="goSupport">
				<text>服务支持</text>
			</fui-list-cell>
		</fui-list>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import store from '@/store'
	
	onShow(() => {
		if (!store.state.user.id) {
			store.commit('setUser')
		}
	})
	
	function goFav() {
		uni.navigateTo({
			url: `fav`
		});
	}
	
	function goSupport() {
		uni.navigateTo({
			url: `support`
		});
	}
</script>

<style lang="scss" scoped>
	.header {
		background: linear-gradient( 180deg, #162582 0%, #314CB8 100%);
		color: #fff;
		padding-top: 40px;
		.title {
			font-size: 19px;
			padding: 12px;
		}
		.user {
			padding: 32px 16px;
			font-size: 16px;
			line-height: 22px;
			.avatar {
				width: 60px;
				height: 60px;
				margin-right: 18px;
			}
		}
	}
	.body {
		background: #F1F1F1;
		padding: 12px;
	}
</style>