<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" @change="change">
			<uni-grid-item v-for="(item ,index) in moduleList" :index="index" :key="index">
				<view class="grid-item-box">
					<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 style="padding: 28rpx;background-color: white;display: flex;justify-content : space-between;" url="../wf/index?category=duty">
				<span>待办</span>
				<span style="color: #2979ff;font-size: 36rpx; font-weight: bold;">3</span>
			</navigator>
		</uni-col>
		<uni-col :span="12">
			<navigator style="padding: 28rpx;background-color: white;display: flex;justify-content : space-between;" url="../wf/index?category=owner">
				<span>我的</span>
				<span style="color: #2979ff;font-size: 36rpx; font-weight: bold;">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: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: '全部'
					}
				]
			}
		},
		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"
				})
			},
		}
	}
</script>
<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

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

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #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;
	}

	.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>
