<template>
	<view class="hzIndex">
		<hzHeader title="智慧后勤"></hzHeader>
		<view class="hzContent">
			<view class="banner">
				<swiper autoplay :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image @click="banJump(item)" :src="item.src"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 一级入口 -->
			<view class="routeAreaA">
				<view class="routeBox" v-for="(item,index) in firstMenus" :key="index" @click="navTo(item.url,'',[])">
					<image :src="item.src"></image>
					<view class="title">{{item.name}}</view>
				</view>
			</view>
			<!-- 二级入口 -->
			<view class="routeAreaB">
				<view class="routeBox" style="background-image: linear-gradient(to right, #e0efff, #d4e6ff);"
					@click="goNotice()">
					<image src="../../static/index/area2_wait.png" alt=""></image>
					<view class="msg" v-if="unReadNum == 0">暂无待办事项</view>
					<view class="msg" v-else>待办事项
						<span class="num">{{ unReadNum }}</span>
					</view>
				</view>
				<view class="routeBox msgs" style="background-image: linear-gradient(to right, #dbf7ff, #cff1ff);">
					<image src="../../static/index/area3_wait.png" alt=""></image>
					暂无提交申请
				</view>
			</view>
			<!-- 三级入口 -->
			<view class="routeAreaC">
				<view class="perItem" v-for="(item, index) in permissions" :key="index"
					v-if="item.isOpen == 0 && (index<9 || moreMenu )"
					@click="navTo(item.pageUrl,item.code,item.children)">
					<image :src="item.iconUrl"></image>
					<view>{{item.name}}</view>
				</view>
				<view class="perItem" v-if="permissions.length>9&&!moreMenu" @click="goMore()">
					<image src="/static/index/gd.png"></image>
					<view>更多</view>
				</view>
				<view class="perItem" v-if="moreMenu" @click="moreMenu = false">
					<image></image>
					<view>收起</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="noticeMode">
				<view class="title">信息公告
					<view class="more" @click="navTo('/pages/hqfb/hqfb2?infoType=1','',[])">
						<text>查看更多</text>
						<image src="@/static/index/toAll.png" mode=""></image>
					</view>
				</view>
				<view class="msgList" v-for="(item,index) in backlogData" @click="goNoticeView(item.id)">
					<view class="listMsg">
						<view class="msgContant">{{item.title}}</view>
						<view class="dept">{{item.releaseDeptName}}
							<view class="date">{{item.updateTime}}</view>
						</view>
					</view>
					<view class="msgImg" v-if="item.thumbnail">
						<img :src="item.thumbnail" alt="">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import listCell from '@/components/mix-list-cell';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import clipboard from '@/js_sdk/dc-clipboard/clipboard.js';
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import hzHeader from '@/components/hzHeader/hzHeader.vue';
	import {
		iOpenidGetUserInfo,
		getBacklogInfo,
		getUserPers,
		getUnReadNum,
		getBannerList
	} from '@/common/api.js';
	import {
		callbackRequest,
		callbackRequestNoLoading,
		setStorage,
		getStorage,
		sureAlterTip,
		devEnv,
		alertTip,
		wxSdk,
		formatImgUrl,
		formatDate
	} from '@/common/util.js';
	export default {
		components: {
			uniIcons,
			hzHeader,
			listCell,
			uniPopup
		},
		data() {
			return {
				firstMenus: [{
					name: '服务指南',
					url: '/pages/service-guide/service-guide',
					src: require('@/static/index/fwzn.png')
				}, {
					name: '外卖预定',
					url: '/pages/take-out2/take-out3',
					src: require('@/static/index/wmyd.png')
				}, {
					name: '健康打卡',
					url: '/pages/epidemic/travel-health',
					src: require('@/static/index/jkdk.png')
				}, {
					name: '周菜食谱',
					url: '/pages/weekmenu/weekcarte',
					src: require('@/static/index/mzcp.png')
				}],
				formatDate: formatDate,
				formatImgUrl: formatImgUrl,
				list: [
					'您今日有访客1人，请注意查看预约信息'
					//,'您今日有预约菜品，请及时取餐','您今日有预约空调维修，请注意接听维修师傅电话',
				],
				idtoke: '',
				currentUser: {},
				userId: getStorage('userInfo').userId,
				deptId: getStorage('userInfo').deptId,
				backlogData: {}, //待办事项
				bannerList: //getStorage('bannerList'),

					[{
							src: "/static/images/indexbanner/bannerfwzn.png",
							url: "/pages/service-guide/service-guide"
						},
						{
							src: "/static/images/indexbanner/bannermrcp.png",
							url: "/pages/weekmenu/weekcarte"
						},
						// s{src:"/static/images/indexbanner/bannerscjd.png",url:"/pages/monitor/monitor"},
					],
				permissions: [], // 权限列表
				userInfo: getStorage('userInfo'),
				appcode: "DJ",
				certificate: "R65G708e5I4",
				tokenInfo: "",
				iscId: "",
				showFlag: false,
				loadFlag: 0,
				bool: false,
				unReadNum: 0,
				moreMenu: false
			};
		},
		onLoad() {
			sessionStorage.setItem("1001093_exitSessionF", true);
			uni.showLoading({
				title: '请稍后'
			});
			this.iscId = getStorage('iscId');
			this.getUinfoSync(this.iscId);
			this.getUnReadNum(this.iscId);
		},
		onReady() {
			this.showFlag = true;
		},
		computed: {
			...mapState(['authUrl'])
		},
		methods: {
			...mapMutations(['updateAuthUrl', 'login']),
			getUnReadNum(pnum) {
				let data = {
					method: getUnReadNum,
					data: {
						userId: pnum,
					}
				};
				callbackRequestNoLoading(data).then(res => {
					if (res.data.returnCode == 1) {
						if (res.data.returnData > 0) {
							uni.setTabBarBadge({
								index: 1,
								text: res.data.returnData + ''
							})
							this.unReadNum = res.data.returnData + '';
							console.log('getUnReadNum', this.unReadNum);
						}
					} else {}
				});
			},
			getBannerInfo(useri) {
				let data = {
					method: getBannerList,
					data: {
						userId: useri.userId,
						roleId: useri.role
					}
				};
				callbackRequestNoLoading(data).then(res => {
					if (res.data.returnCode == 1) {
						// uni.setStorage({
						// 	key: "bannerList",
						// 	data: res.data.returnData
						// })
						uni.setStorageSync('bannerList', res.data.returnData);
						this.bannerList = getStorage('bannerList');
					} else {}
				});
			},

			// 更新用户信息
			getUinfoSync(pnum) {
				let data = {
					method: iOpenidGetUserInfo,
					data: {
						wxOpenId: pnum,
					}
				};
				let useri = uni.getStorageSync("userInfo");
				let userInfo = {};
				callbackRequestNoLoading(data).then(res => {
					if (res.data.returnCode == 1) {
						userInfo = res.data.returnData;
						//this.role = res.data.returnData.role;
						userInfo.userId = res.data.returnData.id == null ? '' : res.data.returnData.id;
						//userInfo.headportrait = this.currentUser.headimgurl;
						userInfo.telnumber = res.data.returnData.mobile == null ? '' : res.data.returnData.mobile;
						userInfo.username = res.data.returnData.realName == null ? '' : res.data.returnData
							.realName;
						userInfo.userName = res.data.returnData.realName == null ? '' : res.data.returnData
							.realName;
						userInfo.deptName = res.data.returnData.departmentName == null ? '' : res.data.returnData
							.departmentName;
						userInfo.deptId = res.data.returnData.department_id == null ? '' : res.data.returnData
							.department_id;
						userInfo.orgName = res.data.returnData.orgName == null ? '' : res.data.returnData.orgName;
						//this.userId = this.userInfo.userId;
						//this.deptId = this.userInfo.deptId;
						userInfo.identityAuth = res.data.returnData.identityAuth == null ? '' : res.data.returnData
							.identityAuth;
						userInfo.face_Pic1 = res.data.returnData.face_Pic1 == null ? '' : res.data.returnData
							.face_Pic1;
						userInfo.idnumber = res.data.returnData.id_card == null ? '' : res.data.returnData.id_card;
						userInfo.userLevel = res.data.returnData.userLevel == null ? '' : res.data.returnData
							.userLevel;
						userInfo.deptNameUrl = res.data.returnData.deptNameUrl == null ? '' : res.data.returnData
							.deptNameUrl;
						userInfo.deptIdUrl = res.data.returnData.deptIdUrl == null ? '' : res.data.returnData
							.deptIdUrl;
						useri = userInfo;
						uni.setStorage({
							key: "userInfo",
							data: useri
						})
						this.login(useri); //缓存用户信息
						this.getBannerInfo(useri); //获取banner信息
						this.getUserPermissions();
						this.getBacklogData();
					} else {
						uni.showLoading({
							title: '您还没有使用权限，请联系管理员处理'
						})
						return
					}
				});
			},

			banJump(item) {
				console.log(item.url);

				var url = item.url;
				uni.navigateTo({
					url
				});
			},
			goNoticeView(id) {
				var url = "/pages/hqfb/hqfbDetail?id=" + id;
				uni.navigateTo({
					url
				});
			},
			goNotice() {
				var url = "/pages/notice/notice";
				uni.reLaunch({
					url
				});
			},


			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index == 0) {
					uni.scanCode({
						onlyFromCamera: true,
						success: function(res) {
							var url = res.result;
							uni.navigateTo({
								url
							});
						}
					});
				}
			},
			getIcon(iconUrl) {
				if (iconUrl.startsWith("/static")) {
					return iconUrl;
				} else {
					return "http://zhhq.cdzywpt.cn/appImageDir/zhhq_sj" + iconUrl;
				}

			},
			getUserPermissions() {
				let that = this;
				// if (!that.userId) {
				// 	return;
				// }
				let userId = getStorage('userInfo').userId;
				let deptId = getStorage('userInfo').deptId;
				callbackRequestNoLoading({
					method: getUserPers,
					data: {
						userId: userId,
						deptId: deptId
					}
				}).then(res => {
					if (res.data.returnCode == 1) {
						that.permissions = res.data.returnData;
						// console.log(that.permissions)
						that.updateAuthUrl(res.data.returnData);
						uni.hideLoading();
					} else {
						console.log('获取权限失败');
					}
				});
			},
			goMore() {
				// console.log(this.permissions);
				let url = "/pages/more/more?permissions=" + JSON.stringify(this.permissions);
				uni.navigateTo({
					url: url
				});
			},
			navTo(url1, code, child) {
				let url = url1 || "";
				if (this.authUrl.toString().indexOf(url.split("?")[0]) == -1) {
					alertTip("暂无访问权限");
					return;
				}
				let where = "";
				for (let i = 0; i < child.length; i++) {
					if (child[i].type == 1) {
						if (url.indexOf('?') != -1) {
							url = url + '&' + child[i].pageUrl;
						} else {
							url = url + '?' + child[i].pageUrl;
						}
					}
				}
				if (!url) {
					alertTip('敬请期待');
				}


				if (url && url.startsWith('/')) {
					if (url.indexOf('?') != -1) {
						url = url + '&code=' + code;
					} else {
						url = url + '?code=' + code;
					}
					if (child.length > 0) {
						url = url + '&permissions=' + JSON.stringify(child);
					}

					uni.navigateTo({
						url
					});
				} else if (url) {

					window.location.href = url;
				}

			},
			getBacklogData() {
				if(getStorage('userInfo').id==getStorage('userInfo').userId&&getStorage('userInfo').userId==getStorage('userInfo').wxOpenId){
					let params = {
						method: getBacklogInfo,
						data: {
							userId: getStorage('userInfo').userId
						}
					};
					callbackRequest(params).then(res => {
						if (res.data.returnCode) {
							this.backlogData = res.data.returnData;
							console.log(this.backlogData);
						}
					});
				}
			},
			alertTip() {
				alertTip('敬请期待');
			}
		}
	};
</script>
<style lang="scss">
	.hzContent {
		padding: 24upx;
		padding-bottom: 120upx !important;

		.banner {
			height: 290upx;
			border-radius: 33upx;
			margin-bottom: 24upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.routeAreaA {
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			padding: 31upx 0;
			border-radius: 22upx;
			margin-bottom: 24upx;
			min-height: 200upx;

			.routeBox {
				flex-grow: 1;
				width: 25%;
				max-width: 25%;
				text-align: center;

				image {
					width: 80upx;
					height: 80upx;
					margin-bottom: 12upx;
				}

				.title {
					font-size: 28upx;
					color: #0e1a24;
				}
			}
		}

		.routeAreaB {
			display: flex;
			margin-bottom: 22upx;

			.routeBox {
				display: flex;
				align-items: center;
				flex: 1;
				border-radius: 22upx;
				padding: 24upx 0;
				margin-right: 20upx;

				justify-content: center;

				.msg {
					font-size: 28upx;
					color: #006bd5;

					.num {
						color: #409ffd;
						font-size: 36upx;
						font-weight: bold;
						margin-left: 16upx;
					}
				}



				image {
					margin-right: 24upx;
					width: 48upx;
					height: 48upx;
				}
			}

			.routeBox:last-child {
				background-color: #e3f9ff;
				margin: 0;
			}

			.msgs {
				font-size: 28upx;
				color: #0391b9;
			}


		}

		.routeAreaC {
			display: flex;
			flex-wrap: wrap;
			background-color: #fff;
			border-radius: 20upx;
			padding: 10upx;

			.perItem {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 26upx;
				color: #333333;
				margin: 20upx 0;

				image {
					width: 60upx;
					height: 60upx;
					margin-bottom: 15upx;
				}
			}
		}

		.noticeMode {
			margin-top: 20upx;
			background-color: #fff;
			padding: 24upx 24upx 5upx 24upx;
			border-radius: 22upx;
			background-image: url('@/static/index/noticeTit.png');
			background-repeat: no-repeat;
			background-size: 100%;

			.title {
				display: flex;
				font-size: 36upx;
				font-weight: bold;
				align-items: center;
				margin-bottom: 24upx;

				.more {
					margin-left: auto;
					font-weight: normal;
					font-size: 28upx;
					color: #97A5B1;
					display: flex;
					align-items: center;
				}

				image {
					width: 20upx;
					height: 20upx;
				}
			}

			.msgList {
				border: 1px solid #cbe5fe;
				background-color: #f7fbff;
				border-radius: 22upx;
				display: flex;
				padding: 24upx;
				margin-bottom: 24upx;

				.msgImg {
					width: 115upx;
					max-width: 115upx;
					border-radius: 22upx;
					overflow: hidden;
					margin-left: 40upx;
					height: 94upx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.listMsg {
					flex: 1;
					overflow: hidden;

					.msgContant {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-bottom: 24upx;
						font-size: 28upx;
					}

					.dept {
						display: flex;
						font-size: 24upx;
						color: #97A5B1;

						.date {
							margin-left: auto;
						}
					}
				}
			}
		}
	}
</style>