<template>
	<view class="ability-box">
		<view class="attr-list">
			<view class="attr-list-item" v-for="(item,index) in dataList" :key="index">
				<view class="checkbox-box">
					<u-checkbox 
						size="40"
						v-model="item.checked"
						@change="changeCheck($event,index)"
					></u-checkbox>
				</view>
				<view class="attr-list-item-content"  :class="item.ioRequired?'required':''">
					<!-- 选择器 -->
					<iots-select 
					 v-if="item.ioFormType == 'select'"
					 :name="item.ioName"
					 :disabled="false"
					 v-model="item.value"
					 :selectList="item.ioObj.enums"
					 @change="changeData($event,index)"
					 :logShow="false"
					></iots-select>
					<!-- 步进器 -->
					<iots-number-box 
					 v-else-if="item.ioFormType == 'number'"
					 :name="item.ioName"
					 :disabled="false"
					 :min="parseFloat(item.IoDeployForm.min || 0)"
					 :max="parseFloat(item.IoDeployForm.max || 100)"
					 :step="parseFloat(item.IoDeployForm.step || 1)"
					 :logShow="false"
					 @change="changeData($event,index)"
					 v-model="item.value"
					></iots-number-box>
					<!-- 输入框 -->
					<iots-input
					 v-else-if="item.ioFormType == 'text'"
					 :name="item.ioName"
					 :disabled="false"
					 v-model="item.value"
					 @change="changeData($event,index)"
					 :logShow="false"
					></iots-input>
					<!-- 开关 -->
					<iots-switch
					 v-else-if="item.ioFormType == 'switch'"
					 :name="item.ioName"
					 :disabled="false"
					 v-model="item.value"
					 @change="changeData($event,index)"
					 :logShow="false"
					></iots-switch>
					<!-- 滑块 -->
					<iots-slider 
					 v-else-if="item.ioFormType == 'slider'"
					 :name="item.ioName"
					 :disabled="false"
					 :min="parseFloat(item.IoDeployForm.min || 0)"
					 :max="parseFloat(item.IoDeployForm.max || 100)"
					 :step="parseFloat(item.IoDeployForm.step || 1)"
					 v-model="item.value"
					 @change="changeData($event,index)"
					 :logShow="false"
					></iots-slider>
					<!-- 时间选择器 -->
					<iots-select-time
					 v-else-if="item.ioFormType == 'time_picker'"
					 :name="item.ioName"
					 :disabled="false"
					 v-model="item.value"
					 @change="changeData($event,index)"
					 :logShow="false"
					></iots-select-time>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<u-checkbox
				size="40"
				v-model="isSelectAll"
				@change="changeCheckAll"
			>全选</u-checkbox>
			<button @click="execute">执行</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import IotsSelect from '@/components/iot-components/select/iots-select.vue'
	import IotsNumberBox from "@/components/iot-components/number-box/iots-number-box.vue"
	import IotsSwitch from '@/components/iot-components/switch/iots-switch.vue'
	import IotsSlider from '@/components/iot-components/slider/iots-slider.vue'
	import IotsInput from '@/components/iot-components/input/iots-input.vue'
	import IotsSelectTime from '@/components/iot-components/select-time/iots-select-time.vue'
	export default{
		data(){
			return {
				abilityObj:{},
				dataList:[],
				devId:'',
				pk:'',
				isSelectAll:true,
			}
		},
		components: {
			IotsSelect,
			IotsSelectTime,
			IotsNumberBox,
			IotsSwitch,
			IotsSlider,
			IotsInput,
		},
		onLoad(option) {
			let ability = JSON.parse(decodeURIComponent(option.ability))
			console.log("当前参数",ability);
			this.abilityObj = ability;
			this.devId = option.devId;
			this.pk = option.pk;
			// this.dataList = ability.ioObj.in;
			this.formatData(ability.ioObj.in);
			uni.setNavigationBarTitle({
				title:ability.name
			})
		},
		methods:{
			formatData(list){
				let datalist = list.map(item=>{
					if(item.ioFormType == 'number' || item.ioFormType == 'slider'){
						if(item.IoDeployForm.min == undefined){
							item.IoDeployForm.min = 0;
							item.value = 0;
						}else{
							item.value = parseFloat(item.IoDeployForm.min);
						}
					}else if(item.ioFormType == 'switch'){
						item.value = false;
					}else{
						item.value = null;
					}
					item.checked = true;
					return item;
				})
				this.dataList = datalist;
			},
			changeCheck(e,index){
				console.log("单选",e,index)
				this.$forceUpdate()
				let dataList = JSON.parse(JSON.stringify(this.dataList));
				dataList[index].checked = e.value;
				let isSelectAll = true;
				dataList.forEach((item)=>{
					if(!item.checked){
						isSelectAll = false;
					}
				})
				this.isSelectAll = isSelectAll;
			},
			changeCheckAll(e){
				console.log("全选",e)
				let dataList = JSON.parse(JSON.stringify(this.dataList));
				dataList = dataList.map((item)=>{
					item.checked = e.value;
					return item;
				})
				this.$nextTick(()=>{
					this.$set(this,'dataList',dataList)
					this.$forceUpdate()
				})
			},
			changeData(){
				this.$forceUpdate()
			},
			execute(){
				if(this.verification()){
					let obj = {};
					this.dataList.forEach((item)=>{
						obj[item.ioKey]=item.value
					})
					let params = {
						ac:'write',
						d:this.devId,
						pk:this.pk,
						p:obj
					}
					this.$api.iotsApi.downDeviceAbility(params).then(res => {
						console.log("下发数据成功",res)
						if(res.code == 0){
							// this.$u.toast('执行成功')
							this.$refs.uToast.show({
								title: '执行成功',
								type: 'success',
							})
						}else{
							this.$refs.uToast.show({
								title: res.message,
								type: 'error',
							})
						}
					}, error => {
					})
				}else{
					console.log("校验未通过")
				}
			},
			// 校验表单
			verification(){
				let flag = true;
				this.dataList.forEach((item)=>{
					if(flag && item.checked && item.ioRequired && !item.value && !['number', 'slider', 'switch'].includes(item.ioFormType)){
						this.$refs.uToast.show({
							title: item.ioName + '不能为空!',
							type: 'error',
						})
						flag = false;
					}
				})
				return flag;
			}
		}
	}
</script>
<style>
	page{
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	/deep/.iots-component-box{
		margin-top: 0 !important;
	}
	.ability-box{
		padding-bottom: 140rpx;
	}
	.attr-list-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.checkbox-box{
			padding: 0 20rpx;
			width: 80rpx;
			display: flex;
			justify-content: center;
			// margin-right: 20rpx;
		}
		.attr-list-item-content{
			flex: 1;
			position: relative;
			&.required::after{
				content: '';
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				position: absolute;
				top: 12rpx;
				left: 6rpx;
				background: red;
			}
		}
	}
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		height: 140rpx;
		padding: 0 30rpx;
		padding-bottom: 10rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		button{
			width: 300rpx;
			height: 90rpx;
			background: #3683FD;
			border-radius: 43rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
		}
	}
</style>