<!-- webview only --><!-- slot -->
<template>
    <section @click="onClick" @touchstart="$emit('touchstart', $event)" @touchmove="$emit('touchmove', $event)" @touchend="$emit('touchend', $event)" @touchcancel="$emit('touchcancel', $event)">
        <slot></slot>
    </section>
</template>
<script>
export default {
    name: 'Bili_CheckboxGroup',
    data() {
        return {
            values: null
        };
    },
    mounted() {
        const values = [...this.$el.querySelectorAll('input[type=checkbox]')].filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
        this.values = JSON.stringify(values);
    },
    methods: {
        onClick(e) {
            const values = [...this.$el.querySelectorAll('input[type=checkbox]')].filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            const str = JSON.stringify(values);
            if (str !== this.values) {
                this.values = str;
                this.$emit('change', {
                    detail: {
                        value: values
                    }
                });
            }
            this.$emit('click', e);
        }
    }
};
</script>
