<template>
	<view class="jnpf-rate">
		<u-rate v-model="innerVal" size="40" :count="max" :allowHalf="allowHalf" :disabled="disabled"
			@change="onChange">
		</u-rate>
	</view>
</template>
<script>
	export default {
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			allowHalf: {
				type: Boolean,
				default: false
			},
			max: {
				type: Number,
				default: 0
			},
			value: {
				type: [Number, String],
				default: 0
			},
			disabled: {
				type: Boolean,
				default: false
			},
			type: {
				default: ''
			}
		},
		data() {
			return {
				customStyle: {
					display: 'inline-block'
				},
				innerVal: 0
			}
		},
		watch: {
			value: {
				handler(val) {
					this.innerVal = val
				},
				immediate: true
			}
		},
		created() {
			this.innerVal = this.value
		},
		methods: {
			onChange(value) {
				this.$emit('input', value)
				this.$emit('change', value)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.jnpf-rate {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
	}
</style>
