<template>
	<view class="container">
	<image src="/static/banner.jpg" mode="widthFix" style="width:100%"></image>
	<uni-section :title="welTitle" type="circle" titleFontSize="15px" titleColor="#0000CD"
	 @click="goUserInfo">
		<template v-slot:right>
			<span style="color:gray">{{currentDate}}</span>
		</template>
	</uni-section>
	<uni-section title="功能入口" type="line">
		<uni-grid :column="4" :show-border="false" :square="false">
			<uni-grid-item v-for="(item ,index) in moduleList" :index="index" :key="index">
				<view class="grid-item-box" @click="pageEnter(item)">
					<image class="image" :src="item.url" mode="aspectFill" />
					<text class="text">{{item.text}}</text>
					<view v-if="item.badge" class="grid-dot">
						<uni-badge :text="item.badge" :type="item.type" />
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
	</uni-section>
	<view style="height: 12rpx;"></view>
	<uni-row :gutter="12">
		<uni-col :span="12">
			<navigator class="middleNavigator" url="../wf/index?category=duty">
				<span>待办</span>
				<span class="numSpan">3</span>
			</navigator>
		</uni-col>
		<uni-col :span="12">
			<navigator class="middleNavigator" url="../wf/index?category=owner">
				<span>我的</span>
				<span class="numSpan">3</span>
			</navigator>
		</uni-col>
	</uni-row>
	<view style="height: 12rpx;"></view>
	<uni-section title="列表信息" type="line">
		<uni-list>
			<uni-list-item v-for="(item ,index) in moduleList" :index="index" :key="index" :title="item.text">

			</uni-list-item>
		</uni-list>
	</uni-section>
	</view>
</template>

<script>
	import tool from "../../utils/tools.js";
	export default {
		data() {
			return {
				welTitle: "",
				currentDate: tool.getTodayDate(),
				moduleList: [{
						navigate:'/pages/ofm/booking',
						url: '/static/yuding.png',
						text: '预定会议室',
						type: "primary",
					},
					{
						navigate:'/pages/ofm/bookingRecord',
						url: '/static/meetingRecord.png',
						text: '历史预定',
						type: "success"
					},
					{
						navigate:'/pages/ofm/mroom',
						url: '/static/huiyishi.png',
						text: '会议室列表',
						type: "warning"
					},
					{
						url: '/static/renyuan.png',
						text: '人员列表',
						type: "error"
					}
				]
			}
		},
		mounted() {
					this.initWelTitle();
					
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
		},
		methods: {
			initWelTitle() {
				let userInfo = uni.getStorageSync("userInfo")
				let name = userInfo.name;
				this.welTitle = `欢迎您, ${name}!`
			},
			goUserInfo() {
				uni.navigateTo({
					url: "/pages/system/userInfo"
				})
			},
			pageEnter(item){
				uni.navigateTo({
					url:item.navigate
				})
			},
		}
	}
</script>
<style lang="scss">
	.image {
		width: 120rpx;
		height: 120rpx;
		padding: 10rpx;
		border-radius: 30rpx;
		background-color: #2979ff;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
	.middleNavigator{
		padding: 28rpx;
		background-color: white;
		display: flex;
		justify-content : space-between;
	}
	.numSpan{
		color: #2979ff;
		font-size: 36rpx; 
		font-weight: bold;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
