<template>
	<view class="alarmConfig-box">
		<u-tabs class="tab-box" :list="groupList" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
		<mescroll-body ref="mescrollRef" top="80" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<u-collapse ref="collapseRef" style="padding-bottom: 100rpx;">
					<u-collapse-item :title="item.funcName"  ref="collapseItem" v-for="(item, index) in list" :key="item.funcKey"  @change="handleOpenChange(item, index)">
						<template v-slot:title >
							<text style="padding-left: 10rpx;">{{item.funcName}}</text>
							<text :style="{color:item.isAck?'green':'red'}">（{{item.isAck?'已同步设备':'未同步设备'}}）</text>
						</template>
						<u-form  ref="uForm" label-width="200" label-align="left">
							<u-form-item :label="val.name" v-for="val in item.confJsonObj" :key="val.key">
								<u-switch v-if="getAttrType(val) === 'switch'" :disabled="item.disabled" v-model="val.value"></u-switch>
								<uni-data-select
									v-else-if="getAttrType(val) === 'select'" 
									v-model="val.value"
									placement="top"
									:disabled="item.disabled"
									:localdata="getSelectList(val)"
								></uni-data-select>
								<u-input v-else :disabled="item.disabled" v-model="val.value" />
							</u-form-item>
						</u-form>
						<view class="btn-list">
							<u-button v-if="item.disabled"  @click="toggleState(index)">修改</u-button>
							<u-button v-else type="primary" @click="sendAttr(item,index)">下发</u-button>
						</view>
					</u-collapse-item>
				</u-collapse>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				tabCurrent: 0,
				deviceKey:'',
				groupList:[],
				list:[],
			}
		},
		mixins:[MescrollMixin],
		onLoad(option) {
			console.log("获取到参数",option)
			this.deviceKey = option.deviceKey;
		},
		methods: {
			handleOpenChange(item, index) {
				setTimeout(() => {
					this.$refs.collapseRef.childrens[index].init();
				}, 20);
			},
			tabChange(e){
				console.log("tab",e)
				this.tabCurrent = e;
				this.list = this.groupList[e].list;
				setTimeout(() => {
					this.$refs.collapseRef.init();
				}, 20);
			},
			getSelectList(data){
				console.log("data",data);
				let list = [];
				list = data.options.map(item=>{
					return {
						text: item.label,
						value: item.value
					}
				})
				return list;
			},
			//切换状态
			toggleState(i){
				this.$nextTick(()=>{
					this.list[i].disabled = !this.list[i].disabled;
				})
			},
			sendAttr(data,i){
				console.log("下发值为",data)
				uni.showModal({
					title: '提示',
					content:'确认要下发配置吗？',
					confirmText:'确认',
					cancelText:'取消',
					success: (res) => {
						if (res.confirm) {
							let confJsonObj =  data.confJsonObj.map(item=>{
								if(item.key.endsWith('_state')){
									return {
										...item,
										value:item.value?1:0
									}
								}else{
									return item;
								}
							})
							let parmas = {
								...data,
								confJsonObj
							}
							this.$put("/iot/func",parmas).then((res)=>{
								console.log("res",res)
								if(res.code == 200){
									this.$refs.uToast.show({
										title: res.msg,
										type: 'success',
									})
									this.list[i].disabled = !this.list[i].disabled;
								}else{
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							}).catch((err)=>{
								console.log("err",err)
								this.$refs.uToast.show({
									title: err.msg,
									type: 'error',
								})
							})
						}else if (res.cancel) {
							
						}
					}
				});
				
				
			},
			upCallback(page) {
				this.$get("/iot/func/" + this.deviceKey,{}).then((res)=>{
					console.log("res",res)
					let groupList = [];
					if(res?.data.length>0){
						res.data.forEach((item,index)=>{
							let flag = true;
							groupList.forEach((val,i)=>{
								if(val.funcType === item.funcType){
									groupList[i].list.push({
										...item,
										disabled: true,
									});
									flag = false;
								}
							})
							if(flag && item.funcType!= 'c'){
								groupList.push({
									funcType: item.funcType,
									name: item.funcTypeName,
									list: [{
										...item,
										disabled: true,
									}]
								})
							}
						});
						this.groupList = groupList;
						this.list = groupList[this.tabCurrent].list;
						this.$nextTick(()=>{
							this.$refs.collapseRef.init();
						})
						this.mescroll.endByPage(1, 1); 
						this.mescroll.endErr();
					}else{
						this.groupList = [];
						this.list = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
					}
				}).catch((err)=>{
					console.log("err",err)
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//判断告警数据类型
			getAttrType(obj){
				if(obj.key.endsWith('_state')){
					return 'switch';
				}else if(obj.key.endsWith('_select')){
					return 'select';
				}else{
					return 'input';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tab-box{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 10;
	}
	::v-deep .u-collapse-head{
		border-bottom: 1px solid #f5f5f5;
	}
	::v-deep .u-collapse-body{
		// height: auto !important;
		padding: 0 20rpx;
	}

</style>
