<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :border="false" title="收银台"></el-navbar>
		
		<view class="wrapper">
			<view class="title">收银台</view>
			<view class="price">￥<text>{{ orderAmount }}</text></view>
			<!-- <view class="desc">剩余支付时间 00:09:58</view> -->
			
			<view class="payment" v-if="paymentList.length > 0">
				<view class="pay-type">请选择支付方式</view>
				<view class="list">
					<view class="list-box" v-for="(value,index) in paymentList" :key="index" @click="onSelected(value,index)">
						<view class="icon">
							<image :src="value.icon"></image>
						</view>
						<view class="payname">
							<text>{{ value.name }}</text>
							<text v-if="value.money > 0">余额 {{ value.money }} 元</text>
						</view>
						<view class="operate">
							<view :class="{ active: value.checked }">
								<uni-icons class="check" type="checkmarkempty" color="#fff" size="12"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view @click="onPayment" class="btn" v-if="paymentList.length > 0">立即支付</view>
		</view>
		
		<el-loading v-model="isLoading"></el-loading>
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { navigateTo,redirectTo } from "@/el-ui/libs/navigate";
	import payment from "@/el-ui/libs/payment";
	
	const orderAmount = ref('0');
	const options     = ref({});
	const isLoading   = ref(false);
	const pay         = ref({});
	const paymentList = ref([]);
	onLoad((option)=>{
		options.value = option;
		isLoading.value = true;
		uni.$http.get("cashier/index",option).then(res=>{
			isLoading.value = false;
			if(res.code){
				paymentList.value = res.data.payment;
				orderAmount.value = res.data.orderAmount;
				paymentList.value.forEach((item,index)=>{
					if(item.checked){
						pay.value = item;
					}
				});
			}
		});
	});
	
	const onSelected = (value,index)=>{
		paymentList.value.forEach((item,index)=>{
			item.checked = false;
		});
		
		pay.value = value;
		paymentList.value[index].checked = true;
	}
	
	const onPayment = ()=>{
		options.value.pay_id = pay.value.id;
		uni.$http.post("cashier/payment",options.value).then(res=>{
			if(res.code){
				if(res.data.isPay == 1){
					redirectTo(`/pages/order/detail?id=${options.value.order_id}`);
				}else{
					res.data.order_id = options.value.order_id;
					res.data.jump     = options.value.pay_type == "recharge" ? `pages/ucenter/wallet/log` : `pages/order/detail?id=${options.value.order_id}`;
					payment.pay(res.data);
				}
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.wrapper {
		padding: 20rpx;
		.title {
			font-size: 32rpx;
			text-align: center;
			margin-top: 80rpx;
		}
		.price {
			text-align: center;
			margin-top: 40rpx;
			font-size: 28rpx;
			color: red;
			text {
				font-size: 50rpx;
			}
		}
		.desc {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			margin-top: 10rpx;
		}
		.payment {
			padding: 0 20rpx;
			margin-top: 80rpx;
			.pay-type {
				font-size: 30rpx;
				margin-bottom: 40rpx;
				color: #000;
			}
			.list {
				display: flex;
				flex-direction: column;
				.list-box {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #fafafa;
					.icon {
						position: relative;
						top: 4rpx;
						image {
							width: 32rpx;
							height: 32rpx;
							overflow: hidden;
						}
					}
					.payname {
						width: 100%;
						display: flex;
						justify-content: space-between;
						padding: 0 20rpx 0 30rpx;
						text {
							font-size: 28rpx;
							&:nth-child(2){
								color: #888;
							}
						}
					}
					.operate {
						view {
							width: 35rpx;
							height: 35rpx;
							border-radius: 50%;
							border: 1px solid #ccc;
							position: relative;
							&.active {
								border: 1px solid #4a65ec;
								background-color: #4a65ec;
							}
							.check {
								position: absolute;
								top: -20rpx;
								left: -2rpx;
								/* #ifdef MP-WEIXIN */
								top: -25rpx;
								left: 3px;
								/* #endif */
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
		.btn {
			margin-top: 80rpx;
			width: 100%;
			background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
			font-size: 28rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>