<template>
	<view class="list-item" :class="{big: props.preBig}">
		<view class="left">
			<view class="back" :style="{background: props.bgColor}">
				<image :src="props.icon" />
			</view>
			<view :style="{color: props.leftColor}">{{ props.ifName }}</view>
		</view>
	
		<view class="right">
			<text class="state-color" :style="{background: props.stateColor}"></text>
			<text class="state-text" :style="{color: props.rightColor}">{{ props.stateText }}</text>
			<image src="/static/equipmentImg/arrow.svg" style="width:40rpx; height:40rpx;" v-if="isImg" />
		</view>
	</view> 
</template>

<script setup>

const props = defineProps({
	bgColor: { type: String, default: ''},
	preBig: { type: Boolean, default: false}, // 预制颜色1 
	icon: { type: String, default: ''},
	ifName: { type: String, default: ''},
	stateColor: { type: String, default: ''},
	stateText: { type: String, default: ''},
	leftColor: { type: String, default: '#fff'},
	rightColor: { type: String, default: 'rgba(255, 255, 255, 0.7)'},
	isImg:{type:Boolean,default:true}
})
</script>

<style scoped lang="scss">
.list-item {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0; 
	.left {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 33rpx;
	}
	.back {
		width: 60rpx;
		height: 60rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.right {
		display: flex;
		align-items: center;
		.state-color {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.state-text {
			font-size: 30rpx;
			color: rgba(255, 255, 255, 0.7);
			margin-right: 16rpx;
		}
	}
}

// 预制主题1
.big {
	background: rgba(0, 0, 0, 0.03);
	padding: 30rpx;
	box-sizing: border-box;
	border-radius: 20rpx;
}
</style>