<template>
    <span :class="$style.ratings">
        <Touch
            v-for="(item,index) in range"
            :key="index"
            tag="span"
            @tap="chose(item)"
            :class="[$style.item,item<=score&&$style.active]"
        >
            <IconFont>&#xe51;</IconFont>
        </Touch>
    </span>
</template>

<script>
    import IconFont from "../basic/IconFont";
    import Touch from "../external/Touch";
    export default {
        name: "Ratings",
        components: {Touch, IconFont},
        props:{
            range:{
                type:Number,
                default:5
            },
            max:{
                type:Number,
                default:5
            },
            min:{
                type:Number,
                default:1
            },
            score:{
                type:Number,
                default:0
            }
        },
        methods:{
            chose(){

            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .ratings {
        vertical-align: middle;
        font-size: 1em;
        line-height: 1em;
        .item{
            font-size: 1em;
            vertical-align: middle;
            color: #EDEDED;
            &.active{
                color: #FFD21D;
            }
        }
    }
</style>