<template>
	<view class="page">
		<u-navbar :title="txttit" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='48' id="navbar">
		</u-navbar>
		<!-- <view class="name" v-if="type == 1">
			<view class="lt">
				模版名称
			</view>
			<view class="rt">
				<input type="text" v-model="name" placeholder="请输入模版名称"/>
			</view>
		</view> -->
        <view class="priceshuom">
        	<view class="top">
        		套餐名称
        	</view>
        	<input type="text" style="text-align: left;" v-model="explain" placeholder="请输入价格说明"/>
        </view>
		<view class="" v-if="type == 1">
			<view class="pricesz">
				<view class="top">
					价格设置
				</view>
			<!-- 	<view class="one">
					<view class="lt">
						计费单位时长
					</view>
					<view class="rt">
						<input type="text" v-model="huor" placeholder="请输入"/>  小时
					</view>
				</view> -->
				<view class="one">
					<view class="lt">
						基础价格设置
					</view>
					<view class="rt">
						<input type="text" v-model="price" placeholder="请输入"/>  元
					</view>
				</view>
				<view class="one" style="border: none;">
					<view class="lt">
						最低消费时长
					</view>
					<view class="rt">
						<input type="text" v-model="mintime" placeholder="请输入"/>  小时
					</view>
				</view>
			</view>
			<view class="pricesz">
				<view class="top">
					押金收取
				</view>
				<view class="one">
					<view class="lt">
						押金金额
					</view>
					<view class="rt">
						<input type="text" v-model="yajin" placeholder="请输入"/>  元
					</view>
				</view>
				<view class="one" style="border: none;" @click="timeshow = true">
					<view class="lt">
						自动退押金
					</view>
					<view class="rt">
						<text>{{tuitime}}</text>  <image src="https://api.ccttiot.com/smartmeter/img/static/uS5JydUQDmvbMyg4nsdo" mode=""></image>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;color: red;margin-top: 30rpx;">
				注：押金的金额需是基础价格的倍数
			</view>
		</view>
		
		
		<!-- <view class="mask" v-if="maskflag"></view> -->
		<view class="tanchuang" v-if="type == 2">
			<view class="names">
				套餐时长
			</view>
			<view class="time">
				<input type="text" v-model="huor" placeholder="请输入时长"/> 小时
			</view>
			<view class="names">
				价格
			</view>
			<view class="time">
				<input type="text" v-model="price" placeholder="请输入价格"/> 元
			</view>
		</view>
		<u-select v-model="timeshow" :list="timelist" @confirm="confirm"></u-select>
		<view class="anniu">
			<view class="tougang" style="margin-right: 30rpx;background-color: red;" @click="btnshanchu" v-if="ruleId">
				删除
			</view>
			<view class="tougang" @click="btnshop">
				{{anniutxt}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				type:'',
				maskflag:false,
				price:'',
				name:'',
				jcprice:'',
				time:'',
				mintime:'',
				yajin:'',
				explain:'',
				timeshow: false,
				timelist: [
					{
						value: '0',
						label: '立即退还'
					},{
						value: '1',
						label: '1分钟'
					},{
						value: '2',
						label: '3分钟'
					},{
						value: '3',
						label: '5分钟'
					}
				],
				tuitime:'',
				tuitimes:'',
				huor:'',
				ruleId:'',
				anniutxt:'确认新建',
				txttit:'新建收费模版'
			}
		},
		onLoad(option) {
           this.type = option.type
		   if(option.ruleId){
			   this.ruleId = option.ruleId
			   this.anniutxt = '确认修改'
			   this.txttit = '修改收费模版'
			   this.getxq()
		   }else{
			   this.anniutxt = '确认新建'
			   this.txttit = '新建收费模版'
		   }
		},
		methods: {
			// 请求套餐详情
			getxq(){
				this.$u.get(`app/rule/${this.ruleId}`).then(res =>{
					if(res.code == 200){
						this.huor = res.data.hours
						this.price = res.data.price
						this.mintime = res.data.minHours
						this.explain = res.data.explain
						this.tuitimes = res.data.refundDuration
						this.yajin = res.data.deposit
						if(res.data.refundDuration == 0){
							this.tuitime = '立即退还'
						}else{
							this.tuitime = res.data.refundDuration + '分钟'
						}
					}
				})
			},
			// 点击删除套餐
			btnshanchu(){
				let that = this
				uni.showModal({
					    title: '温馨提示',  
					    content: '您确定要删除此套餐吗?',  
					    success: function (res) {  
					        if (res.confirm) {
					            that.$u.delete(`app/rule/${that.ruleId}`).then(res =>{
					            	if(res.code == 200){
					            		uni.showToast({
					            			title: '删除成功',
					            			icon: 'success',
					            			duration: 2000
					            		})
					            		setTimeout(()=>{
					            			uni.navigateBack()
					            		},1000)
					            	}else{
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
										setTimeout(()=>{
											uni.navigateBack()
										},1000)
									}
					            })
					        }
					}  
				})
			},
			// 点击右上角编辑
			btndelflag(){
				this.delflag = true
				this.txt = '取消'
			},
			// 确认多长时间退押金
			confirm(e){
				this.tuitime = e[0].label
				if(e[0].label == '立即退还'){
					this.tuitimes = 0
				}else{
					this.tuitimes = e[0].label.slice(0,1)
				}
			},
			// 点击编辑
			btnbj(){
				this.maskflag = true
			},
			// 确定新建and修改
			btnshop(){
				if(this.yajin % this.price == 0){
					let data = {
						ruleId:this.ruleId,
						mode:this.type,
						hours:this.huor,
						price:this.price,
						minHours:this.mintime,
						explain:this.explain,
						refundDuration:this.tuitimes,
						deposit:this.yajin
					}
					if(this.anniutxt == '确认新建'){
						this.$u.post(`/app/rule`,data).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '新建成功',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}else if(this.anniutxt == '确认修改'){
						this.$u.put(`/app/rule`,data).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '修改成功',
									icon: 'success',
									duration: 2000
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
					}
				}else{
					uni.showToast({
						title: '押金需是基础价格的倍数',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 取消
			btnqx(){
				this.maskflag = false
				this.price = ''
				this.huor = ''
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-iconfont,
	/deep/ .u-title{
		padding-bottom: 20rpx;
		box-sizing: border-box;
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: .3;
		z-index: 4;
	}
	.tanchuang{
		width: 680rpx;
		max-height: 660rpx;
		margin: auto;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
		padding: 20rpx 0;
		 box-sizing: border-box;
		.btn{
			width: 680rpx;
			height: 104rpx;
			background: #48893B;
			margin: auto;
			margin-top: 30rpx;
			text-align: center;
			line-height: 104rpx;
			border-radius: 20rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.names{
			margin-top: 46rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.time{
			width: 618rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #D8D8D8;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			input{
				width: 85%;
			}
		}
		.del{
			position: absolute;
			top: 18rpx;
			right: 44rpx;
			font-size: 68rpx;
			font-weight: 600;
			z-index: 6;
		}
		.namea{
			width: 100%;
			text-align: center;
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			margin-top: 42rpx;
			margin-bottom: 14rpx;
		}
	}
	.anniu{
		width: 100%;
		height: 152rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		padding: 24rpx 36rpx;
		box-sizing: border-box;
		justify-content: space-between;
		text-align: center;
		position: fixed;
		left: 0;
		bottom: 0;
		.tougang{
			width: 680rpx;
			margin: auto;
			height: 104rpx;
			background: #48893B;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 104rpx;
			border-radius: 20rpx;
		}
	}
	.priceshuom{
		width: 680rpx;
		height: 184rpx;
		background: #FFFFFF;
		margin: auto;
		margin-top: 24rpx;
		border-radius: 20rpx;
		padding: 0 34rpx;
		padding-top: 26rpx;
		box-sizing: border-box;
		.top{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		input{
			margin-top: 26rpx;
			text-align: right;
			margin-right: 10rpx;
		}
	}
	.pricesz{
		width: 680rpx;
		max-height: 15424rpx;
		margin: auto;
		margin-top: 24rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 0 34rpx;
		padding-top: 26rpx;
		box-sizing: border-box;
		.topname{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.bianji{
				font-size: 28rpx;
				color: #48893B;
			}
		}
		.addxinjian{
			width: 610rpx;
			height: 66rpx;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 1rpx dashed #48893B;
			color: #48893B;
			text-align: center;
			line-height: 66rpx;
		}
		.bds{
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			.lt{
				width: 33%;
				text-align: center;
			}
			.cen{
				width: 33%;
				text-align: center;
			}
			.rt{
				width: 33%;
				text-align: center;
			}
		}
		.bd{
			display: flex;
			justify-content: space-between;
			background-color: #F0F0F0;
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			margin-top: 24rpx;
			.lt{
				width: 33%;
				text-align: center;
			}
			.cen{
				width: 33%;
				text-align: center;
			}
			.rt{
				width: 33%;
				text-align: center;
			}
		}
		.one{
			display: flex;
			justify-content: space-between;
			height: 110rpx;
			line-height: 110rpx;
			border-bottom: 1px solid #D8D8D8;
			.lt{
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.rt{
				display: flex;
				align-items: center;
				input{
					width: 120rpx;
					height: 110rpx;
					line-height: 110rpx;
					text-align: right;
					margin-right: 10rpx;
				}
				text{
					font-size: 32rpx;
					color: #7C7C7C;
				}
				image{
					width: 14rpx;
					height: 48rpx;
					margin-left: 10rpx;
				}
			}
		}
		.top{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
	}
	.name{
		width: 680rpx;
		height: 114rpx;
		line-height: 114rpx;
		background: #FFFFFF;
		margin: auto;
		margin-top: 28rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 34rpx;
		box-sizing: border-box;
		.lt{
			font-size: 32rpx;
			color: #3D3D3D;
		}
		.rt{
			input{
				width: 210rpx;
				height: 114rpx;
				line-height: 114rpx;
				text-align: right;
				margin-right: 10rpx;
			}
		}
	}
	page {
		background: #F6F6F6;
		padding-bottom: 180rpx;
		box-sizing: border-box;
	}

</style>