<template>
    <div style="width: 100%;">
        <div v-for="(item, index) in list" :key="index" style="margin:0 0 20px 20px;">
            <div>{{item.name}}</div>
            <div>{{item.age}}</div>
            <el-slider style="width: 80%" v-model="item.value" :marks="item.marks"
                @input="getInfo(item.marks, item.value)" show-input>
            </el-slider>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                marks: {
                    0: '不及格',
                    60: '及格',
                    80: '良好',
                    90: '優(yōu)秀',
                }
            }
        },
        mounted() {
            this.cc()
        },
        methods: {
            cc() {
                this.list = [{
                    name: '張三',
                    age: 18,
                    value: 0,
                }, {
                    name: '李四',
                    age: 19,
                    value: 60,
                }, {
                    name: '王五',
                    age: 20,
                    value: 80,
                }]
                this.list.forEach((item, index) => {
                    this.$set(item, 'marks', JSON.parse(JSON.stringify(this.marks)))
                })
            },
            getInfo(m, v) {
                let d = {}
                if (v >= 0 && v < 60) {
                    d = {
                        0: {
                            label: '不及格',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                        60: '及格',
                        80: '良好',
                        90: '優(yōu)秀',
                    }
                } else if (v >= 60 && v < 80) {
                    d = {
                        0: '不及格',
                        60: {
                            label: '及格',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                        80: '良好',
                        90: '優(yōu)秀',
                    }
                } else if (v >= 80 && v < 90) {
                    d = {
                        0: '不及格',
                        60: '及格',
                        80: {
                            label: '良好',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                        90: '優(yōu)秀',
                    }
                } else if (v >= 90 && v <= 100) {
                    d = {
                        0: '不及格',
                        60: '及格',
                        80: '良好',
                        90: {
                            label: '優(yōu)秀',
                            style: {
                                color: '#1989FA',
                                fontWeight: 'bold'
                            },
                        },
                    }
                } else {
                    d = {
                        60: '及格',
                        75: '良好',
                        85: '優(yōu)秀',
                    }
                }
                this.$set(m, [0], d[0])
                this.$set(m, [60], d[60])
                this.$set(m, [80], d[80])
                this.$set(m, [90], d[90])
            }
        }
    }
</script>