<template>
	<view class="page">
		<u-navbar title="套餐设置" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50' :custom-back="btns"></u-navbar>
		<view class="box">
			<view class="titwz">
				<view class="" style="margin-top: 0;">
					单次收费为一次性收取费用，不退款！
				</view>
				<view class="">
					智能收费为按用时和用量智能动态计费，用户提前结束、异常结束、商家关闭订单等操作都将动态智能计算费用
				</view>
				<view class="">
					例如：5元预存款，单价为1元1小时，用户使用2小时结束订单后，退回3元预存款
				</view>
				<view class="">
					提示：当订单金额低于5元，手续费都按0.05元收取！
				</view>
			</view>
			<view class="tcname">
				<view class="title">
					套餐名称
				</view>
				<input type="text" style="padding-right: 28rpx;box-sizing: border-box;" v-model="name"
					placeholder="输入套餐名称" />
			</view>
			<view class="feems1" style="border-radius: 0;" v-if="yjflag">
				<view class="one">
					<view class="feelt">
						预存
					</view>
					<view class="feert">
						<input type="text" class="yj" v-model="yajinvalue" /> <text>元</text>
					</view>
				</view>
			</view>
			<view class="feems1" style="border: 0;padding-bottom: 40rpx;box-sizing: border-box;">
				<view class="feelt">
					套餐说明
				</view>
				<view class="feert" style="margin-top: 16rpx;width: 600rpx;">
					<!-- <input type="text" placeholder="请输入套餐说明" v-model="description" /> -->
					<textarea name="" id="" cols="30" rows="10" placeholder="请输入套餐说明" style="height: 100rpx"
						v-model="description"></textarea>
				</view>
			</view>

			<view class="feebox">
				<view class="feems">
					<view class="feelt">
						收费模式
					</view>
					<view class="feert">
						<view class="">
							<u-radio-group v-model="valueone" @change="radioGroupChange">
								<u-radio @change="radioChange" v-for="(item, index) in sfms" :key="index"
									active-color="#8883f0" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<view class="feems">
					<view class="feelt">
						收费类型
					</view>
					<view class="feert">
						<view class="" v-if="valueone == '智能收费'">
							<u-radio-group v-model="valuetwo" @change="radioGroupChanges">
								<u-radio @change="radioChanges" v-for="(item, index) in sflx" :key="index"
									active-color="#8883f0" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
						<view class="" v-else>
							<u-radio-group v-model="valuetwo" @change="radioGroupChanges">
								<u-radio @change="radioChangesone" v-for="(item, index) in sfdan" :key="index"
									active-color="#8883f0" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<!-- 单次收费 -->
				<view class="" style="display: flex;margin-bottom: 20rpx;width: 100%;" v-if="feeMode == 1">
					<view class="feemss" v-if="gmsjflag"
						style="max-width: 380rpx;box-sizing: border-box;margin-top: 6rpx;">
						<view class="feelt" style="display: block;display: flex;align-items: center;">
							<text style="margin-right: 20rpx;" v-if="feeMode == 2">单价</text><text
								style="margin-right: 20rpx;" v-else>时间</text>
							<text style="margin-right: 10rpx;" v-if="feeMode == 2">每</text> <text
								style="margin-right: 10rpx;" v-else></text>
							<input style="display: inline-block;" type="number" v-model="duvalue" />
						</view>
						<view class="feert" style="margin-left: 0;width: 0;">
							<view class="feert" style="max-width: 320rpx;padding-left: 0;margin-left: 0;">
								<text style="margin-right: 20rpx;width: 66rpx;">金额</text> <input type="text" class="yj"
									v-model="qianvalue" /> <text>元</text>
							</view>
							<!-- <view class="">
								<u-radio-group v-model="valuethr" @change="radioGroupChangetime">
									<u-radio @change="radioChangetime" v-for="(item, index) in gmsj" :key="index"
										active-color="#8883f0" :name="item.name" :disabled="item.disabled">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</view> -->
						</view>
					</view>
					<view class="feems" v-if="duflag" style="display: block;box-sizing: border-box;width: 360rpx;">
						<view class="feert">
							<text style="margin-right: 20rpx;" v-if="feeMode == 2">单价</text><text
								style="margin-right: 20rpx;" v-else></text>
							<text style="margin-right: 10rpx;" v-if="feeMode == 2">每</text><text
								style="margin-right: 10rpx;" v-else></text>
							<text style="display: inline-block;margin-right: 20rpx;">度数</text> <input type="text"
								class="yj" v-model="duvalue" /> <text>度</text>
						</view>
					</view>
					<view class="feems" v-if="jeflag" style="display: block;">
						<view class="" v-if="feeMode == 1 && feeType == 1">
							<u-radio-group v-model="valuethr" @change="radioGroupChangetime">
								<u-radio @change="radioChangetime" v-for="(item, index) in gmsj" :key="index"
									active-color="#8883f0" :name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
						<view class="feert" style="width: 100%;" v-else>
							<input type="text" class="yj" v-model="qianvalue" /> <text>元</text>
						</view>
					</view>
				</view>


				<!-- 智能收费 -->
				<view class="" style="display: flex;margin-bottom: 20rpx;width: 100%;" v-else>
					<view class="feemss" v-if="gmsjflag"
						style="max-width: 380rpx;box-sizing: border-box;margin-top: 6rpx;">
						<view class="feelt" style="display: block;display: flex;align-items: center;">
							<text style="margin-right: 20rpx;" v-if="feeMode == 2">单价</text><text
								style="margin-right: 20rpx;" v-else>时间</text>
							<text style="margin-right: 10rpx;" v-if="feeMode == 2">每</text> <text
								style="margin-right: 10rpx;" v-else></text>
							<input style="display: inline-block;" type="number" v-model="duvalue" />
							<text>{{timetxt}}</text>
						</view>
						<view class="feert" style="margin-left: 0;padding-left: 80rpx;">
							<view class="">
								<u-radio-group v-model="valuethr" @change="radioGroupChangetime">
									<u-radio @change="radioChangetime" v-for="(item, index) in gmsj" :key="index"
										active-color="#8883f0" :name="item.name" :disabled="item.disabled">
										{{item.name}}
									</u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
					<view class="feems" v-if="duflag" style="display: block;box-sizing: border-box;width: 360rpx;">
						<view class="feert">
							<text style="margin-right: 20rpx;" v-if="feeMode == 2">单价</text><text
								style="margin-right: 20rpx;" v-else></text>
							<text style="margin-right: 10rpx;" v-if="feeMode == 2">每</text><text
								style="margin-right: 10rpx;" v-else></text>
							<input type="text" class="yj" v-model="duvalue" /> <text>度</text>
						</view>
					</view>
					<view class="feems" v-if="jeflag" style="display: block;">
						<view class="feert" style="width: 100%;">
							<input type="text" class="yj" v-model="qianvalue" /> <text>元</text>
						</view>
					</view>
				</view>

				<text style="font-size: 24rpx;color: red;"
					v-if="feeMode == 2 && feeType == 1 || feeMode == 2 && feeType == 2">消费金额为单价的倍数，结束订单后将返回剩余预存款</text>
			</view>
			<view class="batterybox" v-if="djflag">
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 1 ? 'fsdone' : ''" @click="btnys('#64B6A7',1)">
						谷电电价
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="gdvalue" /> <text>元/度</text>
					</view>
					<view class="dianjthre" @click="changeColor('#64B6A7')">
						全天为谷电
					</view>
				</view>
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 2 ? 'fsdtwo' : ''"
						style="color: #468DFF;border-color: #468DFF;" @click="btnys('#468DFF',2)">
						平电电价
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="pdvalue" /> <text>元/度</text>
					</view>
					<view class="dianjthre" style="background: #468DFF;" @click="changeColor('#468DFF')">
						全天为平电
					</view>
				</view>
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 3 ? 'fsdthr' : ''"
						style="color: #8883F0;border-color: #8883F0;" @click="btnys('#8883F0',3)">
						峰电电价
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="dfvalue" /> <text>元/度</text>
					</view>
					<view class="dianjthre" style="background: #8883F0;" @click="changeColor('#8883F0')">
						全天为峰电
					</view>
				</view>
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 4 ? 'fsdfor' : ''"
						style="color: #FF4444;border-color: #FF4444;" @click="btnys('#FF4444',4)">
						尖电电价
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="jdvalue" /> <text>元/度</text>
					</view>
					<view class="dianjthre" style="background: #FF4444;" @click="changeColor('#FF4444')">
						全天为尖电
					</view>
				</view>
				<view class="timeshi">
					<view class="time_item" v-for="(item,index) in 24" :key="index"
						:style="{ backgroundColor: backgroundColor[index] }" @click="btnbs(item,index)">
						{{index}} 时
					</view>
				</view>
				<view class="wz">
					提示：点击谷、平、峰、尖4个色块选中相应电价 色块，在0:00到24:00以1小时为1格的区域里涂 抹相应的色块
				</view>
			</view>
			<view class="batterybox" v-if="dangflag">
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 1 ? 'fsdone' : ''" @click="btnys('#64B6A7',1)">
						一档费用
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="gdvalue" /> <text>元/时</text>
					</view>
					<view class="dianjthre" @click="changeColor('#64B6A7')">
						全天为一档
					</view>
				</view>
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 2 ? 'fsdtwo' : ''"
						style="color: #468DFF;border-color: #468DFF;" @click="btnys('#468DFF',2)">
						二档费用
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="pdvalue" /> <text>元/时</text>
					</view>
					<view class="dianjthre" style="background: #468DFF;" @click="changeColor('#468DFF')">
						全天为二档
					</view>
				</view>
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 3 ? 'fsdthr' : ''"
						style="color: #8883F0;border-color: #8883F0;" @click="btnys('#8883F0',3)">
						三档费用
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="dfvalue" /> <text>元/时</text>
					</view>
					<view class="dianjthre" style="background: #8883F0;" @click="changeColor('#8883F0')">
						全天为三档
					</view>
				</view>
				<view class="dianj">
					<view class="djone" :id="fenshiduanindex == 4 ? 'fsdfor' : ''"
						style="color: #FF4444;border-color: #FF4444;" @click="btnys('#FF4444',4)">
						四档费用
					</view>
					<view class="dianjtwo">
						<input type="text" v-model="jdvalue" /> <text>元/时</text>
					</view>
					<view class="dianjthre" style="background: #FF4444;" @click="changeColor('#FF4444')">
						全天为四档
					</view>
				</view>
				<view class="timeshi">
					<view class="time_item" v-for="(item,index) in 24" :key="index"
						:style="{ backgroundColor: backgroundColor[index] }" @click="btnbs(item,index)">
						{{index}} 时
					</view>
				</view>
				<view class="wz">
					提示：点击一挡、二挡、三挡、四挡4个色块选中相应电价 色块，在0:00到24:00以1小时为1格的区域里涂 抹相应的色块
				</view>
			</view>


			<!-- <view class="list">
				<view class="" style="display: flex;
                        justify-content: space-between;
                        width: 100%;
                        align-items: center;">
					<view class="title">
						套餐名称
					</view>
					<input type="text" style="padding-right: 28rpx;box-sizing: border-box;" v-model="name"
						placeholder="输入套餐名称" />
				</view>
				<view class="" style="display: flex;
                        justify-content: space-between;
                        width: 100%;
                        align-items: center;margin-top: 30rpx;">
					<view class="title">
						价格（元）
					</view>
					<input type="text" style="padding-right: 28rpx;box-sizing: border-box;" v-model="price"
						placeholder="输入价格" />
				</view>
				<view class="" style="display: flex;
                        justify-content: space-between;
                        width: 100%;
                        margin-top: 30rpx;
						height: 50rpx;
						line-height: 50rpx;">
					<view class="title">
						通电时长
					</view>
					<view class="" style="display: flex;justify-content: space-between;position: relative;">
						<input type="number" style="height: 50rpx;
						line-height: 50rpx;" v-model="value" placeholder="输入通电时长" />
						<view class="picker" @click="btnxz">
							{{array[index]}} <u-icon v-if="arrflag" name="arrow-down" color="#000" size="24"></u-icon>
							<u-icon v-else name="arrow-right" color="#000" size="24"></u-icon>
						</view>
						<view class="arr_list" v-if="arrflag">
							<view class="arr_item" v-for="(item,index) in array" :key="index" @click="btnxl(index)">
								{{item}}
							</view>
						</view>
					</view>
				</view>
				<view class="title" style="margin-top: 30rpx;margin-bottom: 20rpx;">
					详细说明
				</view>
				<textarea style="height: 120rpx !important;margin-top: 40rpx;margin-bottom: 40rpx;"
					v-model="description" placeholder="输入说明解释" auto-height="true" />
			</view> -->
			<!-- 自动断点 #8883F0-->
			<view class="shebei" v-if="feeType == 2 || feeType == 3">
				<view class="sbarr" style="align-items: center;">
					<view class="" style="font-size:30rpx">低功率输出时自动断电</view> <u-switch active-color="#8883F0"
						v-model="checked"></u-switch>
				</view>
				<view class="sbarr" style="display: flex; align-items: center;margin-top: 30rpx;"
					v-if="checked == true">
					<view class="">最低</view> <input type="text" v-model="power" style="text-align: right;width: 380rpx;"
						placeholder="低于该值将结束订单并断电" />瓦
				</view>
				<view class="" style="color: #FF4444;margin-top: 20rpx;">
					该功能仅在在线状态下才能正常使用！
				</view>
			</view>
			<!-- 彩铃 -->
			<view class="shebei" v-if="feeType == 1">
				<view class="sbarr" style="align-items: center;">
					<view class="" style="font-size:30rpx">剩余时间不足语音提示</view> <u-switch active-color="#8883F0"
						v-model="checkes"></u-switch>
				</view>
				<view class="sbarr" style="display: flex; align-items: center;margin-top: 30rpx;"
					v-if="checkes == true">
					<view class="">剩余时长</view> <input type="text" v-model="powes"
						style="text-align: right;width: 380rpx;" placeholder="低于该值将响铃提醒" />分钟
				</view>
				<view class="" style="color: #FF4444;margin-top: 20rpx;">
					仅限于语音版设备并在线状态才能正常使用！
				</view>
			</view>

			<!-- 应用设备 -->
			<view class="shebei">
				<view class="sbtit">应用设备</view>
				<view class="sbarr">
					<view class="sbarrval" v-for="(item,index) in deviceList" :key="index">
						<text style="width: 100%;text-align: center;">{{item.deviceName}}</text>
						<text style="font-size: 45rpx;position: absolute;top: 0;right: 20rpx;"
							@click="sbdel(item.deviceId)">×</text>
					</view>
					<view class="btnsbadd" @click="btnaddsb">
						+
					</view>
				</view>
			</view>

			<view class="trues" @click="btnadd">
				{{title}}
			</view>
			<view v-if="title == '保存'" class="truess" @click="btndel">
				删除
			</view>
			<view v-else class="trueqx" @click="btnqx">
				取消
			</view>
		</view>

		<view v-if="btnmsk"
			style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 98;">
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				power: '',
				powes: '',
				checked: false,
				checkes: false,
				btnmsk: false,
				deviceId: '',
				yajinvalue: '',
				name: '',
				value: '',
				// description: '',
				price: '',
				title: '',
				suitId: '',
				array: ['天', '时', '分钟', '秒'],
				sfms: [{
						name: '单次收费',
						disabled: false
					},
					{
						name: '智能收费',
						disabled: false
					}
				],
				sflx: [{
						name: '计时收费',
						disabled: false
					},
					{
						name: '按量收费',
						disabled: false
					}, {
						name: '分时段按量收费',
						disabled: false
					},
					{
						name: '分时段按时收费',
						disabled: false
					}
				],
				sfdan: [{
						name: '计时收费',
						disabled: false
					},
					{
						name: '按量收费',
						disabled: false
					}
				],
				gmsj: [{
						name: '时',
						disabled: false
					},
					{
						name: '分',
						disabled: false,
					},
					{
						name: '秒',
						disabled: false
					}
				],
				index: 2,
				timetxt: '',
				timewz: '',
				arrflag: false,
				bgc: {
					backgroundColor: "#8883f0",
				},
				deviceList: [],

				list: '',
				loading: false,
				disabled: false,
				btnWidth: 180,
				show: false,
				activeid: '',
				checkboxes: [],
				tcidlist: [],
				titaoc: [],
				newobj: [],
				listflag: false,
				valueone: '单次收费',
				valuetwo: '计时收费',
				valuethr: '分',
				gmsjflag: true,
				yjflag: false,
				duflag: false,
				djflag: false,
				jeflag: true,
				dangflag: false,
				backgroundColor: Array(24).fill('#64B6A7'),
				backcolor: '',
				duvalue: '1',
				qianvalue: '',
				description: '',
				feeMode: '1', ////收费模式（1单次收费 2智能收费）
				feeType: "1", //收费类型（1计时收费 2按量收费 3分时段按量收费 4分时段按时收费）
				timeUnit: null, //时长单位1-天，2-时，3-分，4-秒
				gearAmount: [], //档位金额列表（必须4个）
				gearTime: [], //时段档位列表（必须24个）
				gdvalue: '',
				pdvalue: '',
				dfvalue: '',
				jdvalue: '',
				timevalue: '',
				contwz: '',
				contwzflag: false,
				contwzflags: false,
				fenshiduanindex: -1,
				modevalue: '',
				sn: ''
			}
		},
		onLoad(option) {
			console.log(this.deviceId, option);
			this.modevalue = option.modevalue
			this.timetxt = '分'
			if (option.sn) {
				this.sn = option.sn
			}
			if (option.suitId) {
				this.deviceId = option.id
				this.title = '保存'
				this.suitId = option.suitId
			} else {
				this.deviceId = option.id
				this.title = '确定'
			}
		},
		onShow() {
			this.getuser()
			this.getxieyi()
			if (uni.getStorageSync('tcidlist')) {
				this.deviceList = []
				this.deviceList = uni.getStorageSync('tcidlist')
				// function uniqueByProperty(arr, prop) {  
				//     const seen = new Set();  
				//     return arr.filter(item => {  
				//         const val = item[prop];  
				//         if (seen.has(val)) {  
				//             return false;  
				//         } else {  
				//             seen.add(val);  
				//             return true;  
				//         }  
				//     });  
				// }  
				// // 使用该函数对 this.deviceList 进行去重，假设我们基于 'id' 属性进行去重  
				// this.deviceList = uniqueByProperty(this.deviceList, 'id');  
				console.log(this.deviceList)
			}
			setTimeout(() => {
				if (this.suitId) {
					this.gettaocan(this.suitId)
				} else {

				}
			}, 1)
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		onUnload() {
			uni.removeStorageSync('tcidlist')
		},
		onHide() {
			uni.removeStorageSync('tcidlist')
		},
		methods: {
			btns() {
				if (this.modevalue == 1) {
					uni.reLaunch({
						url: '/page_fenbao/statulist/taocanlist/index?id=' + this.deviceId + '&modevalue=' + this
							.modevalue + '&sn=' + this.sn
					})
				} else if (this.modevalue == 2) {
					uni.reLaunch({
						url: '/page_components/newtaocan?modevalue=' + this.modevalue + '&sn=' + this.sn
					})
				}else if(this.modevalue == 3){
					uni.reLaunch({
						url: '/page_fenbao/statulist/taocanlist/index?id=' +
							this.deviceId + '&modevalue=' + this.modevalue +
							'&sn=' + this.sn
					})
				}else if(this.modevalue == 4){
					uni.reLaunch({
						url: '/page_components/bindszthr?id=' +
							this.deviceId + '&modevalue=' + this.modevalue +
							'&sn=' + this.sn
					})
				}
			},
			// 统一全天时间
			changeColor(color) {
				this.backgroundColor = Array(24).fill(color)
			},
			btnys(color, index) {
				this.fenshiduanindex = index
				this.backcolor = color
			},
			btnbs(item, index) {
				if (this.backcolor != '') {
					this.$set(this.backgroundColor, index, this.backcolor)
				}
			},

			// 用户协议
			getxieyi() {
				this.$u.get(`/app/article/licence/mch`).then(res => {
					if (res.code == 200) {
						this.contwz = res.data.content
					}
				})
			},
			// 获取用户信息
			getuser() {
				this.$u.get("/app/user/userInfo").then((res) => {
					if (res.code == 200) {
						if (res.data.readMchLicence == false) {
							this.contwzflags = true
						} else {
							this.contwzflags = false
						}
					}
				})
			},
			btnadd() {
				let regex = /^\d+(\.\d{1,2})?$/
				let regexs = /^\d+$/
				if (this.description == '') {
					uni.showToast({
						title: '套餐说明不能为空',
						icon: 'none',
						duration: 1000,
					})
				} else {
					if (this.valuethr == '分') {
						this.timeUnit = 3
						this.timetxt = '分'
					}
					this.btnmsk = true
					if (this.title == '确定') {
						// if(this.contwzflags == false){
						// this.contwzflag = false
						let colorMap = {
							"#64B6A7": 0,
							"#468DFF": 1,
							"#8883F0": 2,
							"#FF4444": 3
						}
						this.gearTime = []
						this.backgroundColor.forEach(color => {
							this.gearTime.push(colorMap[color]);
						})
						let arrs = [...this.deviceList.map(item => item.deviceId)]
						if (this.feeType == 3 || this.feeType == 4) {
							this.gearAmount = []
							this.gearAmount.push(this.gdvalue, this.pdvalue, this.dfvalue, this.jdvalue)
						}
						let data = {
							// deviceId: this.deviceId,
							name: this.name,
							value: this.feeType == 3 || this.feeType == 4 ? (this.duvalue = null) : this.duvalue,
							price: this.qianvalue,
							deposit: this.yajinvalue,
							description: this.description,
							timeUnit: this.feeType == 3 || this.feeType == 4 || this.feeType == 2 ? (this.timeUnit =
								null) : this.timeUnit,
							deviceIds: arrs,
							feeMode: this.feeMode,
							feeType: this.feeType,
							gearAmount: this.gearAmount,
							gearTime: this.feeType === 3 || this.feeType === 4 ? this.gearTime : (this.gearTime = []),
							enabledLowPowerClose: this.checked,
							enabledVoice: this.checkes,
							lowPower: this.power,
							voiceMinutes: this.powes
						}
						this.$u.post('/app/suit', data).then((res) => {
							if (res.code == 200) {
								uni.removeStorageSync('tcidlist')
								uni.showToast({
									title: '新建套餐成功',
									icon: 'success',
									duration: 1000,
								})
								setTimeout(() => {
									this.btnmsk = false
									console.log(this.modevalue);
									if (this.modevalue == 1) {
										uni.reLaunch({
											url: '/page_fenbao/statulist/taocanlist/index?id=' +
												this.deviceId + '&modevalue=' + this.modevalue +
												'&sn=' + this.sn
										})
									} else if (this.modevalue == 2) {
										uni.reLaunch({
											url: '/page_components/newtaocan?modevalue=' + this
												.modevalue + '&sn=' + this.sn
										})
									}else if(this.modevalue == 3){
										uni.reLaunch({
											url: '/page_fenbao/statulist/taocanlist/index?id=' +
												this.deviceId + '&modevalue=' + this.modevalue +
												'&sn=' + this.sn
										})
									}else if(this.modevalue == 4){
										uni.reLaunch({
											url: '/page_components/bindszthr?id=' +
												this.deviceId + '&modevalue=' + this.modevalue +
												'&sn=' + this.sn
										})
									}
								}, 1000)
							} else {
								this.btnmsk = false
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1000,
								})
							}
						})
						// }else{
						// 	this.contwzflag = true
						// }
					} else {
						let colorMap = {
							"#64B6A7": 0,
							"#468DFF": 1,
							"#8883F0": 2,
							"#FF4444": 3
						}
						this.gearTime = []
						this.backgroundColor.forEach(color => {
							this.gearTime.push(colorMap[color]);
						})
						let arrs = [...this.deviceList.map(item => item.deviceId)]
						if (this.feeType == 3 || this.feeType == 4) {
							this.gearAmount = []
							this.gearAmount.push(this.gdvalue, this.pdvalue, this.dfvalue, this.jdvalue)
						}
						let data = {
							suitId: this.suitId,
							name: this.name,
							value: this.duvalue,
							price: this.qianvalue,
							deposit: this.yajinvalue,
							description: this.description,
							timeUnit: this.timeUnit,
							deviceIds: arrs,
							feeMode: this.feeMode,
							feeType: this.feeType,
							gearAmount: this.gearAmount,
							gearTime: this.feeType === 3 || this.feeType === 4 ? this.gearTime : (this.gearTime = []),
							enabledLowPowerClose: this.checked,
							enabledVoice: this.checkes,
							lowPower: this.power,
							voiceMinutes: this.powes
						}
						this.$u.put('/app/suit', data).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: '保存套餐成功',
									icon: 'success',
									duration: 1000,
								})
								setTimeout(() => {
									this.btnmsk = false
									if (this.modevalue == 1) {
										uni.reLaunch({
											url: '/page_fenbao/statulist/taocanlist/index?id=' +
												this.deviceId + '&modevalue=' + this.modevalue +
												'&sn=' + this.sn
										})
									} else if (this.modevalue == 2) {
										uni.reLaunch({
											url: '/page_components/newtaocan?modevalue=' + this
												.modevalue + '&sn=' + this.sn
										})
									} else if (this.modevalue == 3) {
										uni.reLaunch({
											url: '/page_fenbao/statulist/taocanlist/index?id=' +
												this.deviceId + '&modevalue=' + this.modevalue +
												'&sn=' + this.sn
										})
									}

								}, 1000)
							} else {
								this.btnmsk = false
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 1000,
								})
							}
						})
					}
				}
			},

			// 收费模式 单次and智能
			radioChange(e) {
				// console.log(e);
				if (e == '单次收费') {
					this.feeMode = 1
					this.valuetwo = '计时收费'
					this.feeType = 1
					this.gmsjflag = true
					this.jeflag = true
					this.duflag = false
					this.yjflag = false
					this.djflag = false
					this.dangflag = false
				} else {
					this.feeMode = 2
					this.yjflag = true
				}
			},
			radioGroupChange(e) {
				// console.log(e);
			},
			// 收费类型// 收费类型// 收费类型
			radioChangesone(e) {
				if (e == '按量收费') {
					this.feeType = 2
					this.duflag = true
					this.jeflag = true
					this.gmsjflag = false
					this.yjflag = false
					this.djflag = false
					this.dangflag = false
				} else if (e == '计时收费') {
					this.feeType = 1
					this.gmsjflag = true
					this.jeflag = true
					this.duflag = false
					this.yjflag = false
					this.djflag = false
					this.dangflag = false
				}
			},
			radioChanges(e) {
				if (e == '按量收费') {
					this.feeType = 2
					this.duflag = true
					this.jeflag = true
					this.gmsjflag = false
					this.yjflag = true
					this.djflag = false
					this.dangflag = false
				} else if (e == '计时收费') {
					this.feeType = 1
					this.gmsjflag = true
					this.jeflag = true
					this.duflag = false
					this.yjflag = true
					this.djflag = false
					this.dangflag = false
				} else if (e == '分时段按量收费') {
					this.feeType = 3
					this.gmsjflag = false
					this.jeflag = false
					this.duflag = false
					this.yjflag = true
					this.djflag = true
					this.dangflag = false
				} else if (e == '分时段按时收费') {
					this.feeType = 4
					this.gmsjflag = false
					this.dangflag = true
					this.jeflag = false
					this.duflag = false
					this.yjflag = true
					this.djflag = false
				}
			},
			radioGroupChanges(e) {
				// console.log(e);
			},
			// 收费类型// 收费类型// 收费类型// 收费类型

			// 收费时间  收费时间  收费时间  收费时间
			radioChangetime(e) {
				if (e == '时') {
					this.timeUnit = 2
					this.timetxt = '时'
				} else if (e == '分') {
					this.timeUnit = 3
					this.timetxt = '分'
				} else {
					this.timeUnit = 4
					this.timetxt = '秒'
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChangetime(e) {
				// console.log(e);
			},
			// 收费时间  收费时间  收费时间  收费时间

			// 点击删除套餐里面的设备
			sbdel(id) {
				if (this.title == '确定') {
					this.deviceList = this.deviceList.filter(item => item.deviceId !== id)
				} else {
					let that = this
					uni.showModal({
						title: '提示',
						content: '您是否要将应用此套餐设备删除？',
						success: function(res) {
							if (res.confirm) {
								// console.log(id);
								const indexInTcidList = that.tcidlist.indexOf(id);
								if (indexInTcidList !== -1) {
									that.tcidlist.splice(indexInTcidList, 1);
								} else {
									that.tcidlist.push(id);
								}
								// console.log(that.tcidlist,indexInTcidList,'0202'); 
								let data = {
									deviceIds: that.tcidlist,
									suitId: that.suitId
								}
								that.$u.put(`/app/suit`, data).then((res) => {
									if (res.code == 200) {
										uni.showToast({
											title: res.msg,
											icon: 'success',
											duration: 1000,
										})
										that.tcidlist = []
										that.gettaocan(that.suitId)
									}
								})
							} else if (res.cancel) {

							}
						}
					})
				}
			},

			btnqx() {
				uni.removeStorageSync('tcidlist')
				if (this.modevalue == 1) {
					uni.reLaunch({
						url: '/page_fenbao/statulist/taocanlist/index?id=' + this.deviceId + '&modevalue=' + this
							.modevalue + '&sn=' + this.sn
					})
				} else if (this.modevalue == 2) {
					uni.reLaunch({
						url: '/page_components/newtaocan?modevalue=' + this.modevalue + '&sn=' + this.sn
					})
				} else if (this.modevalue == 3) {
					uni.reLaunch({
						url: '/page_fenbao/statulist/taocanlist/index?id=' + this.deviceId + '&modevalue=' + this
							.modevalue + '&sn=' + this.sn
					})
				}else if (this.modevalue == 4) {
					uni.reLaunch({
						url: '/page_components/bindszthr?id=' +
							this.deviceId + '&modevalue=' + this.modevalue +
							'&sn=' + this.sn
					})
				}

			},
			// bindPickerChange(e) {
			// 	this.index = e.detail.value
			// },
			// 跳转选择设备	
			btnaddsb() {
				uni.navigateTo({
					url: '/page_components/shebeixz?id=' + this.suitId + '&title=' + this.title + '&list=' + JSON
						.stringify(this.deviceList)
				})
			},
			btnxl(index) {
				this.index = index
				this.arrflag = false
			},
			btnxz() {
				if (this.arrflag == true) {
					this.arrflag = false
				} else {
					this.arrflag = true
				}
			},

			gettaocan(suitId) {
				this.$u.get(`/app/suit/${suitId}`).then((res) => {
					if (res.code == 200) {
						this.name = res.data.name
						this.qianvalue = res.data.price
						this.yajinvalue = res.data.deposit
						this.duvalue = res.data.value
						this.description = res.data.description
						this.deviceList = res.data.deviceList
						this.checked = res.data.enabledLowPowerClose
						this.checkes = res.data.enabledVoice
						this.power = res.data.lowPower
						this.powes = res.data.voiceMinutes
						console.log(this.powes, res.data.voiceMinutes)
						this.deviceList.forEach(item => {
							this.tcidlist.push(item.deviceId)
						})
						if (res.data.gearAmount) {
							this.gdvalue = res.data.gearAmount[0]
							this.pdvalue = res.data.gearAmount[1]
							this.dfvalue = res.data.gearAmount[2]
							this.jdvalue = res.data.gearAmount[3]
						}
						if (res.data.timeUnit == 2) {
							this.valuethr = '时'
							this.timeUnit = 2
							this.timetxt = '时'
						} else if (res.data.timeUnit == 3) {
							this.valuethr = '分'
							this.timeUnit = 3
							this.timetxt = '分'
						} else if (res.data.timeUnit == 4) {
							this.valuethr = '秒'
							this.timeUnit = 4
							this.timetxt = '秒'
						}
						if (res.data.feeMode == 1) {
							this.valueone = '单次收费'
							this.feeMode = 1
							this.yjflag = false
						} else {
							this.valueone = '智能收费'
							this.feeMode = 2
							this.yjflag = true
						}
						if (res.data.feeType == 1) {
							this.valuetwo = '计时收费'
							this.feeType = 1
							this.gmsjflag = true
							this.jeflag = true
							this.duflag = false
							// if(this.feeMode = 1){
							// 	this.yjflag = false
							// }else{
							// 	this.yjflag = true
							// }
							this.djflag = false
							this.dangflag = false
						} else if (res.data.feeType == 2) {
							this.valuetwo = '按量收费'
							this.feeType = 2
							this.duflag = true
							this.jeflag = true
							this.gmsjflag = false
							// if(this.feeMode = 1){
							// 	this.yjflag = false
							// }else{
							// 	this.yjflag = true
							// }
							this.djflag = false
							this.dangflag = false
						} else if (res.data.feeType == 3) {
							this.valuetwo = '分时段按量收费'
							this.feeType = 3
							this.gmsjflag = false
							this.jeflag = false
							this.duflag = false
							// this.yjflag = true
							this.djflag = true
							this.dangflag = false
						} else if (res.data.feeType == 4) {
							this.valuetwo = '分时段按时收费'
							this.feeType = 4
							this.gmsjflag = false
							this.dangflag = true
							this.jeflag = false
							this.duflag = false
							// this.yjflag = true
							this.djflag = false
						}
						if (res.data.gearTime.length > 0) {
							let colorMap = {
								0: "#64B6A7",
								1: "#468DFF",
								2: "#8883F0",
								3: "#FF4444"
							}
							let colorsFromGearTime = res.data.gearTime.map(index => colorMap[index] ||
								'defaultColor')
							this.backgroundColor = colorsFromGearTime
						} else {
							this.backgroundColor = Array(24).fill('#64B6A7')
						}
					}
				})
			},
			btndel() {
				this.btnmsk = true
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除该套餐吗？',
					success: function(res) {
						if (res.confirm) {
							that.$u.delete(`/app/suit/${that.suitId}`).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'success',
										duration: 1000,
									})
									setTimeout(() => {
										that.btnmsk = false
										if (that.modevalue == 1) {
											uni.reLaunch({
												url: '/page_fenbao/statulist/taocanlist/index?id=' +
													that.deviceId + '&modevalue=' +
													that.modevalue
											})
										} else if (that.modevalue == 2) {
											uni.reLaunch({
												url: '/page_components/newtaocan?modevalue=' +
													that.modevalue
											})
										}
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1000,
									})
									that.btnmsk = false
								}
							})
						} else if (res.cancel) {

						}
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	#fsdone {
		background-color: #64B6A7;
		color: #fff !important;
	}

	#fsdtwo {
		background-color: #468DFF;
		color: #fff !important;
	}

	#fsdthr {
		background-color: #8883F0;
		color: #fff !important;
	}

	#fsdfor {
		background-color: #FF4444;
		color: #fff !important;
	}

	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}

	/deep/ .uicon-checkbox-mark {
		padding-bottom: 0 !important;
	}

	// 收费模式
	.batterybox {
		width: 654rpx;
		height: 980rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		filter: blur(0px);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 24rpx 28rpx;
		box-sizing: border-box;

		.wz {
			font-size: 28rpx;
			color: #3D3D3D;
			margin-top: 30rpx;
		}

		.timeshi {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 52rpx;

			.time_item {
				width: 134rpx;
				height: 48rpx;
				// background: #64B6A7;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-top: 18rpx;
				color: #fff;
				text-align: center;
				line-height: 48rpx;
			}
		}

		.dianj {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 26rpx;

			.djone {
				width: 134rpx;
				height: 58rpx;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				border: 2rpx solid #64B6A7;
				color: #64B6A7;
				text-align: center;
				line-height: 54rpx;
			}

			.dianjtwo {
				display: flex;
				align-items: center;

				input {
					width: 172rpx;
					height: 58rpx;
					background: #D8D8D8;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}

			.dianjthre {
				width: 134rpx;
				height: 58rpx;
				background: #64B6A7;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				color: #fff;
				text-align: center;
				font-size: 24rpx;
				line-height: 58rpx;
			}
		}
	}

	.feems1 {

		padding-bottom: 20rpx;
		box-sizing: border-box;
		background: #fff;
		width: 654rpx;
		margin: auto;
		padding: 15rpx 24rpx;
		// margin-top: 20rpx;
		border-radius: 0 0 20rpx 20rpx;

		.one {
			display: flex;
			align-items: center;
		}

		.feert {
			width: 430rpx;
			display: flex;
			align-items: center;

			.yj {
				width: 172rpx;
				height: 58rpx;
				background: #D8D8D8;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				// padding-left: 30rpx;
				text-align: center;
				box-sizing: border-box;
				margin-right: 20rpx;
			}
		}

		.feelt {
			width: 174rpx;
			height: 42rpx;
			font-size: 30rpx;
			color: #000000;

			input {
				width: 172rpx;
				height: 58rpx;
				background: #D8D8D8;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}

	.feebox {
		width: 654rpx;
		max-height: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		filter: blur(0px);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 15rpx 24rpx;
		box-sizing: border-box;

		.feemss {
			border-bottom: 2rpx solid #D8D8D8;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			box-sizing: border-box;

			.txt {
				display: inline-block;
				width: 174rpx;
			}

			.feert {
				width: 430rpx;
				display: flex;
				margin-left: 174rpx;
				align-items: center;
				margin-top: 30rpx;
				justify-content: space-between;

				.yj {
					width: 172rpx;
					height: 58rpx;
					background: #D8D8D8;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					// padding-left: 30rpx;
					text-align: center;
					box-sizing: border-box;
					margin-right: 20rpx;
				}
			}

			.feelt {
				// width: 174rpx;
				height: 42rpx;
				font-size: 30rpx;
				color: #000000;
				display: flex;
				align-items: center;

				input {
					width: 172rpx;
					height: 58rpx;
					background: #D8D8D8;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}
		}

		.feems {
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #D8D8D8;
			padding-bottom: 20rpx;
			padding-top: 20rpx;
			box-sizing: border-box;

			.feert {
				width: 430rpx;
				display: flex;
				align-items: center;

				.yj {
					width: 172rpx;
					height: 58rpx;
					background: #D8D8D8;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					// padding-left: 30rpx;
					text-align: center;
					box-sizing: border-box;
					margin-right: 20rpx;
				}
			}

			.feelt {
				width: 174rpx;
				height: 42rpx;
				font-size: 30rpx;
				color: #000000;

				input {
					width: 172rpx;
					height: 58rpx;
					background: #D8D8D8;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					text-align: center;
					margin-right: 20rpx;
				}
			}
		}
	}

	.shebei {
		width: 654rpx;
		max-height: 55%;
		overflow: scroll;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		-webkit-filter: blur(0px);
		filter: blur(0px);
		margin: auto;
		border-radius: 30rpx;
		padding: 28rpx 38rpx;
		box-sizing: border-box;
		margin-top: 40rpx;

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

		.sbarr {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: space-between;

			.sbarrval {
				position: relative;
				width: 48%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #8883F0;
				color: #fff;
				text-align: right;
				border-radius: 30rpx;
				margin-top: 20rpx;
				font-size: 30rpx;
				text-align: right;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				box-sizing: border-box;
			}
		}

		.btnsbadd {
			width: 48%;
			height: 80rpx;
			line-height: 70rpx;
			background-color: #8883F0;
			color: #fff;
			text-align: center;
			border-radius: 30rpx;
			margin-top: 20rpx;
			font-size: 65rpx;
		}

	}

	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.arr_list {
		position: absolute;
		top: 50rpx;
		right: -20rpx;
		background: #FFFFFF;
		width: 140rpx;
		height: 245rpx;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
		padding: 5rpx 0;
		box-sizing: border-box;
		border-radius: 10rpx;
		z-index: 99;
		opacity: 0;
		animation-name: fadeIn;
		animation-duration: .5s;
		animation-fill-mode: forwards;

		.arr_item:last-child {
			border: none !important;
		}

		.arr_item {
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1px solid #ccc;
		}
	}

	.picker {
		margin-left: 10rpx;
	}

	.page {
		width: 750rpx;
		overflow: hidden;
		height: 100vh;

		.box {
			width: 750rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 32rpx;
			padding-bottom: 400rpx;
			box-sizing: border-box;
			height: 100vh;
			overflow: scroll;
			// overflow: hidden;

			.tcname {
				width: 654rpx;
				height: 82rpx;
				line-height: 82rpx;
				margin: auto;
				margin-top: 24rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				border-radius: 20rpx 20rpx 0 0;
				display: flex;
				padding-left: 28rpx;
				box-sizing: border-box;

				.title {
					font-size: 30rpx;
					color: #000000;
					margin-right: 52rpx;
				}

				input {
					height: 82rpx;
					line-height: 82rpx;
				}
			}

			.titwz {
				width: 654rpx;
				height: 450rpx;
				background: #F0EFFF;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
				padding: 16rpx 28rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin: auto;

				view {
					font-size: 28rpx;
					color: #8883F0;
					margin-top: 22rpx;
				}
			}

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

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

				input {
					// margin-top: 30rpx;
					// padding-left: 100rpx;
					text-align: right;
				}
			}

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

			.truess {
				width: 290rpx;
				height: 84rpx;
				background: red;
				filter: blur(0px);
				text-align: center;
				line-height: 84rpx;
				position: fixed;
				bottom: 76rpx;
				right: 33%;
				transform: translateX(-50%);
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
			}

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