<template>
	<view class="content" v-if="show">
		<view class="win-mask"></view>
		
		<view class="win-operate">
			<image mode="aspectFit" src="/static/images/icon/retail/close.png" @click="onClose"></image>
			<text class="win-title">请选择储值卡</text>

			<view class="win-card">
				<view class="win-card-search">
					<image v-if="searchCardValue?false:true" mode="aspectFit" src="/static/images/icon/retail/search.png"></image>
					<input v-model="searchCardValue" @change="searchCardList" placeholder="请输入微信昵称/手机号码/储值卡号搜索" placeholder-style="win-card-search-input-placeholder">
				</view>
				<view class="win-card-list">
					<view class="win-card-list-item" v-for="(item, index) in cardList" :key="index" @click="onCardClick(item)" :style="{borderColor:item.mark===choosePath?'#009874':'#979797'}">
						<view>储值卡卡号：<text :style="{color:item.color.card_no}">{{ item.card_no }}</text></view>
						<view>微信昵称：<text :style="{color:item.color.nickname}">{{ item.nickname }}</text></view>
						<view>手机号码：<text :style="{color:item.color.mobile}">{{ item.mobile }}</text></view>
						<view>卡名称：<text :style="{color:item.color.card_name}">{{ item.card_name }}</text></view>
						<view>卡余额：<text :style="{color:item.color.balance}">￥{{ item.balance }}</text></view>
						<image mode="aspectFit" :src="item.mark"></image>
					</view>
				</view>
			</view>
			
			<view class="win-way-confirm"><button hover-class="hover-active" @click="onConfirm">确定</button></view>
			<view class="win-iphonex-block"></view>
		</view>
	</view>
</template>

<script>
	import util from '../../../utils/util.js';
	import server from '../js/server';
	import api from '../js/api';
	
	export default {
		props: [
			"show", "price", "storeId", "brandId"
		],
		data() { 
			return {
				cardList: [],		// 储值卡列表
				choosePath: "/static/images/icon/retail/choose.png",
				noChoosePath: "/static/images/icon/retail/noChoose.png",
				curCardChoose: null,
				searchCardValue: "",
			}
		},
		created() {
			
		},
		methods: {
			// 储值卡点击
			onCardClick(item) {
				this.curCardChoose = item;
				for (let i = 0; i < this.cardList.length; ++i) this.cardList[i].mark = this.noChoosePath;
				this.curCardChoose.mark = this.choosePath;
			},
			// 获取储值卡列表
			searchCardList() {
				if (!this.searchCardValue) {
					this.cardList = [];
					this.curCardChoose = null;
					// util.showNone("请输入微信昵称/手机号码/储值卡号搜索");
					return;
				}
				
				let _this = this;
				this.cardList = [];
				
				util.showLoad();
				server.get({
					url: api.assistantGetValueCardList,
					data: {
						brand_id: this.brandId,
						stadium_id: this.storeId,
						total_amount: this.price,
						key: this.searchCardValue,
					},
					isDefaultGet: false,
					failMsg: '搜索失败！'
				}).then(res => {
					util.hideLoad();
					if (res.data.code == 0) {
						let color = "#333";
						for (let i = 0; i < res.data.data.length; ++i) {
							_this.cardList.push(res.data.data[i]);
							_this.cardList[i].mark = this.noChoosePath;
							_this.cardList[i].color = {
								card_no: color, nickname: color, mobile: color, card_name: color, balance: color
							};
							
							for (let j = 0; j < res.data.data[i].match_key_fields.length; ++j)
								_this.cardList[i].color[res.data.data[i].match_key_fields[j]] = "#009874";
						}
						
						if (_this.cardList.length) {
							_this.cardList[0].mark = _this.choosePath;
							this.curCardChoose = _this.cardList[0];
						}
						else {
							util.showNone("查询不到该储值卡信息，请检查重新输入");
						}
					}
					else {
						util.showNone(res.data.message || '操作失败！');
					}
				});
			},
			// 重置数据
			resetData() {
				this.curCardChoose = null;
				this.cardList = [];
				this.searchCardValue = "";
			},
			// 关闭窗口
			onClose() {
				this.$emit("update:onClose", false);
			},
			// 支付确定
			onConfirm() {
				if (!this.curCardChoose) {
					util.showNone("请搜索选择储值卡！");
					return;
				}
				this.$emit("update:onConfirm", this.curCardChoose);
				this.onClose();
			}
		}
	}
</script>

<style lang="scss">
	@import '~style/public.scss';
	.content {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
	}
	.win-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.win-operate {
		width: 100%;
		height: 964rpx;
		position: fixed;
		bottom: 0%;
		@include centerFlex(flex-start);
		flex-direction: column;
		background-color: white;
		padding-top: 46rpx;
		
		> image {
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			top: 32rpx;
			right: 28rpx;
		}
		> text {
			width: 100%;
			color: #333;
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 54rpx;
		}
		.win-way-confirm {
			width: 100%;
			padding: 0 20rpx;
			position: absolute;
			bottom: 0%;
			bottom: calc( 0% + constant(safe-area-inset-bottom));
			bottom: calc( 0% + env(safe-area-inset-bottom));
			
			> button {
				width: 100%;
				height: 112rpx;
				line-height: 112rpx;
				border-radius: 10rpx;
				padding: 0 0;
				color: white;
				background-color: $themeColor;
			}
		}
		.win-iphonex-block {
			background-color: white;
			width: 100%;
			height: constant(safe-area-inset-bottom);
			height: env(safe-area-inset-bottom);
			poisition: absolute;
			bottom: 0%;
		}
		.win-card {
			width: 100%;
			height: 100%;
			position: relative;
			@include centerFlex(flex-start);
			flex-direction: column;
			padding: 0 20rpx;
			
			.win-card-search {
				width: 100%;
				border-radius: 10rpx;
				background-color: #f2f2f7;
				margin-bottom: 30rpx;
				@include centerFlex(flex-start);
				
				> image {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
					margin-left: 20rpx;
				}
				> input {
					font-size: 32rpx;
					padding: 24rpx 20rpx;
					flex-grow: 1;
				} 
				.win-card-search-input-placeholder {
					font-size: 32rpx;
					color: #9c9c9f;
				}
			}
			.win-card-list {
				width: 100%;
				height: 100rpx;
				overflow: scroll;
				@include centerFlex(flex-start);
				flex-direction: column;
				flex-grow: 1;
				position: relative;
				margin-bottom: 112rpx;
				
				.win-card-list-item {
					display: flex;
					flex-direction: column;
					flex-shrink: 0;
					width: 100%;
					border: 2rpx solid #979797;
					border-color: #979797;
					border-radius: 10rpx;
					padding: 20rpx 0;
					margin-bottom: 24rpx;
					position: relative;
					
					> view {
						color: #9c9c9f;
						font-size: 28rpx;
						margin-bottom: 5rpx;
						
						> text {
							color: #333;
							font-size: 28rpx;
						}
					}
					
					> image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						top: 50%;
						right: 20rpx;
						transform: translate(0%, -50%);
					}
				}
			}
		}
	}
</style>
