<template>
    <MtaRateReadOnly
            :score="MtaRateReadOnlyObj.defaultText"
            :value="MtaRateReadOnlyObj.value"
            v-if="readOnly"></MtaRateReadOnly>
    <MtaRateBase
            :default-value="defaultScore"
            @change="handleEditorRateChange"
            ref="MtaRateBase"
            v-else></MtaRateBase>
</template>

<script>
    import MtaRateBase     from './MtaRateBase';
    import MtaRateReadOnly from './MtaRateReadOnly';

    export default {
        name:       'MtaRate',
        props:      {
            /**
             * readOnly 只读无法编辑
             * editor 可以编辑评分
             */
            code:    {
                type:      String,
                required:  true,
                validator: function (value) {
                    return ['readOnly', 'editor'].indexOf(value) !== -1;
                },
            },
            mapping: {
                type:    Object,
                default: () => {
                    return {};
                },
            },
            myData:  {
                type:     Object,
                required: true,
            },
            defaultValue: {
                type: Number,
                validator: function (value) {
                    return value>=0 && value<=10;
                },
            },
        },
        components: {
            MtaRateBase,
            MtaRateReadOnly,
        },
        computed: {
            defaultScore() {
                return this.defaultValue/2
            }
        },
        watch:      {
            code:   {
                handler(a, b) {
                    this.readOnly = (a === 'readOnly');
                },
                immediate: true,
            },
            myData: {
                handler(a, b) {
                    if (typeof a === 'object') {
                        if (this.code === 'editor') {
                            this.MtaRateEditor.value = this.getMathScore(Number(a[this.mapping.score || 'score'])) || 0;

                            // 非default时 具有dom 可重置数据
                            if (this.$refs['MtaRateBase']) {
                                this.$refs['MtaRateBase'].reventData(this.MtaRateEditor.value);
                            }

                        } else if (this.code === 'readOnly') {
                            this.MtaRateReadOnlyObj.value = this.getMathScore(Number(a[this.mapping.score || 'score'])) || 0;
                            this.MtaRateReadOnlyObj.defaultText = `${a[this.mapping.score || 'score'] || 0}分`;
                        }

                    } else {
                        if (this.code === 'editor') {
                            this.MtaRateEditor.value = 0;
                        } else if (this.code === 'readOnly') {
                            this.MtaRateReadOnlyObj.value = 0;
                            this.MtaRateReadOnlyObj.defaultText = `0分`;
                        }

                    }
                },
                immediate: true,
                deep:      true,

            },
        },
        data() {
            return {
                readOnly:           false,
                MtaRateReadOnlyObj: {
                    defaultText: '0分',
                    value:       0,
                },
                MtaRateEditor:      {
                    value: 0,
                },
            };
        },
        methods:    {
            getMathScore(data) {
                if (typeof data !== 'number') {
                    throw new Error(`MtaRate组件: ${this.mapping.score || 'score'}需要Number类型`);
                }
                return Math.ceil(data / 2);
            },
            handleEditorRateChange(data) {
                this.$emit('change', data * 2);
            },
        },
    };
</script>

<style scoped>

</style>
