<template>
	<view class="container">
		<form @submit="onSubmit">
			<view class="page-block">
				<view class="content">

					<view class="cell flex flex-y-center arr-r">
						<view class="title-block required">
							<text>会员等级</text>
						</view>
						<view class="desc">
							<picker mode="selector" :range="level_list" @change="onPrinterAddrChange" range-key="name">
								<view :class="[printerType?'':'desc-placeholder','input-box']">
									{{level_list[level_idx].name || '请选择'}}
								</view>
							</picker>
						</view>
					</view>

					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>联系方式</text>
						</view>
						<view class="desc">
							<input type="num" :value="mobile" name="mobile" class="input-box" placeholder="联系方式"
								placeholder-class="desc-placeholder">
						</view>
					</view>
				</view>
			</view>

			<view class="footer-bar-nav">
				<view @click="recharge" class="content flex flex-center" style="background: none;">
					<view class="btn1" hover-class="none">
						充值
					</view>
				</view>
				<view class="content flex flex-center" style="background: none;">
					<button class="btn2" hover-class="none" form-type="submit">
						修改
					</button>
				</view>
			</view>
		</form>
		
		<uni-popup-top ref="popup" type="center" :maskClass="maskClass">
			<view class="rechargeContent page-block">
				<form @submit="onSubmitForm">
					<view class="content" style="padding: 30rpx;">
						<view class="cell flex flex-y-center arr-r">
							<view class="title-block required">
								<text>充值:</text>
							</view>
							<view class="desc" @click="onPrinterStatusChange">
								{{printerStatus}}
							</view>
						</view>
						<view class="cell flex flex-y-center">
							<view class="title-block required">
								<text>数量:</text>
							</view>
							<view class="desc">
								<input type="num" name="number" class="input-box" placeholder="数量"
									placeholder-class="desc-placeholder">
							</view>
						</view>
						<button class="btn3" form-type="submit">
							充值
						</button>
					</view>
				</form>
			</view>
		</uni-popup-top>
	</view>
</template>

<script>
	import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
	export default {
		components: {
			uniPopupTop
		},
		data() {
			return {
				printerStatus: '余额充值',
				state: 1,
				is_integral: 0,
				device_type: 1,
				tableType: "",
				store_id: "",
				info: {},
				obj: {},
				game_index: -1,
				level_name: null,
				level_list: [],
				mobile: '',
				id: '',
				level_idx: -1,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
				},
			}
		},

		onLoad(e) {
			this.mobile = e.mobile;
			this.level_name = Number(e.level_name);
			this.id = e.id;
			this.admin_id = uni.getStorageSync("admin_id");
			this.level_index();
		},
		
		methods: {
			
			onSubmitForm(e) {
				this.request({
					url: 'Smdcshop/chongzhi',
					data: {
						id: this.id,
						is_cancel: this.state,
						number: e.detail.value.number,
					},
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			
			onPrinterStatusChange() {
				let statusArr = ['余额充值', '积分充值']
				uni.showActionSheet({
					itemList: statusArr,
					success: (r) => {
						this.state = Number(r.tapIndex) + 1
						this.printerStatus = statusArr[r.tapIndex]
					}
				})
			},

			recharge(e) {
				this.$refs.popup.open();
			},

			onPrinterAddrChange(e) {
				console.log(e, this.level_list, "e")
				let num = Number(e.detail.value);
				this.game_index = this.level_list[num].level;
				this.level_idx = num;
				console.log(e, this.level_list, "e")
			},

			level_index() {
				this.request({
					url: "Smdcshop/level_index",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						res.data.unshift({
							name: '普通会员',
							level: 0,
						});
						let level_list = res.data;
						console.log(level_list, "level_list")
						var game_index = level_list.findIndex(item => item.level === this.level_name);
						this.level_list = level_list;
						this.game_index = game_index;
						this.level_idx = game_index;
						console.log(this.game_index, "this.game_index")
					}
				});
			},
			onSubmit(e) {
				let params = e.detail.value,
					url = 'Smdcshop/user_edit';
				params.admin_id = this.admin_id;
				params.user_level = this.game_index;
				params.id = this.id;
				this.request({
					url,
					data: params
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		}
	}
</script>

<style>
	@import url("../static/css/common.css");

	page {
		background-color: #F4F5F7;
	}
	
	.rechargeContent {
		background: #FFF;
		width: 600rpx;
		border-radius:10rpx;
	}
	/*  */
	.footer-bar-nav {
		position: fixed;
		left: 0;
		bottom: 20rpx;
		width: 100%;
	}

	.footer-bar-nav .content {
		background-color: #fff;
		z-index: 100;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
		-webkit-box-shadow: 0 -5rpx 10rpx #eee;
		box-shadow: 0 -5rpx 10rpx #eee;
	}

	.footer-bar-nav .content .btn1 {
		width: 700rpx;
		height: 100rpx;
		background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		-webkit-box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.footer-bar-nav .content .btn2 {
		width: 700rpx;
		height: 100rpx;
		background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		-webkit-box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.btn3 {
		width: 400rpx;
		height: 100rpx;
		background: -webkit-linear-gradient(135deg, #3387ff 2%, #569bff 99%);
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		-webkit-box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>
