<template>
	<view class="page">
		<u-navbar title="新增套餐" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
		<view class="box">
			<view class="list">
				<view class="title">
					套餐名称
				</view>
				<input type="text" v-model="name" placeholder="输入套餐名称" />
				<view class="title" style="margin-top: 50rpx;">
					价格（元）
				</view>
				<input type="text" v-model="price" placeholder="输入价格" />
				<view class="title" style="margin-top: 50rpx;">
					通电时长
				</view>
				<input type="text" v-model="value" placeholder="输入通电时长" />
				<view class="title" style="margin-top: 50rpx;">
					详细说明
				</view>
				<input type="text" v-model="description" placeholder="输入说明解释" />
			</view>
			<view class="trues" @click="btnadd">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceId: '',
				name: '',
				value: '',
				description: '',
				price: '',
				title: '',
				suitId:''
			}
		},
		onLoad(option) {
			if (option.suitId) {
				this.deviceId = option.id
				this.title = '修改'
				this.suitId = option.suitId
				this.gettaocan(option.suitId)
			} else {
				this.deviceId = option.id
				this.title = '确定'
			}
		},
		methods: {

			gettaocan(suitId) {
				this.$u.get(`/app/suit/${suitId}`).then((res) => {
					if (res.code == 200) {
						this.name = res.data.name
						this.price = res.data.price
						this.value = res.data.value
						this.description = res.data.description
					}
				})
			},

			btnadd() {
				let regex = /^\d+(\.\d{1,2})?$/
				let regexs = /^\d+$/
				if(this.name == ''){
					uni.showToast({
						title: '套餐名称不能为空',
						icon: 'none',
						duration: 1000,
					})
				}else if(this.price == ''){
					uni.showToast({
						title: '价格不能为空',
						icon: 'none',
						duration: 1000,
					})
				}else if(!regex.test(this.price)){
					uni.showToast({
						title: '价格必须是数字且小数点只能两位',
						icon: 'none',
						duration: 2000,
					})
				}else if(this.value == ''){
					uni.showToast({
						title: '时长不能为空',
						icon: 'none',
						duration: 1000,
					})
				}else if(!regexs.test(this.value)){
					uni.showToast({
						title: '时长必须是整数',
						icon: 'none',
						duration: 2000,
					})
				} else if(this.description == ''){
					uni.showToast({
						title: '详细说明不能为空',
						icon: 'none',
						duration: 1000,
					})
				}else{
					if (this.title == '确定') {
						let data = {
							deviceId: this.deviceId,
							name: this.name,
							value: this.value,
							price: this.price,
							description: this.description
						}
						this.$u.post('/app/suit', data).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '新建套餐成功',
									icon: 'success',
									duration: 1000,
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						})
					}else{
						let data = {
							suitId:this.suitId,
							deviceId: this.deviceId,
							name: this.name,
							value: this.value,
							price: this.price,
							description: this.description
						}
						this.$u.put('/app/suit', data).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '修改套餐成功',
									icon: 'success',
									duration: 1000,
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 32rpx;

			.list {
				width: 654rpx;
				height: 728rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				filter: blur(0px);
				margin: auto;
				border-radius: 30rpx;
				padding: 48rpx 38rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: 600;
				}

				input {
					margin-top: 30rpx;
				}
			}

			.trues {
				width: 590rpx;
				height: 84rpx;
				background: #8883F0;
				filter: blur(0px);
				text-align: center;
				line-height: 84rpx;
				position: fixed;
				bottom: 76rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
			}
		}
	}
</style>