<template>
	<view class="parameterSetup">
		<view class="device-info">
			<view class="title-box">
				基本信息
			</view>
			<view class="parameterSetup-content" v-if="deviceDataInfo">
				<view class="parameterSetup-row" v-for="(value,key,index) in deviceTopData" @click="onClickRowFn(key,value)" :key="key">
					<view class="parameterSetup-row-name">{{parameterField[key]}}</view>
					<view class="parameterSetup-row-value">
						<text class="pr10" :style="{color:key=='deviceName'?'#999':'#000'}">{{value}}</text>
						<u-icon name="arrow-right" color="#bfbfbf"></u-icon>
					</view>
				</view>
				
				<view class="parameterSetup-row" v-for="(item,i) in deviceBottomData" :key="i">
					<view class="parameterSetup-row-name">{{item.paramName}}</view>
					<view class="parameterSetup-row-value">
						<text class="pr10" style="color: #999;">{{item.paramVal||'-'}}</text>
						<!-- <u-icon name="arrow-right" color="#bfbfbf"></u-icon> -->
					</view>
				</view>
			</view>
		</view>
		<view class="device-alarm-box" v-if="deviceDataInfo.deviceType == 'MINIATURE_BREAKER'">
			<view class="title-box">
				告警配置
			</view>
			<u-tabs class="tab-box" :list="groupList" bar-width="375" bg-color="#f5f5f5" :is-scroll="false" :current="tabCurrent" @change="tabChange"></u-tabs>
			<view class="alarm-loading-box" v-if="alarmLoading">
				<u-loading mode="circle" size="30" :show="alarmLoading"></u-loading>
				<text>刷新中</text>
			</view>
			<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 >
						<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>
			<u-empty v-if="!list" text="告警列表为空" mode="list"></u-empty>
			<view class="btn-list" @click="getAlarmList">
				<view class="btn-box">
					刷新告警配置
				</view>
			</view>
		</view>
		
		<!-- <view class="parameterSetup-content">
			<view class="parameterSetup-row" v-if="deviceDataInfo.deviceType == 'MINIATURE_BREAKER'" @click="goAlarmConfig">
				<view class="parameterSetup-row-name">告警配置</view>
				<view class="parameterSetup-row-value">
					<text class="pr10">去配置</text>
					<u-icon name="arrow-right" color="#bfbfbf"></u-icon>
				</view>
			</view>
		</view> -->
		
		<!-- 接线设置 -->
		<!-- <u-picker mode="selector" v-model="wiringSetupFlag" title="请选择要接入的线路" :range="wiringSetupSelector" :default-selector="[0]"></u-picker> -->
		<!-- 线路 -->
		<!-- <u-picker mode="selector" v-model="lineRoadFlag" :range="lineRoadSelector" :default-selector="[0]"></u-picker> -->
		<!-- 设备别名 -->
		<!-- <u-popup v-model="deviceNameFlag" mode="center" :closeable="true">
			<view class="popup-setup">
				<view class="popup-setup-title">修改设备别名</view>
				<u-input v-model="deviceNameValue" type="text" :border="true" />
				<view class="popup-setup-btn">
					<u-button type="error" size="medium" @click="deviceNameFlag = false">取消</u-button>
					<u-button type="success" size="medium">保存</u-button>
				</view>
			</view>
		</u-popup> -->
		<!-- 重命名 -->
		<u-popup v-model="topEditFlag" mode="center" :closeable="true">
			<view class="popup-setup">
				<view class="popup-setup-title">{{currentTopPickRow==="lineRoad"?"线路别名":"重命名"}}</view>
				<u-input type="text" :border="true" v-model="topEditDataInputValue"/>
				<view class="popup-setup-btn">
					<u-button type="error" size="medium" @click="topEditFlag = false;topEditDataInputValue = '';">取消</u-button>
					<u-button type="success" size="medium" @click="onSaveTopEditFn">保存</u-button>
				</view>
			</view>
		</u-popup>
		
		<!-- 修改弹出框 -->
		<u-popup v-model="editDataFlag" mode="center" :closeable="true">
			<view class="popup-setup">
				<view class="popup-setup-title">{{bottomCurrentPickObj.paramName}}</view>
				<u-input type="text" :border="true" v-model="bottomEditDataInputValue" />
				<view class="popup-setup-btn">
					<u-button type="error" size="medium" @click="editDataFlag = false;bottomEditDataInputValue='';">取消</u-button>
					<u-button type="success" size="medium" @click="bottomSaveEditFn">保存</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import parameterField from "@/pages/home/wisdomElectricity/realTime/parameterField.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default{
		data(){
			return {
				tabCurrent: 0,
				deviceKey:'',
				groupList:[],
				list:[],
				
				topEditFlag:false,
				
				editDataFlag:false,
				bottomEditDataInputValue:"", // 底部参数修改的值
				bottomCurrentPickObj:null, // 当前选择的底部参数
				
				deviceNameValue:"",
				parameterField:parameterField,
				deviceTopData:{
				},
				deviceDataObj:null,

				deviceDataInfo:null,
				deviceBottomData:null,
				
				currentBottomPickData:null,
				currentTopPickRow:"",
				topEditDataInputValue:"",
				alarmLoading:false
			}
		},
		mixins:[MescrollMixin],
		onLoad(e) {
			console.log(e,"eesss");
			this.deviceId = e.deviceId;
			this.deviceKey = e.deviceKey;
			this.getDeviceInfoDataFn();
			this.getAlarmList();
		},
		methods:{
			goAlarmConfig(){
				uni.navigateTo({
					url:'./alarmConfig?deviceKey=' + this.deviceDataInfo.deviceKey
				})
			},
			getDeviceInfoDataFn(){
				// this.$get("/app/device/info",{deviceId:this.deviceId}).then((res)=>{
				this.$get("/app/device/" + this.deviceId).then((res)=>{
					if(res.code !=200) return;
					this.deviceDataInfo = res.data;
					if(this.deviceDataInfo.paramList){
						if(res.data.deviceType == 'MINIATURE_BREAKER'){
							this.deviceBottomData = this.deviceDataInfo.paramList.filter((item) => {
								return item.paramKey != 'leakage_current' && item.paramKey != 'temperature';
							})
						}else{
							this.deviceBottomData = this.deviceDataInfo.paramList;
						}
					}
					this.deviceTopData = {
						deviceName:this.deviceDataInfo.parentName,
						lineRoad:this.deviceDataInfo.deviceName,
						// rename:this.deviceDataInfo.deviceName
					};
				})
			},
			bottomSaveEditFn(){
				this.$put("/app/device/edit-param",{
					paramId: this.bottomCurrentPickObj.paramId,
					paramVal: this.bottomEditDataInputValue
				}).then((res)=>{
					if(res.code === 200){
						this.$tui.toast(res.msg,3000);
						this.getDeviceInfoDataFn();
					}
				}).finally(()=>{
					this.editDataFlag = false;
					this.bottomEditDataInputValue='';
				})
			},
			onClickBottomRowFn(item){
				console.log(item,"item");
				this.editDataFlag = true;
				this.bottomCurrentPickObj = item;
			},
			onClickRowFn(key,value){
				console.log(key,"ee",value);
				if(key == "deviceName") return;
				this.currentTopPickRow = key;
				this.topEditDataInputValue=value;
				this.topEditFlag = true;
			},
			onSaveTopEditFn(){
				this.$put("/app/device/edit-image",{
					deviceId: this.deviceDataInfo.deviceId,
					deviceName: this.topEditDataInputValue
				}).then((res)=>{
					if(res.code === 200){
						this.$tui.toast(res.msg,3000);
						this.getDeviceInfoDataFn();
					}
				}).finally(()=>{
					this.topEditFlag = false;
					this.topEditDataInputValue='';
				})
			},
			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) {
							
						}
					}
				});
			},
			getAlarmList() {
				this.alarmLoading = true;
				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();
						})
					}else{
						this.groupList = [];
						this.list = [];
					}
					this.alarmLoading = false;
				}).catch((err)=>{
					console.log("err",err)
					this.alarmLoading = false;
				})
			},
			//判断告警数据类型
			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>
.parameterSetup{
	width: 100%;
	padding-bottom: 150rpx;
	&-content{
		padding: $paddingTB $paddingLR;
	}
	&-row{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 16rpx;
		border-bottom: 1px solid #ddd;
		&-value{
			font-weight: bold;
		}
	}
	.popup-setup{
		width: 600rpx;
		padding: 50rpx 30rpx;
		&-title{
			font-weight: bold;
			font-size: 28rpx;
			padding-bottom: 20rpx;
		}
		&-btn{
			display: flex;
			padding-top: 30rpx;
			justify-content: space-around;
		}
		&-voltageLimit{
			&-up,&-down{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.title-box{
		padding: 16rpx 20rpx;
		font-weight: bold;
		font-size: 32rpx;
		position: relative;
		// margin: 6rpx 0;
		&:before{
			content: '';
			width: 6rpx;
			height: 50rpx;
			position: absolute;
			top: 12rpx;
			left: 8rpx;
			background: #0066cc;
			border-radius: 2rpx;
		}
	}
}
.alarm-loading-box{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx 0;
	>text{
		margin-left: 10rpx;
		font-size: 30rpx;
	}
}
::v-deep .u-collapse-head{
	border-bottom: 1px solid #f5f5f5;
}
::v-deep .u-collapse-body{
	// height: auto !important;
	padding: 0 20rpx;
}
.btn-list{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140rpx;
	padding: 20rpx 20rpx;
	background: #fff;
	z-index: 99;
	border-top: 1px solid #f5f5f5;
	.btn-box{
		background: #0066cc;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 36rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}
}
</style>