<template>
    <Checkbox-group v-model="values" @on-change="updateValue">
        <Checkbox v-for="age in ageList" :key="age.id" :label="age.id" :disabled="disable">
            <span>{{age.label}}</span>
        </Checkbox>
    </Checkbox-group>
</template>

<script>
export default {
    name: 'checkbox-age',
    props: {
        value: {
            type: String
        },
        disable: {
            type: Boolean
        }
    },
    data() {
        return {
            ageList: [{
                id: '1',
                label: '成人'
            }, {
                id: '2',
                label: '大童'
            }, {
                id: '3',
                label: '中童'
            }, {
                id: '4',
                label: '小童'
            }, {
                id: '5',
                label: '幼童'
            }],
            values: this.value.split('|')
        };
    },
    computed: {
        values() {
            return this.value ? this.value.split('|') : [];
        }
    },
    methods: {
        updateValue(newValue) {
            let nValue = newValue.join('|');

            this.$emit('input', nValue);
        }
    },
    watch: {
        value: function(newValue) {
            this.values = newValue.split('|');
        }
    }
};

</script>

<style>

</style>