<template>
	<view>
		<view v-show="showFlag" class="index-container" style="background-color: white;padding-bottom: 10upx;">
			<!-- <view class="banner">
				<image src="../../static/imgs/banner.png"></image>
			</view> -->
			<view class="banner">
				<swiper class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in bannerList" :key="index" v-if="authUrl.indexOf(item.url.split('?')[0])!=-1">
						<view class="swiper-item" >
							<image @click="banJump(item)" :src="formatImgUrl(item.src)"></image>
						</view>
					</swiper-item>
					<!-- <swiper-item>
						<view class="swiper-item">
							<image src="/static/images/indexbanner/bannerfwzn.png"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="/static/images/indexbanner/bannerfwzn.png"></image>
						</view>
					</swiper-item> -->
				</swiper>
			</view>
			<view class="backlog"  >
				<image class="icon" src="/static/imgs/icon.png" mode=""></image>
				<view class="fr-text">
					<swiper class="swiper-box" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-if="backlogData" v-for="(item, index)  in backlogData" :key="index" @click="goNoticeView(item.id)">
							<view class="swiper-item" >
								<text >{{ item.title }}</text>
							</view>
						</swiper-item>
						<swiper-item v-else>
							<view class="swiper-item"><text>暂无待办事项</text></view>
						</swiper-item>
						<!-- 临时代码 -->
						<!-- <swiper-item>
							<view class="swiper-item"><text>暂无待办事项</text></view>
						</swiper-item> -->
					</swiper>
				</view>
			</view>

			<!-- 菜单部分 begin -->
			<view class="category-view" v-for="(item, index) in permissions" :key="index" v-if="item.isOpen == 0">
				<view class="category-name">
					<text style="display: inline-block;width: 6upx;height: 30upx;background: #40a3ff;margin-bottom: -4upx;margin-right: 10upx;border-radius: 2upx;"></text>
					{{ item.name }}
				</view>
				<view class="box box-row-reverse box-left box-wrap">
					<view class="box box-column  box-align-center button-fun wth25"
						v-for="(child, dex) in item.children"
						:key="dex" v-if="child.isOpen == 0"
						@click="navTo(child.pageUrl,child.code)" >
						<image :src='getIcon(child.iconUrl)'></image>
						<!-- <image :src="child.iconUrl"></image> -->
						<text>{{ child.name }}</text>
						<text class="tip-num" v-if="child.tipNumDate>0">{{child.tipNumDate}}</text>
						<text v-if="child.isOpen == 1" class="tip-area"></text>
					</view>
					<view class="box box-column  box-align-center button-fun wth25"
						v-for="(child, dex) in item.children"
						:key="dex" v-if="child.isOpen == 1"
						@click="alertTip()" >
						<image :src="getIcon(child.iconUrl)"></image>
						<text>{{ child.name }}</text>
						<text v-if="child.isOpen == 1" class="tip-area"></text>
					</view>
				</view>
			</view>
			<view class="category-view" v-for="(item, index) in permissions" :key="index" v-if="item.isOpen == 1">
				<view class="category-name">{{ item.name }}</view>
				<view class="box box-row-reverse box-left box-wrap">
					<view class="box box-column  box-align-center button-fun wth25"
						v-for="(child, dex) in item.children"
						:key="dex" v-if="child.isOpen == 0"
						@click="navTo(child.pageUrl,child.code)" >
						<image :src="getIcon(child.iconUrl)"></image>
						<text>{{ child.name }}</text>
						<text v-if="child.isOpen == 1" class="tip-area"></text>
					</view>
					<view class="box box-column  box-align-center button-fun wth25"
						v-for="(child, dex) in item.children"
						:key="dex" v-if="child.isOpen == 1"
						@click="alertTip()" >
						<image :src="getIcon(child.iconUrl)"></image>
						<text>{{ child.name }}</text>
						<text v-if="child.isOpen == 1" class="tip-area"></text>
					</view>
				</view>
			</view>
			<!-- 菜单部分 end -->
		</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 { iOpenidGetUserInfo, getBacklogInfo, getUserPers,getUnReadNum,getBannerList } from '@/common/api.js';
import { callbackRequest,callbackRequestNoLoading, setStorage, getStorage, sureAlterTip, devEnv, alertTip,wxSdk ,formatImgUrl} from '@/common/util.js';
export default {
	components: {
		uniIcons,
		listCell,
		uniPopup
	},
	data() {
		return {
			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
		};
	},
	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+''
						})
						console.log('getUnReadNum');
					}
				}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;
					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
			});
		},
		testPic(){
			var url = "/pages/report/report";
			uni.navigateTo({
				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;
					that.updateAuthUrl(res.data.returnData);
					uni.hideLoading();
				} else {
					console.log('获取权限失败');
				}
			});
		},
		navTo(url,code) {
			// 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 && url.startsWith('/')){
				if(url.indexOf('?')!=-1){
					url = url+'&code='+code;
				}else{
					url = url+'?code='+code;
				}
				uni.navigateTo({
					url
				});
			}
			else if(url){
				
				window.location.href = url;
			}
			
		},
		getBacklogData() {
			let params = {
				method: getBacklogInfo,
				data: {
					userId: getStorage('userInfo').userId
				}
			};
			callbackRequest(params).then(res => {
				if (res.data.returnCode) {
					this.backlogData = res.data.returnData;
				}
			});
		},
		alertTip() {
			alertTip('敬请期待');
		}
	}
};
</script>
<style lang="scss">
@import '@/static/css/common.scss';
.tip-num {
			color: #fff;
			position: absolute;
			right: 48upx;
			top: -8upx;
			font-size: 24upx;
			background: red;
			border-radius: 50%;
			width: 36upx;
			height: 36upx;
			text-align: center;
			line-height: 36upx;
		}
.index-container {
	overflow: hidden;

	.banner {
		margin: 30rpx;
		box-shadow: 0 0 20rpx 10rpx #e4e3e3;
		border-radius: 10rpx;

		image {
			width: 100%;
			height: 300rpx;
			border-radius: 10rpx;
			vertical-align: top;
		}
		
		.swiper-banner {
			height: 300upx;
				
			.swiper-item {
				line-height: 50upx;
				@include overstepOne;
				
				text {
					display: block;
					vertical-align: top;
					font-size: 26rpx;
				}
			}
		}
	}

	.backlog {
		background: #f3f4fa;
		padding: 20rpx 30rpx;

		.icon {
			float: left;
			width: 36rpx;
			height: 36rpx;
			vertical-align: top;
			margin-top: 8rpx;
		}

		.fr-text {
			margin-left: 70rpx;

			.swiper-box {
				height: 50upx;

				.swiper-item {
					line-height: 50upx;
					@include overstepOne;

					text {
						display: block;
						vertical-align: top;
						font-size: 26rpx;
					}
				}
			}
		}
		
		
	}
}

.category-view {
	border-bottom: 1px solid #e3e3e5;
	padding-bottom: 8rpx;

	.category-name {
		padding: 36rpx 0 40rpx 20upx;
		font-size: 30upx;
		/* margin-bottom: 40upx; */
		font-weight: bold;
		line-height: 36rpx;

		image {
			margin-right: 14upx;
			width: 36upx;
			height: 36upx;
			vertical-align: top;
		}
	}
}

.category-view:last-child {
	border-bottom: 0px;
}

.box {
	display: flex;
	display: -webkit-flex;
}

.box-row-reverse {
	flex-direction: row;
}

.box-column {
	flex-direction: column;
}

.box-left {
	justify-content: flex-start;
}

.box-right {
	justify-content: flex-end;
}

.box-center {
	justify-content: center;
}

.box-between {
	justify-content: space-between;
}

.box-align-center {
	align-items: center;
}

.box-wrap {
	flex-wrap: wrap;
	margin-left: 28upx;
}

.button-fun {
	margin-bottom: 36upx;
	position: relative;

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

	text {
		font-size: 24upx;
		color: #666;
	}

	.tip-num {
		color: #fff;
		position: absolute;
		right: 48upx;
		top: -8upx;
		font-size: 24upx;
		background: red;
		border-radius: 50%;
		width: 36upx;
		height: 36upx;
		text-align: center;
		line-height: 36upx;
	}
}

.wth25 {
	width: 24%;
}

%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}

.server {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	color: #929292;
	margin-top: 20upx;
}

.server .line {
	border-bottom: 1px solid #333333;
	width: 66.6667upx;
}

.server .s-text {
	font-size: 25upx;
	margin-left: 15upx;
	margin-right: 15upx;
}

.user-section {
	height: 373upx;
	padding: 20upx 20upx 0 20upx;
}

.img-icon {
	width: 70upx;
	height: 70upx;
	margin-bottom: 18upx;
}

.user-info-box {
	width: 100%;
	height: 100%;
}

.cover-container {
	background: $page-color-base;
	padding: 0 30upx;
	position: relative;
	background: #f5f5f5;
	padding-bottom: 20upx;
}

.order-section {
	@extend %section;
	padding: 28upx 0;
	margin-top: 20upx;

	.order-item {
		@extend %flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		font-size: $font-sm;
		color: $font-color-dark;
	}

	.yticon {
		font-size: 48upx;
		margin-bottom: 18upx;
		color: #fa436a;
	}
}

.history-section {
	padding: 10upx 0 0;
	margin-top: 20upx;
	background: #fff;
	border-radius: 10upx;

	.sec-header {
		display: flex;
		align-items: center;
		font-size: $font-base;
		color: $font-color-dark;
		line-height: 40upx;
		margin-left: 30upx;

		.yticon {
			font-size: 44upx;
			color: #5eba8f;
			margin-right: 16upx;
			line-height: 40upx;
		}
	}
}

.img-b {
	width: 100%;
	height: 330upx;
}
.tip-area {
	opacity: 0.8;
	filter: alpha(opacity=20);
	position: absolute;
	background: #ffffff;
	width: 60upx;
	height: 60upx;
	text-align: center;
	line-height: 36upx;
}
</style>
