<template>
	<view>
		<view class="header">
			<view class="u-flex user-box u-m-b-24">
				<view class="u-m-r-10" @click="login($store.state.vuex_hasLogin)">
					<u-avatar :src="userInfo.headImgUrl || userInfo.avatar||pic" size="140"></u-avatar>
				</view>
				<view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
					<view class="u-font-18 u-p-b-20"><b>智慧停车</b><span class="payee-no">工号：{{ userInfo.payeeNo || '请登录' }}</span></view>
					<view class="u-font-14 u-flex">
						<u-icon class="u-m-r-18" name="map-fill" color="#fff" size="38"></u-icon>
						{{ theRoad.roadName || '暂无' }}
					</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
				</view>
			</view>	
			<view class="header-total u-flex wrap">
				<view class="u-p-r-60">
					车位：{{ spaceInfo.spaceBusy }}/{{ spaceInfo.spaceTotal}}
				</view>
				<view class="">
					需确认：{{ spaceInfo.spaceConfirm}}
				</view>
			</view>
		</view>
		<view class="wrap">
			<view class="notice u-flex u-p-l-35 u-p-r-40">
				<u-image width="113rpx" height="83rpx" src="/static/img/tip.png"></u-image>
				<view class="notice-wrap u-flex-1">
					<u-notice-bar mode="vertical" :list="noticeList" :more-icon="true" :volume-icon="false" bg-color="#fff" color="#373737"></u-notice-bar>
				</view>
			</view>
			<view class="feature-list u-flex u-flex-wrap u-row-between">
				<view class="feature-item" @click="$refs.uToast.show({title: '建设中'})">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-01.png"></u-image>
					<view class="feature-item-text">签到</view>
				</view>
				<view class="feature-item" @click="$refs.uToast.show({title: '建设中'})">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-02.png"></u-image>
					<view class="feature-item-text">拍照取证</view>
				</view>
				<view class="feature-item" @click="$refs.uToast.show({title: '建设中'})">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-03.png"></u-image>
					<view class="feature-item-text">缴费</view>
				</view>
				<view class="feature-item" @click="$refs.uToast.show({title: '建设中'})">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-04.png"></u-image>
					<view class="feature-item-text">车位管理</view>
				</view>
				<view class="feature-item" @click="openPage('pages/parking/parking')">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-05.png"></u-image>
					<view class="feature-item-text">车辆入场</view>
				</view>
				<view class="feature-item" @click="openPage('pages/getout/getout')">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-06.png"></u-image>
					<view class="feature-item-text">车辆出场</view>
				</view>
				<view class="feature-item" @click="openPage('pages/modifypwd/modifypwd')">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-07.png"></u-image>
					<view class="feature-item-text">密码修改</view>
				</view>
				<view class="feature-item" @click="$refs.uToast.show({title: '建设中'})">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-08.png"></u-image>
					<view class="feature-item-text">设置</view>
				</view>
				<view class="feature-item" @click="logout">
					<u-image width="120rpx" height="120rpx" src="/static/img/index-feature-09.png"></u-image>
					<view class="feature-item-text">退出登录</view>
				</view>				
			</view>
			<u-bottom color="#949494"></u-bottom>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				userInfo:[],
				noticeList:['智慧停车车主端V0.1版本发布','智慧停车PDA端V0.1版本发布'],
				theRoad:[],
				spaceInfo:new Object,
			}
		},
		onLoad() {			
			
		},
		onShow() {
			if(this.$store.state.vuex_hasLogin){
				this.userInfo = this.$store.state.vuex_user;
				this.theRoad = this.$store.state.vuex_user?.roadList?.[0]||[];
				if(this.theRoad.roadNo){
					console.log('this.theRoad.roadNo',this.theRoad.roadNo)
					this.handleGetIndex(this.theRoad.roadNo);
				};
				console.log('this.theRoad',this.theRoad);
				console.log('this.userInfo',this.userInfo);
			}else{
				this.userInfo = [];
				this.openPage('pages/login/login');
			};
			
		},
		methods: {
			openPage(path) {
				// console.log('path',path);
				this.$u.route({ 
					url: path
				});
			},
			//登录判断
			login(status){
				if(!status){
					console.log('config',this.config);
					this.openPage('pages/login/login');
					// window.location.replace(this.config.loginUrl)
				}
			},
			logout(){
				uni.clearStorage();
				this.$u.vuex('vuex_token', null);
				this.$u.vuex('vuex_user', null);
				this.$u.vuex('vuex_hasLogin', false);
				this.userInfo = [];
				this.theRoad = [];
				this.$refs.uToast.show({
					title: '退出成功,即将跳转登录页!',
					type: 'success',
					url:'pages/login/login'
				});
				// this.$u.route(-1);
			},
			handleGetIndex(roadNo){
				this.$u.api.getIndex({roadNo:roadNo})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					this.spaceInfo = res.data.spaceInfo;
					console.log('this.spaceInfo',this.spaceInfo)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('handleGetIndex ',err)
				});
			},
			

		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>