<template>
    <div :class="classes()" @touchmove="onTouchMove">
        <div :class="classes('item')" v-for="( status, index ) in list" :key="index">
            <h-icon
                :type="status === 'full' ? icon : voidIcon"
                :color="status === 'full' ? color : voidColor"
                :size="size"
                :data-score="index + 1"
                :class="classes('icon')"
                @click="onSelect(index+1)"
            />
            <h-icon
                v-if="allowHalf"
                :type="status === 'void' ? icon : voidIcon"
                :color="status === 'void' ? voidColor : color"
                :size="size"
                :data-score="index + 0.5"
                :class="classes('icon','half')"
                @click="onSelect(index+0.5)"
            />
        </div>
    </div>
</template>
<script>
import hIcon from '../icon/index.vue';
import { classesMixin } from '../../common/mixins/classname';
let classMixin = classesMixin('rate');
export default {
    name:　'h-rate',
    mixins: [ classMixin ],
    components: {
        hIcon
    },
    props: {
        value: Number,
        readonly: Boolean,
        disabled: Boolean,
        allowHalf: Boolean,
        size: {
            type: String,
            default: '20'
        },
        icon: {
            type: String,
            default: 'daxingxing'
        },
        voidIcon: {
            type: String,
            default: 'daxingxing'
        },
        color: {
            type: String,
            default: '#ff966a'
        },
        voidColor: {
            type: String,
            default: '#e8e5e4'
        },
        count: {
            type: Number,
            default: 3
        }
    },
    data() {
        return {
            list: []
        }
    },
    mounted() {
        let list = [];
        for (let i = 1; i <= this.count; i++) {
            list.push(this.getRateStatus(this.value, i, this.allowHalf));
        }
        this.list = list;
    },
    watch: {
        value() {
            
            let list = [];
            for (let i = 1; i <= this.count; i++) {
                list.push(this.getRateStatus(this.value, i, this.allowHalf));
            }
            this.list = list;
        }
    },
    methods: {
        getRateStatus(value, index, allowHalf) {
            if (value >= index) {
                return 'full';
            }
            if (value + 0.5 >= index && allowHalf) {
                return 'half';
            }
            return 'void';
        },
        onSelect(index) {
            if (!this.disabled && !this.readonly) {
                this.$emit('input', index);
                this.$emit('change', index);
            }
        },
        onTouchMove(event) {
            if (this.readonly || this.disabled || !document.elementFromPoint) {
                return;
            }

            event.preventDefault();
            const { clientX, clientY } = event.touches[0];
            const target = document.elementFromPoint(clientX, clientY);

            if (target && target.dataset) {
                const { score } = target.dataset;

                /* istanbul ignore else */
                if (score) {
                    this.onSelect(+score);
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>