<template>
    <div class="weui-cell">
        <div class="label">
            <slot></slot>
        </div>
        <div class="score">
            <img
                :src="getFileHost(`/Assets/rate/${listItem.rate.icon}${index < formItem.value ? 1 : 0}.png`, 1)"
                v-for="(item, index) in listItem.rate.score"
                :key="index"
                @click="change(index)"
            >
        </div>
    </div>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import { getFileHost } from '@/assets/utils/host.js'
export default {
    mixins: [common],
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            getFileHost
        }
    },
    created () {
        this.verifyInit()
    },
    methods: {
        // 选择
        change (index) {
            this.formItem.value = index + 1
            this.clearValidate()
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

<style lang="less" scoped>
img {
    width: 32px;
}
</style>
