<template>
	<view class="index">
		<view class="indextext">
			基本信息
		</view>
		<view class="onecontent">
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					标题
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.title" type="text" placeholder="请输入标题" />
				</view>
			</view>

			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					说明
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.show" type="text" placeholder="请输入说明" />
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					价格
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.price" @input="checkNum(1,$event)"
						type="text" placeholder="请输入价格" />
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					次数
				</view>
				<u-number-box integer v-model="form.frequ"></u-number-box>
			</view>
			<view @click="showsheetone = true" class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					会员卡有效期
				</view>
				<text>{{form.duration_str}}</text>
				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
			</view>
			<view @click="demos" class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					购买须知
				</view>
				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
			</view>

		</view>

		<view class="baocun" @click="servicecreateseccard">
			保存
		</view>
		<u-action-sheet :actions="oneactionslist" :show="showsheetone" @select="selectClick"></u-action-sheet>
	</view>
</template>
<script>
	import editor from '@/components/editor/editor.vue';
	export default {
		components: {
			//引入项目组件
			editor
		},
		data() {
			return {
				showsheetone: false,
				oneactionslist: [{
						id: 1,
						name: '一个月',
					},
					{
						id: 2,
						name: '半年', //开启后文字不显示
					}, {
						id: 3,
						name: '一年', //开启后文字不显示
					}
				],
				form: {
					frequ: 1
				},
			}
		},
		async onLoad(e) {
			let ress = await this.api.staffgetvipduratio();
			this.oneactionslist = ress.data
			if (e.id) {
				uni.setNavigationBarTitle({
					title: '修改次卡'
				})
				let res = await this.api.serviceseccarddesc({
					id: e.id
				});
				this.form = res.data
			} else {
				uni.setNavigationBarTitle({
					title: '添加次卡'
				})
			}
		},
		mounted() {
			this.$bus.$on('showeditors', this.demo)
		},
		methods: {
			selectClick(e) {
				this.form.duration = e.id
				this.form.duration_str = e.name
				this.showsheetone = false
			},
			demo(data) {
				console.log(data)
				this.form.notice = data
			},
			demos() {
				uni.pro.navigateTo('shop/editor/editor', {
					id: this.form.id
				})
			},
			// 方法
			checkNum(a, e) {
				let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
				console.log(val);
				if (!val) {
						this.form.price = '';
					return
				}
				var reg = /[^\d.]/g
				// 只能是数字和小数点，不能是其他输入
				val = val.replace(reg, "")
				// // 保证第一位只能是数字，不能是点
				val = val.replace(/^\./g, "");
				// // 小数只能出现1位
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				// // 小数点后面保留2位
				val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
				console.log(val);
				this.$nextTick(() => {
						this.form.price = val;
				})
			},
			async servicecreateseccard() {
				if (this.form.title == null || this.form.title == '') {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.show == null || this.form.show == '') {
					uni.showToast({
						title: '说明不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.price == null || this.form.price == '') {
					uni.showToast({
						title: '价格不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.frequ == null || this.form.frequ == '') {
					uni.showToast({
						title: '次数不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.notice == null || this.form.notice == '') {
					uni.showToast({
						title: '购买须知不能为空',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.servicecreateseccard({
					title: this.form.title,
					show: this.form.show,
					price: this.form.price,
					frequ: this.form.frequ,
					notice: this.form.notice,
					id: this.form.id,
					duration:this.form.duration
				});
				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_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_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;
				}
			}
		}

		.onecontent {
			background: #ffffff;

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

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

				.onecontent_itemright {
					flex: 3;

					.onecontent_itemrighttext {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #999999;
					}

					.onecontent_itemrightimges {
						width: 112rpx;
						height: 112rpx;
						background: #F5F5F5;
						border-radius: 10rpx;
						font-size: 40rpx;
						color: #878787;

						image {
							width: 112rpx;
							height: 112rpx;
						}
					}

					.onecontent_itemright_text {
						width: 100%;
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #999999;
					}
				}

				.flex-start {
					.fourcontent {
						.fourcontent_item {
							position: relative;
							margin-top: 16rpx;
							margin-left: 20rpx;
							width: 112rpx;
							height: 112rpx;
							border-radius: 16rpx;

							image {
								width: 112rpx;
								height: 112rpx;
								border-radius: 16rpx;
							}

							.fourcontent_itemtext {
								position: absolute;
								top: 0rpx;
								right: 0rpx;
							}
						}
					}
				}

			}

			.onecontent {
				background: #ffffff;
				padding-bottom: 20rpx;

				.onecontentscrolls {
					width: 564rpx;
					height: 190rpx;
					margin: 0 auto;
					border-radius: 10rpx;
					background: #f5f5f5;

					.onecontentscrollsimage {
						width: 564rpx;
						height: 190rpx;
					}
				}

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

				.onecontentscrolllang {
					padding: 28rpx 20rpx;

					.onecontentscroll_item {
						background: #f5f5f5;
						border-radius: 10rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}

				.onecontentscroll {
					padding: 28rpx 20rpx;

					.onecontentscroll_item {
						position: relative;

						.onecontentscroll_itemimage {
							border-radius: 10rpx;
							width: 140rpx;
							height: 140rpx;
						}

						.onecontentscrollicon {
							position: absolute;
							top: -10rpx;
							right: -10rpx;

						}
					}

				}
			}
		}
	}
</style>