<template>
	<view class="index">
		<view class="indextext">
			基本信息
		</view>
		<view class="content_item flex-between" @click="showsheetone = true">
			<view class="content_itemone">
				选择会员卡类型
			</view>
			<view class="content_itemtow flex-start">
				<!-- <view class="content_itemtow flex-start"> -->
				<text class="content_itemtow_text">{{showname}}</text>
				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
			</view>
		</view>
		<view class="content_itemecharge" v-if="showtypes ==1">
			<view class=" flex-start" v-for="(item,index) in recharge_amount" :key="index" style="margin-top: 10rpx;">
				<text>充值金额</text>
				<input type="number" v-model="recharge_amount[index].amount" :min='0' style="margin-left: 10rpx;">
				<text style="margin-left: 10rpx;">送</text>
				<input :min='0' type="number" v-model="recharge_amount[index].deliver" style="margin-left: 10rpx;">
				<text style="margin-left: 10rpx;color: #fff; padding:5rpx; border-radius: 10rpx; background: red;"
					@click="reducetext(index)">删除</text>
			</view>
			<!-- <view class="content_itemeabsolute" @click="add">
				<u-icon name="plus-circle" color="#2979ff" size="20"></u-icon>
			</view> -->
		</view>
		<view class="content_item flex-between" v-if="showtypes ==1">
			<view class="content_itemone">
				会员卡有效期
			</view>
			<view class="content_itemtow flex-start" v-if="showtypes ==1">
				<text class="content_itemtow_text">不限</text>
				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
			</view>
		</view>
		<view class="indextext" style="color: #666666;" v-if="showtypes ==1">
			<u--textarea v-model="show" placeholder="简单描述"></u--textarea>
		</view>
		<view class="baocun" @click="servicecreatevipbalabce" v-if="showtypes ==1">
			保存
		</view>
		<view class="content_item flex-between" v-if="showtypes ==2" v-for="(item,index) in listorder" :key="index"
			@click="content_itemonesitem(item)">
			<view class="content_itemones">
				{{item.title}}
			</view>
			<view class="content_itemtow flex-start">
				<text class="content_itemtow_text" style="color: red;">{{item.show}}</text>
				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
			</view>
		</view>
		<view class="contentfixed" @click="add" v-if="showtypes ==1">
			+
		</view>
		<view class="contentfixed" @click="content_itemonesitem" v-if="showtypes ==2">
			+
		</view>
		<u-action-sheet :actions="oneactionslist" :show="showsheetone" @select="selectClick"></u-action-sheet>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: '',
				showtypes: 1,
				showname: '充值卡',
				showsheetone: false,
				listorder: [],
				oneactionslist: [{
						name: '次卡',
					},
					{
						name: '充值卡', //开启后文字不显示
					}
				],
				recharge_amount: [{
					"amount": 100,
					"deliver": 10
				}]
			}
		},
		async onLoad() {
			try {
				this.serviceseccardlist()
				let res = await this.api.servicebalabceinfo()
				this.recharge_amount = res.data.recharge_amount
				this.show = res.data.show
			} catch (e) {
				//TODO handle the exception
			}
		},
		onShow() {
			this.serviceseccardlist()
		},
		methods: {
			selectClick(e) {
				console.log(e)
				if (e.name == '充值卡') {
					this.showtypes = 1
				} else {
					this.showtypes = 2
				}
				this.showname = e.name
				this.showsheetone = false
			},
			content_itemonesitem(e) {
				uni.pro.navigateTo('shop/secondarycard', {
					id: e.id
				})
			},
			reducetext(e) {
				if (this.recharge_amount.length < 2) {
					uni.showToast({
						title: '充值列表不能为空',
						icon: 'none'
					});
					return false
				}
				this.recharge_amount.splice(e, 1)
			},
			add() {
				if (this.recharge_amount.length > 19) {
					uni.showToast({
						title: '充值列表不能大于20条',
						icon: 'none'
					});
					return false
				}
				this.recharge_amount.push({
					"amount": 100,
					"deliver": 10
				})
			},
			async serviceseccardlist() {
				let res = await this.api.serviceseccardlist();
				this.listorder = res.data
				console.log(res.data)
			},
			async servicecreatevipbalabce(e) {
				if (this.recharge_amount == null || this.recharge_amount == '') {
					uni.showToast({
						title: '充值不能有空白',
						icon: 'none'
					});
					return false;
				}
				if (this.recharge_amount == null || this.recharge_amount == '') {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.servicecreatevipbalabce({
					recharge_amount: this.recharge_amount,
					show: this.show
				});
				if (res.code == 1) {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
			},

		}
	}
</script>

<style lang="scss">
	page {}

	.index {
		.indextext {
			padding: 12rpx 24rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #6699FF;
		}

		.baocun {
			margin: 40rpx auto;
			width: 90%;
			padding: 18rpx 0;
			background: #6699FF;
			text-align: center;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
		}

		.content_itemecharge {
			width: 100%;
			position: relative;
			padding: 16rpx 46rpx;
			background: #F9F9F9;

			.content_itemeabsolute {
				position: absolute;
				top: 0;
				right: 20rpx;
			}

			.flex-start {
				text {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #666666;
				}

				input {
					width: 162rpx;
					height: 48rpx;
					background: #FFFFFF;
					border: 2rpx solid #D0CFCF;
				}
			}
		}

		.contentfixed {
			position: fixed;
			background: #2F87FD;
			bottom: 16%;
			right: 5%;
			font-size: 52rpx;
			color: #FFFFFF;
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50%;
		}

		.content_item {
			width: 100%;
			padding: 16rpx 24rpx;
			border-bottom: 2rpx solid #E5E5E5;

			.content_itemone::before {
				margin-left: 10px;
				content: '*';
				display: inline-block;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #EE1717;
			}

			.content_itemones {
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
			}

			.content_itemone {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #333333;
			}

			.content_itemtow {
				font-size: 28rpx;

				.content_itemtow_text {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>