<style lang='scss' scoped>
.newAlarmRemind{
	width: 100%;
	height: 100%;
	background-color: #FDFDFE;
	padding: 30rpx $paddingLR;
	&-list{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 48%);
		grid-auto-columns: repeat(2, 48%);
		grid-gap: 20rpx 4% ;
		margin-bottom: 40rpx;
	}
	&-box{
		padding: 20rpx;
		box-shadow: $box-shadow;
		background-color: #fff;
		border-radius: 16rpx;
	}
}
</style>
<template>
	<view class="newAlarmRemind">
		<view class="newAlarmRemind-list">
			<view class="newAlarmRemind-box" v-for="(item,index) in deviceSwtichList" :key="index">
				<view class="newAlarmRemind-box-header pb25 flex-between">
					<tuiIcon :name="item.icon" size="60" :color="item.swtichFlag?'#FA6400':'#757575'"></tuiIcon>
					<u-switch v-model="item.swtichFlag" size="30" inactive-color="#999" active-color="#FA6400" @change="onSwitchFn(item)"></u-switch>
				</view>
				<view class="pb10">{{item.name}}</view>
				<view class="">{{item.swtichFlag?"开":"关"}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				flag:true,
				deviceSwtichList:[{
					icon:"60",
					name:"短路报警",
					swtichFlag:true
				},{
					icon:"loudianbaojing",
					name:"漏电报警",
					swtichFlag:false
				},{
					icon:"dianhu",
					name:"过载报警",
					swtichFlag:true
				},{
					icon:"dianliu",
					name:"过流报警",
					swtichFlag:true
				},{
					icon:"worktable",
					name:"过压报警",
					swtichFlag:true
				},{
					icon:"guoyaqianya",
					name:"欠压报警",
					swtichFlag:true
				},{
					icon:"wendu",
					name:"温度报警",
					swtichFlag:true
				},{
					icon:"xuehua",
					name:"浪涌报警",
					swtichFlag:true
				},{
					icon:"loudianbaohu",
					name:"漏电保护功能正常",
					swtichFlag:true
				},{
					icon:"loudianbaohuchaxun",
					name:"漏电保护自检未完成",
					swtichFlag:true
				},{
					icon:"loudianbaohu",
					name:"电弧报警",
					swtichFlag:true
				},{
					icon:"loudianyujing",
					name:"漏电预警",
					swtichFlag:true
				},{
					icon:"dianliuyujing",
					name:"电流预警",
					swtichFlag:true
				},{
					icon:"tongxun",
					name:"通讯预警",
					swtichFlag:true
				},{
					icon:"dianya-hong",
					name:"过压预警",
					swtichFlag:true
				},{
					icon:"dianya-lv",
					name:"欠压预警",
					swtichFlag:true
				},{
					icon:"sanxiangdianya",
					name:"缺相报警",
					swtichFlag:true
				},{
					icon:"sanxiangbupinghengdianya",
					name:"三相负载不平衡报警",
					swtichFlag:true
				},{
					icon:"dianxiang",
					name:"三相相序报警",
					swtichFlag:true
				},{
					icon:"gdbj",
					name:"掉电报警",
					swtichFlag:true
				},{
					icon:"dianxiang",
					name:"组态报警",
					swtichFlag:true
				},{
					icon:"lixian",
					name:"离线报警",
					swtichFlag:true
				},{
					icon:"dianxiang",
					name:"分闸报警",
					swtichFlag:true
				},{
					icon:"gdbj",
					name:"合闸报警",
					swtichFlag:true
				},{
					icon:"dianxiang",
					name:"联动报警",
					swtichFlag:true
				},{
					icon:"yanwu",
					name:"烟气报警",
					swtichFlag:true
				},{
					icon:"gdbj",
					name:"压强报警",
					swtichFlag:true
				},{
					icon:"shuiwei",
					name:"液位报警",
					swtichFlag:true
				},{
					icon:"suidaobaojing",
					name:"异常分闸",
					swtichFlag:true
				}]
			}
		},
		onLoad() {},
		methods: {
			onSwitchFn(e){
				console.log(e,"E");
			}
		}
	}
</script>
