<template>
	<view class="container container1">
		<image src="/static/banner_c.png" 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>
		<view style="height: 12rpx;"></view>
		<uni-row :gutter="12">
			<uni-col :span="12" style="border-radius: 20upx;">
				<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-grid :column="5" :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>
</template>

<script>
	import tool from "../../utils/tools.js";
	export default {
		data() {
			return {
				welTitle: "",
				imageSrc:"",
				currentDate: tool.getTodayDate(),
				moduleList: [
					{
						navigate:'/pages/ofm/booking_form?mode=add',
						url: '/static/yuding.png',
						text: '会议预定',
						type: "primary",
					},
					{
						navigate:'/pages/ofm/sealForm?mode=add',
						url: '/static/meetingRecord.png',
						text: '印章申请',
						type: "success"
					},
					{
						navigate:'/pages/ofm/vehicleForm?mode=add',
						url: '/static/meetingRecord.png',
						text: '用车申请',
						type: "success"
					},
					{
						navigate:'/pages/ofm/borrowfile_form?mode=add',
						url: '/static/meetingRecord.png',
						text: '档案借阅',
						type: "success"
					},
					{
						navigate:'/pages/ofm/publicityForm?mode=add',
						url: '/static/huiyishi.png',
						text: '宣传报道',
						type: "warning"
					},
					{
						navigate:'/pages/srm/patent_form?mode=add',
						url: '/static/huiyishi.png',
						text: '专利审批',
						type: "warning"
					},
					{
						navigate:'/pages/srm/paperse_form?mode=add',
						url: '/static/huiyishi.png',
						text: '论文申密',
						type: "warning"
					},
					{
						navigate:'/pages/srm/plant_form?mode=add',
						url: '/static/huiyishi.png',
						text: '平台审批',
						type: "warning"
					},
					{
						navigate:'/pages/srm/project_form?mode=add',
						url: '/static/huiyishi.png',
						text: '立项审批',
						type: "warning"
					},
					{
						navigate:'/pages/hrm/resignation_form?mode=add',
						url: '/static/huiyishi.png',
						text: '离职申请',
						type: "warning"
					},
					{
						navigate:'/pages/pum/supplieraudit_form?mode=add',
						url: '/static/huiyishi.png',
						text: '供应商审批',
						type: "warning"
					}
				]
			}
		},
		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
				})
			},
			cameraClick(){
				uni.chooseImage({
				  count: 1, // 默认选择1张图片
				  sourceType: ['album', 'camera'], // 支持相册和相机
				  success: function (res) {
				    // 返回选择或拍摄的图片路径
				    console.log(res.tempFilePaths[0]);
				  },
				  fail: function (err) {
				    console.log('选择或拍照失败', err);
				  }
				});
			},
		}
	}
</script>
<style lang="scss">
	.container1{
		background-color: rgba(255,255,255,0);
	}
	.image {
		width: 60upx;
		height: 60upx;
		padding: 5upx;
		border-radius: 20upx;
		background-color: #2979ff;
	}

	.text {
		font-size: 24upx;
		margin-top: 10upx;
	}

	.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;
		border-radius: 10upx;
	}
	.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>
