<script>
export default {
	model: {
		prop: 'value',
		event: 'change'
	},
	props: {
		value: {
			type: Number,
			default: 0,
		},
		readonly: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleChange(val) {
			if (!this.readonly) {
				this.$emit('change', val);
			}
		}
	}
}
</script>

<template>
	<div class="rate flex items-center">
		<el-rate
			:value="value"
			@input="handleChange"
			:colors="['#7B61FF', '#7B61FF', '#7B61FF']"
			void-color="#E2E8F0"
			:size="24"
			:disabled="readonly">
		</el-rate>
		<div class="rate-num" :class="value ? 'gradient-box' : ''">{{ value }}</div>
	</div>
</template>

<style scoped lang="scss">
::v-deep .el-rate {
	height: 24px;
	.el-rate__icon {
		font-size: 24px;
	}
}
.rate-num {
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background: #E2E8F0;
	color: #fff;
	border-radius: 12px;
	margin-left: 8px;
	font-family: 'Poppins-Regular', serif;
}
.gradient-box {
	background: $header-backgroungd;
}
</style>
