<template>
	<view class="cashier">
		<view class="cashier-topin" v-if="logintext">
			<view class="tegyhsj">
				收银台
			</view>
		</view>
		<view class="cashier-header">
			<view class="cashier-header-text" v-if="toptext">
				收银台
			</view>
			<view class="cashier-tablin">
				<view class="cashier-tablin-nie">
					<view class="cashier-tablin-nie-left">
						<view class="cashier-tablin-nie-left-icon">
							<image :src="merchantCashierShow.logo" mode="widthFix">
							</image>
						</view>
						<view class="cashier-tablin-nie-left-text">
							<view class="cashier-tablin-nie-left-text-top">
								{{merchantCashierShow.mer_name==undefined?'...':merchantCashierShow.mer_name}}
							</view>
							<view class="cashier-tablin-nie-left-text-bottom">
								<view class="cashier-tablin-nie-left-text-bottom-in">
									{{merchantCashierShow.category_name==undefined?'...':merchantCashierShow.category_name}}
								</view>
								<view class="cashier-tablin-nie-left-text-bottom-it">
									加入日期:{{merchantCashierShow.create_time==undefined?'...':merchantCashierShow.create_time}}
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="cashier-tablin-nie-right" @click="activitecode(merchantCashierShow)" v-if="merchantCashierShow.merchant_level==1"> -->
					<!-- <view class="cashier-tablin-nie-right" @click="activitecode(merchantCashierShow)">
						<image :src="merchantCashierShow.qrcode_src" mode="widthFix">
						</image>
					</view> -->
				</view>
			</view>
		</view>
		<view class="cashier-list"  v-if="Number(zhuangi)!=7?false:true">
			<view class="cashier-list-top">
				<view class="cashier-list-top-left">
					<view class="yi" v-for="(item,index) in items" @click="dianji(index)"
						　:style="index==indexs?'font-weight: 600;':'font-weight: 300;'">
						{{item.name}}
						<view class="cashier-list-top-left-yisss" v-if="index==indexs?true:false">
						</view>
					</view>

				</view>
				<view class="cashier-list-top-right" @click="peratingt">
					<view class="cashier-list-top-right-text">
						经营报表
					</view>
					<view class="cashier-list-top-right-icon">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811110111315.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
			<view class="cashier-list-tbot">
				<view class="yis">
					<view class="sgjd">
						¥{{dataList.orderLineOrderSun.orderLine==undefined?0:dataList.orderLineOrderSun.orderLine}}
					</view>
					<view class="sf">
						线上营收
					</view>
				</view>
				<view class="yis">
					<view class="sgjd">
						¥{{dataList.belowTheLineSum.belowTheLine==undefined?0:dataList.belowTheLineSum.belowTheLine}}
					</view>
					<view class="sf">
						线下营收
					</view>
				</view>
				<!-- <view class="yis" @click="xiaofeifen">
					<view class="sgjd">
						¥{{dataList.consumption==null?0:dataList.consumption}}
					</view>
					<view class="sf">
						消费分
					</view>
				</view> -->
				<view class="yis">
					<view class="sgjd">
						{{dataList.sun==undefined?0:dataList.sun}}
					</view>
					<view class="sf">
						锁定会员数
					</view>
				</view>
				<view class="yis">
					<view class="sgjd">
						{{dataList.visitorNumber==undefined?0:dataList.visitorNumber}}
					</view>
					<view class="sf">
						访客数
					</view>
				</view>
				<view class="yis">
					<view class="sgjd">
						{{dataList.number==undefined?0:dataList.number}}
					</view>
					<view class="sf">
						支付人数
					</view>
				</view>
				<!-- 默认 -->
				<view class="yis">
					<view class="sgjd">
						
					</view>
					<view class="sf">
						
					</view>
				</view>
			</view>
		</view>
		<view class="cashier-jilu" :style="Number(zhuangi)!=7?'margin-top:170rpx':''">
			<view class="cashier-jilu-top">
				最新记录
			</view>
			<view class="cashier-jilu-nei">
				<view class="cashier-jilu-nei-yis" v-for="(item,index) in List" :key="index">
					<view class="cashier-jilu-nei-yis-left">
						<view class="cashier-jilu-nei-yis-left-mei">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="cashier-jilu-nei-yis-left-yins">
							<view class="tetxsad">
								{{item.nickname}}
							</view>
							<view class="sdffget">
								ID:{{item.account.substr(0, 3) + '****' + item.account.substr(7)}}
							</view>
						</view>
					</view>
					<view class="cashier-jilu-nei-yis-right">
						{{item.type}}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="tihsi==0" style="margin: 60rpx 0 20rpx 0; color: #999999; font-size: 26rpx;">
			—— 已经到最底部了哦 ——
		</view>
	</view>
</template>

<script>
	import {
		selectMerchant,
		selectMerchantOrder,
		payUserList
	} from '@/commit/shop.js'
	export default {
		data() {
			return {
				is_panudn: true,
				start_time: "",
				end_time: "",
				mer_id: "", //店铺ID
				logintext: false,
				toptext: true,
				indexs: 0,
				merchantCashierShow: [], // 店铺信息头
				dataList: [], //今日昨日收益
				page: 1,//默认1页
				limit: 10,//默认10条数据
				items: [{
						name: "今日"
					},
					{
						name: "昨日"
					}
				],
				List: [],//列表数据
				tihsi: "",
				zhuangi:""
			}
		},
		onLoad() {
			let daySart = new Date
			this.start_time = this.$time.dateFormat("yyyy-MM-dd", daySart)
			this.end_time = this.$time.dateFormat("yyyy-MM-dd", daySart)
			let selectmerchant = uni.getStorageSync('selectmerchant')
			this.mer_id = selectmerchant.merId
			let jurisdiction = uni.getStorageSync('jurisdiction')
			
			if(jurisdiction!=null){
			jurisdiction.forEach((res,index)=>{
				if(res==7){
					this.zhuangi = res
				}
			})
			}
		},
		onShow() {
			let authorization = uni.getStorageSync('authorization')
			let userinfo = uni.getStorageSync('userinfo')
			let selectmerchant = uni.getStorageSync('selectmerchant')
			let uid = userinfo.uid
			if (authorization && uid) {
				if (selectmerchant.merId >= 0 && selectmerchant.status == -1) {
					uni.redirectTo({
						url: "/openmerchant/guide/index" //有或者没有商户 没有金额支付and激活码支付
					});
					return
				} else if (selectmerchant.merId > 0 && (selectmerchant.status == 1 || selectmerchant.status == 5)) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					this.selectMerchant()
					this.selectMerchantOrder()
					this.payUserList()
					return
				} else if (selectmerchant.merId >= 0 && (selectmerchant.status == 3 || selectmerchant.status == 4)) {
					uni.redirectTo({
						url: '/openmerchant/shopentry/process?mer_id=' + selectmerchant.merId //已开通商户未填写资料
					});
					return
				} else if (selectmerchant.merId > 0 && selectmerchant.status == 0) {
					uni.redirectTo({
						url: '/openmerchant/shopentry/processaudit?submitCode=' + 3 //已开通商户待审核
					});
					return
				} else if (selectmerchant.merId > 0 && selectmerchant.status == 2) {
					uni.redirectTo({
						url: '/openmerchant/shopentry/processaudit?submitCode=' + 2 //已开通商户审核拒绝
					});
					return
				}

			} else {
				uni.redirectTo({
					url: "/pages/user/login/index"
				});
			}
		},
		//监听tab 分类
		onPageScroll(res) {
			const query = uni.createSelectorQuery().in(this);
			query.select('.cashier-header').boundingClientRect(data => {
				if (data.top < 0) {
					this.toptext = false
					this.logintext = true
				} else if (data.top <= 1) {
					this.toptext = true
					this.logintext = false
				}
			}).exec();
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中',
			});
			this.page = 1
			this.is_panudn = true
			this.List = []
			this.payUserList();
			this.selectMerchant();
			this.selectMerchantOrder()
		},

		onReachBottom() {
			if (this.is_panudn == true) {
				this.page++;
				this.payUserList();
			} else {
				return
			}
		},
		methods: {
			// 店铺信息头
			selectMerchant() {
				selectMerchant({
					mer_id: this.mer_id
				}).then(res => {
					console.log(res)
					if (res.data.status == 200) {
						this.merchantCashierShow = res.data.data.merchantCashierShow
					}
				}, fail => {
					console.log(fail)
				})
			},
			activitecode(e) {
				uni.navigateTo({
					url: "/shop/perating/activitecode?qrcode_src=" + e.qrcode_src + '&code_id=' + e.code_id
				})
			},
			peratingt() {
				uni.navigateTo({
					url: "/shop/perating/statement?sna=" + "1"
				})
			},
			xiaofeifen() {
				uni.navigateTo({
					url: "/shop/perating/consumption"
				})
			},
			// 今日昨日收益
			selectMerchantOrder() {
				uni.showLoading({
					title: '加载中',
				});
				selectMerchantOrder({
					start_time: this.start_time,
					end_time: this.start_time,
					mer_id: this.mer_id
				}).then(res => {
					if (res.data.status == 200) {
						this.dataList = res.data.data
						uni.hideLoading();
					}
				}, fail => {
					console.log(fail)
					uni.hideLoading();
				})
			},
			//点击今日昨日收益
			dianji(e) {
				this.indexs = e
				let daySart = new Date
				if (e == 0) {
					this.start_time = this.$time.dateFormat("yyyy-MM-dd", daySart)
					this.end_time = this.$time.dateFormat("yyyy-MM-dd", daySart)
					this.selectMerchantOrder()
				} else {
					var date = new Date();
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					var d = date.getDate() - 1;
					if (d == "0") {
						m = m - 1;
						var temp = new Date(y, m, d);
						d = temp.getDate();
					}
					var Yesterday = [y, m, d];
					Yesterday = Yesterday.join("/");
					this.start_time = this.$time.dateFormat("yyyy-MM-dd", Yesterday)
					this.end_time = this.$time.dateFormat("yyyy-MM-dd", Yesterday)
					this.selectMerchantOrder()
				}
			},
			// 最新纪录列表
			payUserList() {
				payUserList({
					mer_id: this.mer_id,
					pageNum: this.page,
					pageSize: this.limit,
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.status == 200) {
						this.tihsi = res.data.data.pageInfo.list.length
						if (res.data.data.pageInfo.list.length > 0) { //分页处理
							if (this.page == 1) {
								this.List = res.data.data.pageInfo.list
							} else {
								this.List = this.List.concat(res.data.data.pageInfo.list)
							}
						} else {
							this.is_panudn = false
						}
						uni.hideLoading();
					}
				}, fail => {
					uni.hideLoading()
					console.log(fail)
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F7F8FC;
	}
</style>

<style lang="scss" scoped>
	.cashier-topin {
		width: 100%;
		height: 176rpx;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;

		.tegyhsj {
			margin-top: 107rpx;
		}
	}

	.cashier {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.cashier-header {
			width: 100%;
			height: 328rpx;
			background: linear-gradient(180deg, rgba(31, 124, 255, 0.2200) 0%, rgba(255, 255, 255, 0.1500) 100%);
			position: relative;
			display: flex;
			justify-content: center;

			.cashier-header-text {
				position: absolute;
				font-size: 46rpx;
				font-weight: 500;
				color: #333333;
				top: 102rpx;
				left: 64rpx;
			}

			.cashier-tablin {
				position: absolute;
				top: 198rpx;
				width: 686rpx;
				height: 210rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.cashier-tablin-nie {
					width: 634rpx;
					height: 146rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.cashier-tablin-nie-left {
						width: 409rpx;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.cashier-tablin-nie-left-icon {
							width: 146rpx;
							height: 146rpx;
							border-radius: 20rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
								height: auto;
								border-radius: 20rpx;
							}
						}

						.cashier-tablin-nie-left-text {
							width: 247rpx;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: flex-start;

							.cashier-tablin-nie-left-text-top {
								width: 100%;
								font-size: 36rpx;
								font-weight: 500;
								color: #333333;
								display: inline-block;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.cashier-tablin-nie-left-text-bottom {
								width: 100%;
								height: 69rpx;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								color: #333333;
								font-size: 24rpx;

								.cashier-tablin-nie-left-text-bottom-in {
									width: 100%;
									display: inline-block;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.cashier-tablin-nie-left-text-bottom-it {
									width: 100%;
									display: inline-block;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
					}

					.cashier-tablin-nie-right {
						width: 146rpx;
						height: 100%;

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

		.cashier-list {
			width: 686rpx;
			height: 365rpx;
			background-color: #FFFFFF;
			margin-top: 206rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			.cashier-list-top {
				width: 634rpx;
				height: 30rpx;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

				.cashier-list-top-left {
					font-size: 30rpx;
					width: 150rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.yi {
						position: relative;

						.cashier-list-top-left-yisss {
							position: absolute;
							top: 39rpx;
							width: 100%;
							height: 6rpx;
							background: #1F7CFF;
							border-radius: 3rpx;
						}
					}

				}

				.cashier-list-top-right {
					width: 124rpx;
					height: 100%;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;

					.cashier-list-top-right-icon {
						width: 16rpx;
						height: 16rpx;

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

			.cashier-list-tbot {
				width: 570rpx;
				height: 250rpx;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.yis {
					width: 33%;
					height: 82rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					color: #333333;

					.sgjd {
						font-size: 36rpx;
						font-weight: bold;
					}

					.sf {
						font-size: 26rpx;
						font-weight: 400;
					}
				}

				// .cashier-list-tbot-sjd {
				// 	width: 100%;
				// 	height: 88rpx;
				// 	display: flex;
				// 	justify-content: space-between;
				// 	align-items: center;
					// .yis {
					// 	height: 100%;
					// 	display: flex;
					// 	flex-direction: column;
					// 	justify-content: space-between;
					// 	align-items: center;
					// 	color: #333333;

					// 	.sgjd {
					// 		font-size: 36rpx;
					// 		font-weight: bold;
					// 	}

					// 	.sf {
					// 		font-size: 26rpx;
					// 		font-weight: 400;
					// 	}
					// }
				// }
			}
		}

		.cashier-jilu {
			width: 686rpx;
			height: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 26rpx 0 26rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.cashier-jilu-top {
				width: 634rpx;
				margin-top: 49rpx;
				display: flex;
				justify-content: flex-start;
				font-size: 30rpx;
				font-weight: 600;
				align-items: center;
				color: #333333;
			}

			.cashier-jilu-nei {
				width: 634rpx;
				margin-top: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.cashier-jilu-nei-yis {
					width: 100%;
					height: 86rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 65rpx;

					.cashier-jilu-nei-yis-left {
						width: 289rpx;
						height: 100%;
						display: flex;

						.cashier-jilu-nei-yis-left-mei {
							width: 86rpx;
							height: 86rpx;
							border-radius: 100%;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
								border-radius: 100%;
								overflow: hidden;
							}
						}

						.cashier-jilu-nei-yis-left-yins {
							width: 187rpx;
							height: 86rpx;
							margin-left: 16rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							align-items: flex-start;

							.tetxsad {
								display: inline-block;
								width: 100%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 30rpx;
								font-weight: 500;
								color: #333333;

							}

							.sdffget {
								font-size: 26rpx;
								font-weight: normal;
								color: #999999;
							}
						}
					}

					.cashier-jilu-nei-yis-right {
						height: 100%;
						font-size: 30rpx;
						font-weight: normal;
						color: #333333;
						line-height: 86rpx;
					}
				}
			}
		}
	}
</style>
