<template>
    <!-- 评分 -->
    <div>
        <basic-edit hide-placeholder></basic-edit>
        <div>
            <div class="title">满分：</div>
            <el-radio-group v-model="formItem.rate.score" class="rate-box">
                <el-radio-button v-for="(item, index) in scoreList" :key="index" :label="item"></el-radio-button>
            </el-radio-group>
        </div>
        <div>
            <div class="title">外观：</div>
            <el-radio-group v-model="formItem.rate.icon">
                <el-radio-button v-for="(item, index) in iconList" :key="index" :label="item">
                    <img :src="getFileHost(`/Assets/rate/${item}1.png`, 1)">
                </el-radio-button>
            </el-radio-group>
        </div>
        <verify-edit></verify-edit>
    </div>
</template>

<script>
import { getFileHost } from '@/assets/utils/host.js'
export default {
    name: 'FormRate',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        VerifyEdit: () => import('@/common/formDesign/components/formEdit/components/VerifyEdit')
    },
    data () {
        return {
            getFileHost,
            formItem: this.$store.state.form.formItem,
            scoreList: [3, 5, 10],
            iconList: ['aixin', 'dianzan', 'meigui', 'pingguo', 'taiyang', 'wujiaoxing', 'xiaolian']
        }
    },
    created () {
        if (!this.formItem.verify) this.init()
    },
    methods: {
        // 初始化
        init () {
            this.$set(this.formItem, 'rate', {
                score: this.scoreList[0],
                icon: this.iconList[0]
            })
        }
    }
}
</script>

<style lang="less" scoped>
.el-radio-group{
    display: flex;
    .el-radio-button {
        flex-grow: 1;
        /deep/ .el-radio-button__inner {
            display: block;
            height: 100%;
        }
    }
}
</style>
