<template>
	<view class="scanCodeVerification">


		<camera style="width: 100vw;height: 100vh;" device-position="back" flash="auto" mode="scanCode"
			@scancode="scancodeEventHandle" @error="error">
			<u-navbar autoBack leftIcon="/static/backIcon.png" bgColor="tr" placeholder>
				<view class="navSlot" slot="left">
					<!-- <image class="backIcon" src="../../static/backIcon.png" mode=""></image> -->
				</view>
			</u-navbar>

			<view class="scanCodeIcon">
				<u-icon name="scan" color="#FFFFFF" size="100"></u-icon>
			</view>

			<div class="chooseListBox">
				<div class="chooseList">
					<u-radio-group v-model="thaliId" placement="column" @change="groupChange">
						<div class="chooseItem" v-for="(item,index) in thaliList" :key="index">
							<div class="chooseItemL">
								<div class="title">
									{{item.thaliType}}：[{{item.thaliName}}]
								</div>

								<div class="numText">
									总次数：{{item.thaliTotalNum}}次 还剩：{{item.thaliResidueNum}}次
								</div>
							</div>

							<div class="chooseItemR">
								<u-radio :name="item.thaliId" activeColor="#FF6B03" inactiveColor="#999999" size="22">
								</u-radio>
							</div>
						</div>
					</u-radio-group>
				</div>

				<div class="confirmBtn" @click="confirm" v-if="thaliList.length">
					消费
				</div>
			</div>

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

<script>
	export default {
		data() {
			return {
				memberId: '',
				thaliList: [],
				thaliId: ''
			}
		},
		onLoad() {
			// this.scanCodeVerification()
		},

		methods: {

			confirm() {
			
			
			},

			scancodeEventHandle(e) {
				console.log(e, '扫码');
				this.memberId = e.detail.result

				this.scanCodeVerification()
			},

			scanCodeVerification() {
				// this.$http.get('/api/wcf/wcfMember/scanCodeVerification', {
				// 	cusId: uni.getStorageSync('customerId'),
				// 	memberId: this.memberId
				// }).then(res => {
				// 	console.log(res);
				// 	if (res.code == 200) {
				// 		this.thaliList = res.data
				// 		// this.isLastPage = res.data.isLastPage
				// 	}
				// });
			},
		}
	}
</script>

<style lang="less">
	.navSlot {
		.backIcon {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.scanCodeIcon {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.chooseList {
		max-height: 385rpx;
		overflow-y: auto;
		margin-bottom: 37rpx;
		background: rgba(255, 255, 255, 0.17);
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.chooseItem {
			padding: 28rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			border-bottom: 2rpx dashed rgba(230, 230, 230, 0.17);

			&:nth-last-child(1) {
				border-bottom: none;
				border-radius: 0 0 16rpx 16rpx;
			}

			.chooseItemL {
				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #fff;
					margin-bottom: 20rpx;
				}

				.numText {
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}

	.confirmBtn {
		width: 702rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #FFB988 0%, #FE6B03 100%);
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}

	.chooseListBox {
		position: fixed;
		left: 50%;
		bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		transform: translateX(-50%);
	}
</style>