<template>
	<view class="render-tag" :class="[`render-tag--${plain?'plain':'primary'}`]" @click="onSelect">
		<slot #default>{{text}}</slot>
	</view>
</template>

<script>
	export default {
		props: {
			text: [String, Number],
			closable: {
				type: Boolean,
				default: false
			},
			plain: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			onSelect() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	.render-tag {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: $padding-base/2 $padding-xs;
		border-radius: $radius-xs;
		color: $color-white;
		font-size: $font-md;

		&--plain {
			color: $u-primary;
			background: rgba($color-primary, 0.1);
		}

		&--primary {
			color: $color-white;
			background: $u-primary;
		}
	}
</style>