<template>
	<view class="content">
		<view class="container">
			<headers :titles="titles"><u-icon name="arrow-left" color="#fff" size="22"></u-icon></headers>
			<view class="input-box">
				<view style="margin-right: 10px;">总收款金额</view>
				<view class="">{{AmountCollected}}</view>
				<!-- <input type="number" /> -->

			</view>
			<view class="input-box">
				<view style="margin-right: 10px;">优惠后收款金额</view>
				<view class="">{{paymentAmount}}</view>
				<!-- <input type="number" /> -->
			</view>
			<view class="input-box">
				<view style="margin-right: 10px;">优惠金额</view>
				<view class="">{{DiscountAmount}}</view>
				<!-- <input type="number" /> -->

			</view>
			<view class="input-box">
				<view style="margin-right: 10px;">储值卡消费金额</view>
				<view class="">{{balanceRedece}}</view>
				<!-- <input type="number" /> -->

			</view>
			<!-- <view class="title_">选择油号</view>
			<view class="warp-box">
				<view class="w-box" :class="{ 'acv' : oilIndex == index }" @click="getoilIndex(index)"
					v-for="(item,index) in oilList" :key="index">
					{{item}}
				</view>

			</view> -->
			<view class="title_">选择油枪</view>
			<view class="warp-box">
				<view class="w-box" :class="{ 'acv' : spearIndex == index }" v-for="(item,index) in spearList"
					:key="index" @click="getspearIndex(index,item)">
					{{item.gunName}}
				</view>

			</view>
			<view style="width: 100%; height: 500px; "></view>
			<view class="bai-kuang">
				<view class="kuang-top">
					<view class="w-shi">添加备注</view>
					<view style="color: #E8E8E8;"> | </view>
					<view class="w-shi" @click="gosearchVip()">{{userInfo ? userInfo.mobile : '搜索会员'}}</view>
				</view>
				<!-- 键盘区域 -->
				<view class="num-box">

					<view class="k-box" v-for="(item,index) in keyboardList" :key="index" @click="KeyboardLogic(item)">
						<!-- pd- -->
						<view class="CentralLogic" v-if="item.type == 'num' ">
							{{item.value}}
						</view>
						<view class="Centralimg" v-if="item.type == 'img' ">
							<view class="icon-box">
								<image src="/static/imgs/smzf.png" v-if="item.value == 'smzf' " @click="scanQrcode">
								</image>
								<image src="/static/imgs/skzf.png" v-if="item.value == 'skzf' "></image>
								<image src="/static/imgs/hyzf.png" v-if="item.value == 'hyzf' "></image>
								<image src="/static/imgs/xjzf.png" v-if="item.value == 'xjzf' " @click="cashPay">
								</image>
								<image src="/static/imgs/scjian.png" style="height: 30px;" v-if="!item.value"></image>
							</view>
							<view class="icon-size" v-if="item.value == 'smzf' " @click="scanQrcode">扫码支付</view>
							<view class="icon-size" v-if="item.value == 'skzf' ">刷卡支付</view>
							<view class="icon-size" v-if="item.value == 'hyzf' ">会员支付</view>
							<view class="icon-size" v-if="item.value == 'xjzf' " @click="cashPay">现金支付</view>
						</view>
					</view>

				</view>
				<!-- 垫子 -->
				<view style="width: 100%; height: 25px; "></view>

			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../utils/request";
	import headers from '../../components/header/headers.vue'

	export default {
		data() {
			return {
				userId: "",
				userInfo: "",
				AmountCollected: "",
				paymentAmount: "",
				DiscountAmount: 0,
				balance: 0,
				balanceRedece: 0,
				// 是否使用囤油卡
				isOilStorageCard: false,
				authCode: "",
				oilName: "",
				tankId: "",
				oilPrice: "",
				oilGunNum: "",
				oilCardAmount: 0,
				levelAmount: 0,
				activeAmount: 0,
				// 支付订单信息
				oilOrder: {},
				titles: "收款",
				oilList: [
					"92#", "95#", "98#"
				],
				oilIndex: 0,
				spearList: [
					"1号枪", "2号枪", "3号枪"
				],
				spearIndex: 0,
				orderNo:"",
				preferentialData: {},
				// 键盘
				keyboardList: [{
						value: '1',
						type: 'num'
					},
					{
						value: '2',
						type: 'num'
					},
					{
						value: '3',
						type: 'num'
					},
					{
						value: 'smzf',
						type: 'img'
					},
					{
						value: '4',
						type: 'num'
					},
					{
						value: '5',
						type: 'num'
					},
					{
						value: '6',
						type: 'num'
					},
					{
						value: 'skzf',
						type: 'img'
					},
					{
						value: '7',
						type: 'num'
					},
					{
						value: '8',
						type: 'num'
					},
					{
						value: '9',
						type: 'num'
					},
					{
						value: 'hyzf',
						type: 'img'
					},
					{
						value: '0',
						type: 'num'
					},
					{
						value: '.',
						type: 'num'
					},
					{
						value: null,
						type: 'img'
					},
					{
						value: 'xjzf',
						type: 'img'
					},
				]

			}
		},
		onLoad(e) {
			if (e.userId) {
				this.userId = e.userId
				this.AmountCollected = e.AmountCollected
				this.getUser();
			}
		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.getOilGun()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		components: {
			headers
		},
		methods: {
			// 获取优惠信息
			getPaymentPreferential() {
				if (!this.AmountCollected || !this.userInfo) {
					return;
				}
				this.DiscountAmount = 0;
				let type = 0;
				if (this.balanceRedece == 0) {
					type = 2
				} else {
					type = 0
				}
				let map = {
					//支付类型 0：储值卡 1：囤油卡
					type: type,
					//支付金额
					amount: this.AmountCollected,
					//可用油品Id
					oilId: this.oilName,
					//店铺id
					storeId: uni.getStorageSync("storeId"),
					//会员等级
					mtUserLevel: this.userInfo.gradeId,
					//用户id
					userId: this.userInfo.id,
				}
				request({
					url: "business/marketingActivity/activeExchange/getPaymentActive",
					method: 'get',
					params: map,
				}).then((res) => {
					this.preferentialData = res.data
					if (res.data.memberFavorableAmount) {
						this.DiscountAmount += res.data.memberFavorableAmount
						this.oilOrder.levelAmount = res.data.memberFavorableAmount
					}
					if (res.data.cardFavorableAmount) {
						this.DiscountAmount += res.data.cardFavorableAmount
					}
					if (res.data.activeFavorableAmount) {
						this.DiscountAmount += res.data.activeFavorableAmount
						this.oilOrder.activeAmount = res.data.activeFavorableAmount
					}
					this.countAmount()
				})
			},
			// 获取用户信息
			getUser() {
				request({
					url: '/business/userManager/user/' + this.userId,
					method: 'get',
				}).then((res) => {
					this.userInfo = res.data
					this.balance = res.data.cardBalance
					this.getPaymentPreferential()
				})
			},
			// 计算收款金额
			countAmount() {
				if (this.balance >= (this.AmountCollected - this.DiscountAmount - this.oilCardAmount)) {
					this.balanceRedece = this.AmountCollected - this.DiscountAmount - this.oilCardAmount
					this.paymentAmount = 0
				} else {
					this.balanceRedece = this.balance
					this.paymentAmount = (this.AmountCollected - this.DiscountAmount - this.balance - this.oilCardAmount).toFixed(2)
				}
			},
			// 二维码
			scanQrcode() {
				if (!this.AmountCollected) {
					uni.showToast({
						title: "请先输入收款金额",
						icon: "none"
					})
					return;
				}
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
						_this.authCode = res.result
						_this.payMent()
					},
					error: (res) => {
						console.log('扫描二维码出现错误')
					}
				})
			},
			// 现金支付
			cashPay() {
				if (!this.AmountCollected) {
					uni.showToast({
						title: "请先输入收款金额",
						icon: "none"
					})
					return;
				}
				this.oilOrder.payType = "CASH"
				this.payMent()
			},
			getOilCardAmount(){
				if(!this.userInfo){
					return;
				}
				request({
					url: '/business/marketingActivity/cardFuelRecord/getRecordByUserId',
					method: 'get',
					params:{mtUserId:this.userInfo.id}
				}).then((res) => {
					res.data.forEach(item => {
						if (item.oilType==this.oilName){
							let liters = this.AmountCollected / this.oilPrice
							this.oilCardAmount = item.lockupPrice * liters
						}
					})
				})
			},
			// 调用支付接口
			payMent() {
				this.oilOrder.orderNo = this.orderNo
				this.oilOrder.orderAmount = this.AmountCollected
				this.oilOrder.payAmount = this.paymentAmount
				this.oilOrder.discountAmount = this.DiscountAmount
				this.oilOrder.balanceAmount = this.balanceRedece
				this.oilOrder.isOilStorageCard = this.isOilStorageCard
				this.oilOrder.isUseChildCard = this.isUseChildCard
				this.oilOrder.activeId = this.preferentialData.activeId
				this.oilOrder.cardFavorableId = this.preferentialData.cardFavorableId
				this.oilOrder.recordId = this.preferentialData.recordId
				this.oilOrder.type = this.preferentialData.type
				this.oilOrder.balanceAmountSale = this.balanceRedece
				this.oilOrder.levelAmount = this.levelAmount
				this.oilOrder.activeAmount = this.activeAmount
				this.oilOrder.authCode = this.authCode
				this.oilOrder.oils = this.oilName
				this.oilOrder.tankId = this.tankId
				this.oilOrder.oilPrice = this.oilPrice
				this.oilOrder.oilCardAmount1 = this.oilCardAmount
				this.oilOrder.userId = this.userInfo.id
				this.oilOrder.oilGunNum = this.oilGunNum
				this.oilOrder.payUser = this.userInfo.mobile
				request({
					url: "business/oilOrder/addOrderPos",
					method: 'post',
					data: this.oilOrder
				}).then((res) => {
					this.orderNo = res.data.orderNo
					if (res.data.code == 1) {
						this.reset()
						uni.showToast({
							title: "支付成功",
							icon: "success"
						})
						// uni.navigateTo({
						// 	url:"/pages/index/index"
						// })
					} else if (res.data.code == 2) {
						uni.showToast({
							title: "请先配置商户号",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "支付失败，请联系管理员",
							icon: "none"
						})
					}
				})
			},
			// 重置
			reset() {
				this.userId = "";
				this.userInfo = "";
				this.AmountCollected = "";
				this.DiscountAmount = 0;
				this.balanceRedece = 0;
				this.isOilStorageCard = false;
				this.balanceRedece = 0;
				this.authCode = "";
				this.oilName = "";
				this.tankId = "";
				this.oilPrice = "";
				this.oilCardAmount = 0;
				this.paymentAmount = 0;
				this.levelAmount = 0;
				this.activeAmount = 0;
				this.getOilGun()
			},
			// 获取油枪信息
			getOilGun() {
				request({
					url: 'business/petrolStationManagement/oilGun/queryOilGunList',
					method: 'get',
				}).then((res) => {
					this.spearList = res.data
					if (this.spearList.length > 0) {
						this.oilGunNum = this.spearList[0].id
						this.oilName = this.spearList[0].oilName
						this.tankId = this.spearList[0].tankId
						this.oilPrice = this.spearList[0].oilPrice
					}
				})
			},
			// 跳会员
			gosearchVip() {
				uni.navigateTo({
					url: '/pagesHome/searchVip/searchVip?AmountCollected=' + this.AmountCollected
				})
			},
			// 键盘方法
			KeyboardLogic(data) {
				// console.log(data);
				if (data.type == 'num') {
					this.AmountCollected = this.AmountCollected + data.value
					if (!this.userInfo) this.paymentAmount = this.AmountCollected
					this.getPaymentPreferential()
				}
				if (data.type == 'img') {
					if (!data.value) {
						this.AmountCollected = this.AmountCollected.substring(0, this.AmountCollected.length - 1);
					}
					if (data.value == 'skzf') {
						uni.navigateTo({
							url: '/pagesHome/CardPayment/CardPayment'
						})

					}
				}

			},
			getoilIndex(num) {
				this.oilIndex = num
			},
			getspearIndex(num, data) {
				this.spearIndex = num
						this.oilGunNum = data.id
				this.oils = data.oilName
				this.tankId = data.tankId
				this.oilPrice = data.oilPrice
				this.getPaymentPreferential()
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #0864e9;
		// background: linear-gradient(180deg, #B2D2FC 0%, #B2D2FC 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #0864e9;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.input-box {
		width: 95%;
		margin: 10px auto;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
		padding: 10px 0px;
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		display: flex;
		align-items: center;
	}

	.title_ {
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
		width: 95%;
		margin: 10px auto;
	}

	.warp-box {
		width: 95%;
		margin: 10px auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.w-box {
		width: 60px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 6px 6px 6px 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 14px;
		color: #333333;
		margin-right: 10px;
	}

	.acv {
		background: #E8F5FF !important;
		color: #0864E9 !important;
	}

	.s-h-box {
		width: 100%;
		border-top: 1px solid #E8E8E8;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bai-kuang {
		position: fixed;
		bottom: 0px;
		left: 0px;
		background: #fff;
		border-radius: 18px 18px 0px 0px;
		overflow: hidden;
	}

	.num-box {

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.k-box {
		width: 24.5%;
		height: 80px;
		display: flex;
		align-items: center;
		justify-content: center;

		border-right: 1px solid #E8E8E8;
		border-top: 1px solid #E8E8E8;
	}

	.CentralLogic {
		font-weight: bold;
		font-size: 30px;
		color: #333333;
	}

	.Centralimg {}

	.icon-box {
		width: 40px;
		height: 40px;
		margin: 5px auto;

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

	.icon-size {
		font-size: 14px;
		color: #333333;
		text-align: center;


	}

	.kuang-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.w-shi {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0864E9;
		box-sizing: border-box;
		padding: 15px;
	}
</style>