<template>
	<view click="main">
		<block v-if="pageVal == 0">
			<view class="bg">
				<!-- <image style="width: 100%;" src="../../static/bg/bg_home.png"></image> -->
			</view>
			<view class="orderRevenue" v-if="userInfo.parentId==0">
				<view class="turnover turact" v-if="userid==2?true:false">
					<view class="doneCompleted">
						<view class="done">{{shopInfo.pendingVerification || 0}}</view>
						<view class="completed">今日门店访问量</view>
					</view>
				</view>
				<view class="turnover" v-else>
					<view class="doneCompleted" @click="goPage('0')">
						<view class="done">{{shopInfo.pendingVerification || 0}}</view>
						<view class="completed">待核销</view>
					</view>
					<view class="doneCompleted" @click="goPage('2')">
						<view class="done">{{shopInfo.completedNum || 0}}
						</view>
						<view class="completed">已完成</view>
					</view>
					<view class="todayturnover" @click="startIncome">
						<view class="price">￥{{shopInfo.amountToday || 0}}</view>
						<view class="completed">今日营业额</view>
					</view>
					<view class="totalprice" @click="startIncome">
						<view class="totalturnover">￥{{shopInfo.amountToday || 0}}</view>
						<view class="completed">总营业额</view>
					</view>
				</view>

			</view>
			<view class="flex-box" v-if="userInfo.parentId!=0">
				<view class="flex-left">
					<view class="flex-left-info">
						<image class="ic_notice" src="../../static/tabar/ic_my_info.png"
							style="width: 50rpx; height: 50rpx;"></image>
					</view>
					<view class="flex-left-name">{{userInfo.staffName}}</view>
					<view class="flex-left-phone">{{userInfo.staffPhone}}</view>
				</view>
				<view class="flex-right">
					<u-switch activeColor="#FF5802" v-model="isActive" asyncChange @change="asyncChange"></u-switch>
					{{isActive?'上班':'下班'}}
				</view>


			</view>
			<view class="notice" @click="clickNotice" v-if="userInfo.parentId==0">
				<view class="notice_bg">
					<view class="title">
						<image class="ic_notice" src="../../static/bg/ic_notice.png"></image>
						<view class="notice_title" v-if="total > 0">门店有订单已核销，请及时查看！</view>
						<view class="notice_title" v-else>暂无消息</view>
					</view>
					<image class="left" src="../../static/tabar/ic_left.png"></image>
				</view>
			</view>

			<view class="functionmenu" :class="userid==2?'function':''">
				<view class="orderWrite" @click="orderVerification" v-if="userid==0?true:userid==1?true:false">
					<image class="img" src="../../static/tabar/ic_order_verification.png"></image>
					<view class="title">订单核销</view>
				</view>
				<view class="dataStatistics" @click="onclickStatistics" v-if="userid==0?true:userid==1?true:false">
					<image class="img" src="../../static/tabar/ic_data_statistics.png"></image>
					<view class="title">数据统计</view>
				</view>
				<view class="storeManagement" @click="onclickStartStore"
					v-if="userid==0&&userInfo.parentId==0?true:false">
					<image class="img" src="../../static/tabar/ic_store_management.png"></image>
					<view class="title">
						店铺管理
					</view>
				</view>
				<view class="storeManagement" @click="onclickGastationInfo" v-if="userid==1?true:false">
					<image class="img" src="../../static/tabar/ic_store_management.png"></image>
					<view class="title">
						油站信息
					</view>
				</view>
				<view class="storeManagement" @click="onclickPowerStationInfo" v-if="userid==2?true:false">
					<image class="img" src="../../static/tabar/ic_store_management.png"></image>
					<view class="title">
						电站信息
					</view>
				</view>
				<view class="storeManagement" @click="goWork" v-if="userInfo.parentId==0?true:false">
					<image class="img" src="../../static/tabar/ic_store_management.png"></image>
					<view class="title">
						上班统计
					</view>
				</view>
				<view class="storeManagement" @click="ygInfo" v-if="userInfo.parentId==0?true:false">
					<image class="img" src="../../static/tabar/ic_store_management.png"></image>
					<view class="title">
						员工管理
					</view>
				</view>

				<view class="storeManagement" @click="handleGodetails" v-if="userInfo.parentId!=0">
					<image class="img" src="../../static/tabar/ic_store_management.png"></image>
					<view class="title">
						已核销订单
					</view>
				</view>
			</view>
		</block>
		<!-- 	<block v-if="pageVal == 1">
			<Qrcode></Qrcode>
		</block> -->
		<block v-if="pageVal == 2">
			<GoodsPages></GoodsPages>
		</block>
		<block v-if="pageVal == 3">
			<UserManagement></UserManagement>
		</block>
		<block v-if="pageVal == 4">
			<Person></Person>
		</block>
		<tabBar :pageIndex="pageVal" :textType="1" @toTab="toTab"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/Madman-tabBar/tabBar.nvue';
	import GoodsPages from '@/pages/home/goods.vue';
	import Person from '@/pages/home/person';
	import Qrcode from '@/pages/home/qrcode';
	import UserManagement from '@/pages/home/userManagement';
	// import tabBar from '@/components/Madman-tabBar/tabBar.nvue';
	export default {
		components: {
			tabBar,
			GoodsPages,
			Person,
			Qrcode,
			UserManagement
		},
		data() {
			return {
				userid: uni.getStorageSync('userType'),
				pageVal: 0,
				shopInfo: {},
				isActive: false,
				userInfo: {},
				total:0
			}
		},
		mounted(opt) {
			// this.pageVal = opt.id ? Number(opt.id) : ''	,
			// console.log("asdasd",uni.getStorageSync('userType') )
			//0-普通门店，1-加油站 2-充电站
			this.getShopInfo()

			// uni.openLocation({

			// })
			uni.hideTabBar()
		},
		onLoad() {

		},
		onShow() {

			this.stateInfo()
			this.getList()
			uni.hideTabBar()
		},

		methods: {

			getList(flag) {
				this.$http.post("/api/store/message/list", {
					pageNum: 1,
					pageSize: '20',
					status: '1'
				}).then(res => {
					console.log('res',res);
					// this.list = !flag ? res.data.rows : this.list.concat(res.data.rows)
					this.total = res.data.total
				})
			},

			stateInfo() {

				this.userInfo = uni.getStorageSync('userInfo')
				if (this.userInfo.staffId) {
					this.$http.get(`/api/store/staff/state?id=${this.userInfo.staffId}`, {}).then(res => {
						if (res.code == 200)
							this.isActive = res.data == 1 ? true : false

					})
				}

			},
			goPage(type) {
				uni.navigateTo({
					url: '/pages/orderManagement/orderManagement?type=' + type
				})
			},
			handleGodetails() {
				uni.navigateTo({
					url: `/pages/orderManagement/orderManagement?type=2`
				})
			},
			asyncChange(e) {

				let that = this
				uni.showModal({
					title: '提示',
					content: `确认${!this.isActive?'上班':'下班'}打卡后，当天将不能重复操作`,
					success: function(res) {
						if (res.confirm) {

							let staffId = that.userInfo.staffId
							that.$http.post(`/api/store/staff/goWork/${staffId}`, {}).then(res => {
								if (res.code == 200) {
									that.isActive = e
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								} else {
									that.isActive = 0
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							// that.isActive = 0
						}
					}
				});


			},
			toTab(data) {
				console.log(data);
				this.pageVal = data.typeId
				// uni.switchTab({
				// 	url: data.pageUrl,
				// 	complete: (res) => {
				// 		console.log(res,'tab');
				// 	}
				// })
			},
			getShopInfo() {
				this.$http.get("/api/store/index/indexData", {}).then(res => {
					if (res.code == 200)
						console.log(res)
					this.shopInfo = res.data

				})
			},
			onclickStatistics() {
				uni.navigateTo({
					url: '/pages/dataStatistics/dataStatistics'
				})
			},
			onclickStartStore() {
				uni.navigateTo({
					url: '/pages/storeManagement/storeManagement'
				})
			},
			orderVerification() {
				uni.navigateTo({
					url: '/pages/home/qrcode?id=2'
				})
			},
			clickNotice() {
				uni.navigateTo({
					url: "/pages/messageNotif/messageNotif"
				})
			},
			onclickGastationInfo() {
				uni.navigateTo({
					url: "/pages/gasStationInfo/gasStationInfo"
				})
			},
			startIncome() {
				uni.navigateTo({
					url: "/pages/incomeDetails/incomeDetails"
				})
			},
			toggleSwitch() {
				this.isActive = !this.isActive
			},
			onclickPowerStationInfo() {
				uni.navigateTo({
					url: "/pages/powerStationInfo/powerStationInfo"
				})
			},
			goWork() {
				uni.navigateTo({
					url: "/pages/goWork/goWork"
				})
			},
			ygInfo() {
				uni.navigateTo({
					url: "/pages/ygInfo/ygInfo"
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 500rpx;
		background-size: 100% 100%;
		background-image: url('../../static/bg/bg_home.png');
	}

	.functionmenu {
		padding-top: 66rpx;
		display: flex;
		background: #FFFFFF;
		flex-wrap: wrap;

		.storeManagement {
			text-align: center;
			width: 25%;
			padding-bottom: 66rpx;

			.title {
				font-size: 24rpx;
				color: #333333;
			}
		}

		.dataStatistics {
			text-align: center;
			width: 25%;
			padding-bottom: 66rpx;

			.title {
				font-size: 24rpx;
				color: #333333;
			}
		}

		.orderWrite {
			text-align: center;
			width: 25%;
			padding-bottom: 66rpx;

			.title {
				font-size: 24rpx;
				color: #333333;
			}
		}

		.img {
			width: 94rpx;
			height: 94rpx;
		}
	}

	.function {
		justify-content: center;
	}

	.notice {
		padding: 24rpx;

		.notice_bg {
			justify-content: space-between;
			display: flex;
			background: linear-gradient(90deg, #FFD6C7 0%, #FFE1BF 100%);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			align-items: center;

			.title {
				display: flex;
				align-items: center;

				.notice_title {
					padding-left: 20rpx;
					font-size: 24rpx;
					color: #333333;
				}

				.ic_notice {
					padding-left: 24rpx;
					width: 94rpx;
					height: 94rpx;
					line-height: 94rpx;
				}
			}

			.left {
				padding-right: 20rpx;
				width: 10rpx;
				height: 20rpx;
			}
		}
	}


	.orderRevenue {
		padding: 24rpx;
		margin-top: -120rpx;
		position: relative;
		z-index: 9;

		.totalprice {
			.totalturnover {
				text-align: center;
				color: #02A2FF;
				font-size: 36rpx;
			}

			.completed {
				margin-top: 10rpx;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.custom-switch {
			width: 150rpx;
			/* 自定义宽度 */
			height: 60rpx;
			/* 自定义高度 */
			border-radius: 30rpx;
			background: #e0e0e0;
			position: relative;
			transition: all 0.3s;
		}

		.slider {
			width: 50%;
			height: 100%;
			background: #fff;
			border-radius: 20px;
			position: absolute;
			left: 0;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.yellow {
			width: 150rpx;
			/* 自定义宽度 */
			height: 60rpx;
			/* 自定义高度 */
			border-radius: 30rpx;
			background: #FF4502;
			position: relative;
			transition: all 0.3s;
		}

		.slider.active {
			left: 50%;
		}

		.switch-text {
			position: absolute;
			top: 50%;
			left: 30%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			color: white;
			pointer-events: none;
			/* 防止文字阻挡点击事件 */
			z-index: 2;
		}

		.switch-text1 {
			position: absolute;
			top: 50%;
			right: 0%;
			transform: translate(-50%, -50%);
			font-size: 12px;
			color: white;
			pointer-events: none;
			/* 防止文字阻挡点击事件 */
			z-index: 2;
		}

		.todayturnover {
			.price {
				text-align: center;
				color: #0237FF;
				font-size: 36rpx;
			}

			.completed {
				margin-top: 10rpx;
				text-align: center;
				font-size: 24rpx;
				color: #999999;
			}

		}

		.turnover {
			justify-content: space-between;
			display: flex;
			padding-left: 69rpx;
			padding-top: 30rpx;
			padding-right: 69rpx;
			padding-bottom: 30rpx;
			background: #FFFFFF;

			box-shadow: 0rpx 3rpx 10rpx 1rpx #FFE3CC;
			border-radius: 14rpx 14rpx 14rpx 14rpx;

			.doneCompleted {
				.done {
					text-align: center;
					font-size: 36rpx;
					color: #FF4502;
				}

				.completed {
					text-align: center;
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}

		}

		.turact {
			justify-content: center;
		}

	}

	::v-deep uni-switch .uni-switch-input {
		width: 160rpx !important;
	}

	.flex-box {
		display: flex;
		margin: 10rpx 20rpx;
		padding: 20rpx;
		align-items: center;
		box-shadow: 0px 1px 5px 0.5px #FFE3CC;
		border-radius: 7px 7px 7px 7px;
		justify-content: space-between;

		.flex-left {
			display: flex;
			align-items: center;
		}

		.flex-left-info {
			margin-right: 20rpx;
		}

		.flex-left-phone {
			margin-left: 20rpx;
		}
	}

	.flex-right {
		display: flex;
		align-items: center;
	}
</style>