<template>
	<view class="box">
		<view class="info">
			<u-form :model="form" ref="uForm" label-width="250rpx">
				<u-form-item prop="openServe" label="开通服务" :label-style="{fontSize: '36rpx',color: '#31353D'}"
					:border-bottom="form['openServe']">
					<view class="flex-row flex-jus-end">
						<u-switch v-model="form['openServe']"></u-switch>
					</view>
				</u-form-item>
				<u-form-item prop="price" v-if="form['openServe']" label="挂号费用">
					<view class="flex-row flex-jus-end flex-ali-center">
						<u-input v-model="form.price" placeholder="挂号费用价格" type="digit" input-align="right"
							@input="inputChange($event,'price')" />
						<d-text text="元" className="fs-3 content-c"></d-text>
					</view>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: () => {
					return {

					}
				}
			}
		},
		data() {
			return {
				form: this.info,
				rules: {
					price: [{
						required: true,
						validator: (rule, value, callback) => {
							if (this.form['price'] && this.form['price'] >= 0) {
								callback();
							} else {
								callback(new Error('挂号费用'));
							}
						},
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		async onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {

		},
		methods: {
			inputChange(val, key) {
				var that = this;
				var idx = -1;
				var value = val.replace(/[^0-9.]/g, '').trim();
				if (value == "") {
					return;
				}

				idx = value.indexOf('.');
				var raw = value;
				if (idx > 0) {
					var ext = value.slice(idx + 1, idx + 3)
					if (ext.indexOf('.') > -1) {
						ext = ext.slice(0, ext.indexOf('.'));
					}
					if (ext.length > 2) {
						ext = ext.slice(0, 2);
					}

					value = value.slice(0, idx) + '.' + ext;

				} else if (idx == 0) {
					value = '0.'
				}

				setTimeout(function() {
					that.form[key] = value
				}, 0);
			},
			async submit() {
				let valid = await this.$refs.uForm.validate();
				if ( valid) {
					this.$emit('submit_data', this.form);
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		padding: 0 20rpx;
		box-sizing: content-box;


	}

	.title {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #31353D;
	}

	.info {
		border-radius: 8rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 0rpx 32rpx;
		margin-top: 20rpx;

		.info-hiht {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #A7ABB0;
			height: 80rpx;
			line-height: 40rpx;
			margin-bottom: 32rpx;
		}

		.info-highlight {
			color: #FFAB40;
		}
	}

	.slot-btn {
		width: 289rpx;
		height: 170rpx;
		border-radius: 8rpx;
		background-color: #F3F4F5;
	}

	.addBtn {
		width: 307rpx;
		height: 180rpx;
		background: #F3F4F5;
		border-radius: 8rpx;
		position: relative;

		image {
			width: 307rpx;
			height: 180rpx;
			border-radius: 8rpx;
		}

		&_hiht {
			position: absolute;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			top: 38rpx;
		}
	}

	.goOn {
		padding-top: 24rpx;
		width: 128rpx;
		height: 128rpx;
	}
</style>
