<style lang='scss' scoped>
	.control{
		width: 100%;
		padding: $paddingTB $paddingLR;
		&-menu-box{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #cfcfcf;
			width: 100%;
			padding: 30rpx 0;
			&-icon{
				padding: 8rpx;
				border-radius: 50%;
				background-color: #5FB6FF;
			}
		}
	}
</style>
<template>
	<view class="control">
		<view class="control-menu">
			<view class="control-menu-box" v-for="(item,index) in controlList" :key="index" @click="goElectricityFn(item)">
				<view class="">
					<tuiIcon class="control-menu-box-icon" color="#ffffff" :name="item.icon"></tuiIcon>
					<text class="pl20">{{item.name}}</text>
				</view>
				<u-icon name="arrow-right" ></u-icon>
			</view>
		</view>
		<u-modal v-model="editPasswordFlag" title="修改电箱密码" :show-cancel-button="true" @cancel='onEditPasswordCancelFn' :title-style="{color: '#111'}">
			<view class="pt20">
				<u-input v-model="electricBoxPassword" type="text" :border="true" />
			</view>
		</u-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				electricBoxPassword:"",
				editPasswordFlag:false,
				controlList:[{
					name:"物联网断路器",
					icon:"tubiaoshangchuanmoban",
					url:"./iotBreaker"
				},
				// {
				// 	name:"场景控制",
				// 	icon:"diannao",
				// 	url:""
				// },
				{
					name:"修改电箱密码",
					icon:"mima",
					url:""
				},
				// {
				// 	name:"修改电箱网络",
				// 	icon:"shezhi",
				// 	url:""
				// }
				],
				projectId:""
			}
		},
		onLoad(e) {
			console.log(e,"e");
			this.projectId = e.projectId;
		},
		methods: {
			onEditPasswordCancelFn(){
				this.electricBoxPassword = "";
			},
			goElectricityFn(item){
				if (item.url) {
					uni.navigateTo({
						url:`${item.url}?projectId=${this.projectId}`
					})
				} else{
					switch (item.name){
						case "修改电箱密码":
							this.editPasswordFlag = true;
							break;
						case "修改电箱网络":
							break;
						default:
							break;
					}
				}
			}
		}
	}
</script>
