<template>
	<view>
		<cmd-nav-bar iconOne="chevron-left" @iconOne="goToInfo" :title="shopName" background-color="#fff"></cmd-nav-bar>
		
		<view style="background: linear-gradient(90deg, #6484fa 0%, #66e8ff 100%);overflow: hidden;color:#eee;margin-top: 180rpx;">
			<view v-if="enDayShow" @tap="bigFWHPic" style="width:100%;height:60rpx;">
				<u-notice-bar mode='horizontal' bgColor="#088FEB" color="#eee" :text="textArr"></u-notice-bar>
			</view>
			<view class="top" ref="top">
				<view class="top1">
					<view class="hello-box">
						<view class="hello-left">
							<text
								style="font-size: 40rpx;font-weight: 800;line-height: 56rpx;color: rgba(86, 132, 255, 1);">
								Hi
							</text>
						</view>
						<view class="hello-name">
							{{oneShareData.shopName+'对账单'}}
						</view>
						<view class="hello-right"></view>
		
					</view>
					<view class="hello-text">
						欢迎查看<text style="font-weight: bold;font-size: 36rpx;color: #fff;padding: 0 10rpx;">{{oneShareData.userName}}</text>的充值记录详情
					</view>
				</view>
			</view>
		
		</view>
		<view style="display: flex;padding: 20rpx 0;border-top: 1px solid #eee;border-bottom: 1px solid #eee;">
			<view class="top-box">
				<view>{{oneShareData.amount>0?'充值金额':'追加欠款'}}</view>
				<view style="font-size: 33rpx;font-weight: bold;color:#000;">{{Math.abs(oneShareData.amount)}}</view>
			</view>
			<view class="top-box">
				<view>操作人</view>
				<view style="font-size: 33rpx;font-weight: bold;color:#000;">{{oneShareData.createByName}}</view>
			</view>
			<view class="top-box">
				<view>日期</view>
				<view style="font-size: 33rpx;font-weight: bold;color:#000;">{{oneShareData.createTime | removeTime}}</view>
			</view>
		</view>
		<view style="width: 95%;margin: 0 auto;line-height: 50rpx;padding: 20rpx 0;">
			<view v-if="oneShareData.lastDebtAmount >= 0">
				<text>之前欠款：<text style="font-weight: bold;">{{oneShareData.lastDebtAmount}}</text></text>
			</view>
			<view v-if="oneShareData.lastDebtAmount < 0">
				<text>之前余额：<text style="font-weight: bold;">{{Math.abs(oneShareData.lastDebtAmount)}}</text></text>
			</view>
			<view v-if="oneShareData.balanceDue >= 0">
				<text>本单后欠款：<text style="font-weight: bold;">{{oneShareData.balanceDue}}</text></text>
			</view>
			<view v-if="oneShareData.balanceDue < 0">
				<text>本单后余额：<text style="font-weight: bold;">{{Math.abs(oneShareData.balanceDue)}}</text></text>
			</view>
		</view>
		<view style="width: 95%;margin: 0 auto;line-height: 50rpx;padding: 20rpx 0;border-top: 1px solid #eee;">
			充值时间：{{oneShareData.createTime | removeStr}}
		</view>
		<view style="padding: 20rpx 0;border-top: 1px solid #eee;width: 95%;margin: 0 auto;line-height: 60rpx;">
			<view>{{oneShareData.shopAddress}}</view>
			<view>联系电话：{{oneShareData.shopMoblie}}</view>
			<view>店铺备注：{{oneShareData.shopRemark}}</view>
		</view>
		<view style="width:100%;color:#777;position: absolute;bottom: 20rpx;text-align: center;height: 60rpx;line-height: 60rpx;">
			用快衣店进销存，开单、入库更方便
		</view>
		<!-- <view v-if="isSelfOrder == false" style="width: 100%;height: 100%;position: fixed;top: 0;background: #fff;text-align: center;padding-top: 45%;z-index: 120;">
			暂无查看权限
		</view> -->
	</view>
</template>

<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue";
	import {
		wxLogin
	} from '@/utils/global.js'
	export default {
		components: {
			cmdNavBar
		},
		data() {
			return {
				enDayShow:false,
				textArr:['您还未关注快衣店服务号，暂无法接收充值及上新提醒，点击关注'],
				FWHPic:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f2ba2080aaa54c618c2e47df4f220087.png',
				oneShareData:{},
				isSelfOrder:false,
				mini_program_openid:'',
				unionid:'',
				official_account_openid:'',
				userId:'',
				type:''
			}
		},
		filters: {
			removeStr(val) {
				if (val == null) {
					return "";
				} else {
					var dotIndex = val.indexOf('.');
					if (dotIndex !== -1) {
						return val.substring(0, dotIndex);
					}
					return val;
				}
			},
			removeTime(val) {
				if (val == null) {
					return "";
				} else {
					var dotIndex = val.indexOf('.');
					if (dotIndex !== -1) {
						val = val.substring(0, dotIndex);
					}
					if (val.indexOf(' ') !== -1) {
						val = val.substring(0, val.indexOf(' '));
					}
					return val;
				}
			}
		},
		onShow(){
			if(!uni.getStorageSync('officialAccountOpenid') && !uni.getStorageSync('shopId') && this.type && this.oneShareData.userName !='散客'){
				this.getUserInfo()
			}
		},
		onLoad(option) {
			this.oneShareData = JSON.parse(option.oneShareData)
			this.mini_program_openid = option.mini_program_openid
			this.unionid = option.unionid
			this.official_account_openid = option.official_account_openid
			this.userId = option.userId
			this.customId = option.customId
			this.type = option.type
			
			
			/*
				微信登录判断开始
			*/
		   if(this.type && !uni.getStorageSync('shopId') && this.oneShareData.userName !='散客'){
			   this.contrastOpneId()
		   }else{
			   this.isSelfOrder = true
		   }
			
			
			// if(uni.getStorageSync('mini_program_openid')){
			// 	this.getToken()
			// }
			// if(!uni.getStorageSync('hiver_token')){
			// 	let wxlogin = wxLogin(option.userId)
			// }
		},
		methods: {
			updateUserId(){
				this.tui.request("/app/customer/updateUserId", "post", {
					customerId:this.customId,
					userId:uni.getStorageSync('id')
				}, false, true).then((res) => {
					if (res.code != 200) {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			getUserInfo(){
				this.tui.request("/user/getUserInfo", "post", {
					miniProgramOpenid:uni.getStorageSync('miniProgramOpenid')
				}, false, true).then((res) => {
					if (res.code == 200) {
						if(res.result.officialAccountOpenid == 'null' || res.result.officialAccountOpenid == null || res.result.officialAccountOpenid == undefined || res.result.officialAccountOpenid ==''){
							this.enDayShow = true
						}else{
							uni.setStorageSync('officialAccountOpenid',res.result.officialAccountOpenid)
							this.enDayShow = false
						}
					}
				}).catch((res) => {})
			},
			bigFWHPic(){
				uni.previewImage({
					urls: [this.FWHPic]
				})
			},
			//获取小程序openid
			getOpenId(customId, userId) {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success(res) {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(infoRes) {
									
									that.tui.request("/user/login", "post", {
										jsCode: res.code,
										customId: customId,
										userId: userId,
										wechatName: infoRes.userInfo.nickName,
										userType: "2"
									}, false, false).then((res) => {
										if (res.code == 200) {
											
											uni.setStorageSync("hiver_token", res
												.result.accessToken)
											uni.setStorageSync("wayValue", "2")
											uni.setStorageSync("nickname", res.result
												.user.nickname)
											uni.setStorageSync("id", res.result.user
												.id)
											uni.setStorageSync('unionid', res.result
												.user.unionid)
											uni.setStorageSync('miniProgramOpenid', res
												.result.user
												.miniProgramOpenid)
											uni.setStorageSync('officialAccountOpenid',
												res.result.user
												.officialAccountOpenid)
											
											if((res.result.user.officialAccountOpenid == 'null' || res.result.user.officialAccountOpenid == null || res.result.user.officialAccountOpenid == undefined || res.result.user.officialAccountOpenid == '') && this.oneShareData.userName !='散客'){
												that.enDayShow = true
												that.$forceUpdate()
											}
											return resolve(res.result)
										} else {
											tui.toast(res.message)
										}
									}).catch((res) => {})
			
								},
								fail(err1) {
									
								}
							});
			
						},
						fail(err) {
							
						}
					});
				});
			
			},
			async contrastOpneId() {
				let openid1 = uni.getStorageSync('miniProgramOpenid')
				let openid2 = this.mini_program_openid
				
				if (openid1 != '' && openid1 != undefined && openid1 != null) {
					if (openid2 != undefined && openid2 != "undefined" && openid2 != 'null' && openid2 != '' && openid2 !=
						null) {
						if (openid1 != openid2) {
							//缓存和分享的openid不一致
							// this.tui.toast('暂无查看权限', 1000)
							// return
						} else {
							this.isSelfOrder = true
							this.$forceUpdate()
						}
					} else {
						//调接口传customId更新userid
						this.updateUserId()
						this.isSelfOrder = true
						this.$forceUpdate()
					}
				} else {
					if(!uni.getStorageSync('shopId')){
						await this.getOpenId(this.customId, uni.getStorageSync('id') ? uni.getStorageSync('id') : this.userId)
					}
					openid1 = uni.getStorageSync('miniProgramOpenid')
					if (openid2 != undefined && openid2 != "undefined" && openid2 != 'null' && openid2 != '' && openid2 != null) {
						if (openid1 != openid2) {
							//缓存和分享的openid不一致
							// this.tui.toast('暂无查看权限', 1000)
							// return
						} else {
							this.isSelfOrder = true
							this.$forceUpdate()
						}
					} else {
						//调接口传customId更新userid
						this.updateUserId()
						this.isSelfOrder = true
						this.$forceUpdate()
					}
				}
			},
			goToInfo() {
				uni.reLaunch({
					url: '/pages/index/home'
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		width: 100;
		height: 100%;
		background: #fff;
	}
	.top-box{ 
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #777;
	}
	.top1 {
		width: 780rpx;
		height: 250rpx;
		opacity: 1;
		background: linear-gradient(360deg, #FAF7F7 0%, rgba(255, 255, 255, 0) 100%);
	}
	
	.hello-box {
		position: absolute;
		left: 42rpx;
		top: 240rpx;
		width: 220rpx;
		height: 56rpx;
	
		.hello-left {
			width: 102rpx;
			height: 56rpx;
			opacity: 1;
			background: #fff;
			border-radius: 3px;
			text-align: center;
			transform: skewX(8deg);
		}
	
		.hello-right {
			position: absolute;
			left: 5px;
			bottom: 0rpx;
			width: 220rpx;
			height: 2px;
			opacity: 1;
			background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
		}
	
		.hello-name {
			position: absolute;
			left: 118rpx;
			top: 0;
			width: 400rpx;
			height: 55rpx;
			font-size: 32rpx;
			line-height: 55rpx;
			color: white;
			overflow: hidden;
		}
	}
	
	.hello-text {
		position: absolute;
		top: 320rpx;
		left: 50rpx;
		color: #fff;
		font-size: 28rpx;
	}
	
	.top {
		width: 780rpx;
		height: 250rpx;
		opacity: 1;
		background: linear-gradient(90deg, #6484fa 0%, #66e8ff 100%);
		overflow: hidden;
	}
</style>