<template>
	<view>
		<!-- <view class="padding bg-gradual-color" :style="'padding-top: ' + pageContentTop + 'px; padding-bottom: 100rpx;'"> -->
		<view class="padding bg-gradual-color" :style="'padding-top: ' + pageContentTop + 'px;'">
			<!-- 个人信息栏 -->
			<view class="flex justify-between padding-bottom align-center solid-bottom">
				<view class="flex justify-start align-center">
					<!-- <view class="cu-avatar round" @click="test"
						:style="'width: 120rpx; height: 120rpx; background-image:url(' + curUserInfo.bannerUrl + ');'"> -->
					<view style="width: 120rpx; height: 120rpx;">
						<image class="round" src="/static/dept-logo.jpg" mode="aspectFit" style="width: 120rpx; height: 120rpx;"></image>
					</view>
					<view class="margin-lr-sm">
						<!-- <view class="text-xl margin-bottom-xs" v-if="curUserInfo && curUserInfo.openId">{{curUserInfo.deptName}}</view> -->
						<view class="text-xl margin-bottom-xs" v-if="curUserInfo && curUserInfo.openId">工盟互联</view>
						<view class="text-xl margin-bottom-xs" v-else @click="authLogin">请先登录</view>
						<!-- <view class="padding-xs text-sm">
							<view class='cu-tag bg-white radius'>编辑</view>
						</view> -->
					</view>
				</view>
				<!-- <view class="right-tag padding-lr padding-tb-xs" @click="showMasterRule">师傅规则</view> -->
			</view>
			<!-- 未预约，未派单，上门超时 -->
			<view class="cu-list grid no-border col-3 margin-top-sm" style="background-color: inherit;">
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">{{orderStatistics.newOrderNum}}</view>
					<view>新订单</view>
				</view>
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">{{orderStatistics.planOrderNum}}</view>
					<view>未排单</view>
				</view>
				<view class="cu-item">
					<view class="margin-bottom-xs text-xxl">0</view>
					<view>上门超时</view>
				</view>
			</view>
		</view>
		<view class="margin-lr-sm margin-bottom-with-bar">
			<!-- 今日待上门 -->
			<view class="bg-white padding-lr shadow-warp">
				<view class="cu-bar margin-top-sm solid-bottom">
					<view class="action bar-first-action">
						<view class="cuIcon-title text-main-color"></view>
						<text>今日待上门({{waitServOrderToday.length}})</text>
					</view>
					<view class="flex justify-end text-sm align-center"
						@click="clickServModule({
							pageUrl: '/pages/order-manage/order-manage'
						})">
						<text>即将上门订单</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view v-if="!curUserInfo || !curUserInfo.workerId" class="screen-swiper padding text-center">
					未登录
				</view>
				<!-- 轮播 -->
				<swiper v-else-if="waitServOrderToday && waitServOrderToday.length" class="screen-swiper" :autoplay="true" :circular="true">
					<swiper-item v-for="(item,index) in waitServOrderToday" :key="index">
						<view class="padding-sm">
							<view class="flex justify-between align-center margin-bottom-xs">
								<view class="text-lg">{{item.goodsName}}</view>
							</view>
							<view>
								时间：
								<text class="text-red" v-if="item.expectTimeEndFront">{{item.expectTimeStartFront + '~' + item.expectTimeEndFront}}</text>
								<text v-else>{{item.expectTimeStartFront}}</text>
							</view>
							<view>地址：{{item.address}}</view>
						</view>
					</swiper-item>
				</swiper>
				<view v-else class="screen-swiper padding text-center text-gray">
					今日无待上门订单
				</view>
			</view>
			<!-- 每周公告 -->
			<!-- <view class="padding bg-white shadow-warp margin-top-sm" v-if="curUserInfo && curUserInfo.workerId">
				<view class="flex justify-between align-center">
					<view class="">
						<text class="text-main-color">[每周公告]</text>
						<text>{{myInfo.weekNotice.title}}</text>
					</view>
					<view class="flex justify-end">
						<view class="cu-tag badge" v-if="myInfo.weekNotice.ifHasNoReadNotice"></view>
						<view class="cuIcon-right"></view>
					</view>
				</view>
			</view> -->
			<!-- 功能模块 -->
			<view class="margin-lr-sm margin-top">
				<view class="text-lg">服务中心</view>
				<view class="nav-list-panel float-clear clearfix">
					<view hover-class="none" class="nav-li serv-module" @click="clickServModule(item)"
						:class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
						v-for="(item,index) in servModules " :key="index">
						<view :class="index === 0 ? 'text-xxl' : 'text-xl'">{{item.title}}</view>
						<!-- <view class="nav-name">{{item.name}}</view> -->
						<text :class="'cuIcon-' + item.cuIcon"></text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 首页引导 -->
		<vertify-worker-type ref="vertifyWorkerType"></vertify-worker-type>
		<!-- 登录校验弹窗 -->
		<vertify-login ref="vertifyLogin" @reload="authLogin"></vertify-login>
		<!-- <vertify-phone ref="vertifyPhone" @reload="authLogin"></vertify-phone> -->
	</view>
</template>

<script>
	export default {
		name: 'index',
		emits: ['changeCurPageCode'],
		data() {
			return {
				pageContentTop: this.CustomBar,
				servModules: [{
					id: 1,
					title: '需求大厅',
					name: '查看详情',
					color: 'blue',
					cuIcon: 'list',
					pageUrl: '',
					checkLogin: true
				}, {
					id: 2,
					title: '我的订单',
					name: '查看详情',
					color: 'orange',
					cuIcon: 'text',
					pageUrl: '/pages/order-manage/order-manage',
					checkLogin: true
				}, {
					id: 3,
					title: '叮咚学院',
					name: '查看详情',
					color: 'cyan',
					cuIcon: 'emoji',
					pageUrl: ''
				}, {
					id: 4,
					title: '邀请师傅',
					name: '查看详情',
					color: 'pink',
					cuIcon: 'profile',
					pageUrl: ''
				}, {
					id: 5,
					title: '区域代理',
					name: '查看详情',
					color: 'olive',
					cuIcon: 'group',
					pageUrl: '/pages/area-proxy/my-team',
					checkLogin: true
				}],
				curUserInfo: {},
				myInfo: {},
				waitServOrderToday: [],
				orderStatistics: {},
				isShowSteer: false,
				isAuthWxLoginModal: false,
				isAuthWxPhoneModal: false,
				showTakeCertifiedModal: false
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			test() {
				
			},
			async authLogin() {
				// 更新缓存中的userInfo
				// let res = await this.$request.storageExistUser();
				// 获取缓存中的userInfo
				let curUserInfo = this.$request.getCurUserInfo();
				// 校验提示登录
				// if (!curUserInfo || !curUserInfo.openId) {
				// 	this.$refs.vertifyLogin.showModal();
				// 	return false;
				// } else {
				// 	this.$refs.vertifyLogin.hideModal();
				// }
				if (!curUserInfo) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return false;
				}
				// 校验是否注册过
				if (!curUserInfo.phone) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return false;
				}
				// 校验提示获取手机号码
				// if (!curUserInfo.phone) {
				// 	this.$refs.vertifyPhone.showModal();
				// 	return false;
				// } else {
				// 	this.$refs.vertifyPhone.hideModal();
				// }
				// 提示选择师傅类型
				if (curUserInfo.type == null) {
					this.$refs.vertifyWorkerType.showModal();
					return false;
				}
				this.loadData();
				return true;
			},
			async loadData() {
				// 获取缓存中的userInfo
				this.curUserInfo = this.$request.getCurUserInfo();
				this.myInfo = await this.$api.data('myInfo');
				// this.isShowSteer = !this.myInfo.entryType;
				let newServModules = this.servModules.concat();
				if (this.myInfo.hasCheckedRule) {
					newServModules[0].pageUrl = '/pages/demand-center/accept-demand-center';
				} else {
					let paramObj = {
						hasCheckedRule: this.myInfo.hasCheckedRule,
						navigate: true
					}
					newServModules[0].pageUrl = '/pages/demand-center/rule?paramObj=' + encodeURIComponent(JSON
						.stringify(paramObj));
				}
				this.servModules = newServModules;
				// 获取今日待上门单
				this.loadTodayWaitServOrder();
				// 订单统计
				this.loadOrderStatistics();
			},
			async loadTodayWaitServOrder() {
				let date = new Date();
				let waitServRes = await this.$request.qryDetailOrderPage({
					orderStatus: 2,
					expectTimeStart: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00",
					expectTimeEnd: date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 23:59:59"
				});
				this.waitServOrderToday = waitServRes.rows;
			},
			async loadOrderStatistics() {
				let res = await this.$request.orderStatistics();
				this.orderStatistics = res.data;
			},
			hideModal(e) {
				this[e.currentTarget.dataset.modal] = false;
			},
			showMasterRule() {
				let paramObj = {
					hasCheckedRule: this.myInfo.hasCheckedRule,
					navigate: false
				}
				uni.navigateTo({
					url: '/pages/demand-center/rule?paramObj=' + encodeURIComponent(JSON.stringify(paramObj))
				})
			},
			async clickServModule(pageObj) {
				if (pageObj && !pageObj.pageUrl) {
					uni.showToast({
						icon: 'none',
						title: '功能开发中'
					})
				}
				if (pageObj.checkLogin) {
					let res = await this.authLogin();
					if (res) {
						uni.navigateTo({
							url: pageObj.pageUrl
						})
					}
				} else {
					uni.navigateTo({
						url: pageObj.pageUrl
					})
				}
			}
		},
	}
</script>

<style scoped>
	.bg-main-color .solid-bottom::after {
		border-bottom: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.cu-list.grid.no-border>.solid-left.cu-item:after {
		border-left: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.cu-list.grid.no-border>.solid-right.cu-item:after {
		border-right: 1upx solid rgba(255, 255, 255, 0.5);
	}

	.paper-drawer-bar {
		position: relative;
		top: -100rpx;
	}

	.screen-swiper {
		height: 210rpx;
		min-height: unset;
	}

	.bar-first-action {
		margin-left: unset !important;
		font-size: 30rpx !important;
	}

	.nav-list-panel {
		font-weight: 300;
	}

	.nav-list-panel>.serv-module:first-child {
		width: 46%;
		height: 246rpx;
		line-height: 195rpx;
	}

	.nav-li {
		padding: 30rpx;
		border-radius: 12rpx;
		width: 46%;
		background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
		height: 116rpx;
		margin: 10rpx;
		float: left;
	}

	.right-tag {
		background-color: rgba(0, 0, 0, 0.3);
		position: relative;
		right: -30rpx;
		border-radius: 40rpx 0 0 40rpx;
	}

	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.modal-bottom-oper {
		height: 70rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
</style>
