<template>
	<view class="icon"
	:class="[computedClass]"
	></view>
</template>

<script setup>
import { computed } from 'vue';
	const props=defineProps({
		type:{
			type:String
		}
	})
	const classMap={
		add:'icon-add',
		reduce:'icon-reduce'
	}
	const computedClass=computed(()=>{
		return classMap[props.type]
	})
	
</script>

<style lang="scss">
	$icon-size: 34rpx;
	$icon-line-width: 20rpx;
	$icon-line-height: 4rpx;
	.icon {
		width: $icon-size;
		height: $icon-size;
		position: relative;
		border-radius: 50%;
	
		&:before,
		&::after {
			position: absolute;
			display: block;
			content: '';
			background-color: #fff;
		}
	}
	
	.icon-add {
		background-color: $my-main-color;
	
		&::before {
			width: $icon-line-height;
			height: $icon-line-width;
			top: calc(($icon-size /2) - ($icon-line-width / 2));
			left: calc(($icon-size /2) - ($icon-line-height / 2));
		}
	
		&::after {
			width: $icon-line-width;
			height: 4rpx;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}
	
	.icon-reduce {
		background-color: $my-red-color;
	
		&::after {
			width: $icon-line-width;
			height: $icon-line-height;
			top: calc(($icon-size /2) - ($icon-line-height / 2));
			left: calc(($icon-size /2) - ($icon-line-width / 2));
		}
	}
</style>