<template>
    <div class="nut-rate">
    	<ul class="nut-rate-box">
            <li v-if="index<isActive" 
            @click="touchEvn(index)" 
            :style="{backgroundImage: 'url('+activeUrl+')',backgroundSize:picSize}"
            class='nut-list'
            v-for="(value,index) in num"></li>
            <li v-else 
            @click="touchEvn(index)" 
            class="nut-list" 
            :style="{backgroundImage: 'url('+originalUrl+')',backgroundSize:picSize}"></li>
    	</ul>
    	<div class="clr"></div>
    </div>
</template>
<script>
export default {
    name:'nut-rate',
    props: {
    	num:{
    		type:Number,
    		default:5,
    	},
    	originalPath:{
    		type:String,
    		default:'none'
    	},
        activePath:{
            type:String,
            default:'none'
        },
    	picWidth:{
    		type:Number,
    		default:0.32
    	},
    	picHeight:{
    		type:Number,
    		default:0.31
    	},
        currValue:{
            type:Number,
            default:0
        }
    },
    data() {
        return {
        	isActive:this.currValue,
        };
    },
    computed:{
        originalUrl(){
            if(this.originalPath == 'none'){
                return 'data:image/png;base64,[encoded data, 4452 characters]'
            }else{
                return this.originalPath;
            }
        },
        activeUrl(){
            if(this.activePath == 'none'){
                return 'data:image/png;base64,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';
            }else{
                return this.activePath;
            }
        },
        picSize(){
            return this.picWidth+'rem '+this.picHeight+'rem';
        }
    },
    methods: {
    	touchEvn(index){
    		this.isActive = index + 1;
            this.$emit('change-rate',index)
    	},
    }
}
</script>
<style lang="scss">
	.nut-rate-box{
		list-style-type:none;
		margin:0;
		padding: 0.4rem 0.3rem;
		.nut-list{
			float:left;
			width:0.32rem;
			height:0.32rem;
			margin-right:0.32rem; 
            background-repeat:no-repeat;
            &:last-child{
                margin-right:0; 
            }
		}
	}
	.clr{
		clear: both;
	}
</style>