<template>
	<view class="uni-flex uni-column" style="align-items: center;margin-right: 16px;" @click="valueChange(value)">
		<view class="content" :class="checked?'checked':''">
			<image :src="icon.startsWith('http')?icon:'/static/layer-'+icon+'.png'" class="icon" :style="iconStyle"></image>
			<uni-icons v-if="checked" type="checkbox-filled" class="check-icon" color="#fff"></uni-icons>
		</view>
		<view style="text-align: center;width: 64px;" :class="checked?'checked':''">{{label}}</view>
	</view>
</template>

<script>
	export default {
		name: "layer-checkbox",
		props: {
			label: String,
			value: Number,
			change: Function,
			icon: String,
			checked: Boolean,
			iconStyle: String
		}, 
		data() {
			return {};
		},
		methods: {
			valueChange(value) {
				this.$emit('change', value);
			}
		}
	}
</script>

<style scoped>
	.checked {
		border-color:  #f00 !important;
		/* border-width: 4px; */
		color: #01D393 !important;
	}

	.icon2 {
		position: absolute;
		width: 60px;height: 60px;left: 0;right: 0;top: 0;bottom: 0;
	}

	.icon {
		width: 60px;
		height: 60px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.check-icon {
		position: absolute;
		top: 0;
		right: 0;
	}

	.content {
		width: 60px;
		height: 60px;
		border: 2px solid #dddddd00;
		border-radius: 12px;
		margin-bottom: 8px;
		position: relative;
		overflow: hidden;
	}
</style>