<!-- 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 {
    data() {
        return {
            value: null
        };
    },
    mounted() {
        const checked = this.$el.querySelector('input[type=radio][checked]');
        if (checked) {
            this.value = checked.value;
        }
    },
    methods: {
        onClick(e) {
            const values = [...this.$el.querySelectorAll('input[type=radio]')]
                .filter(radio => radio.checked)
                .map(radio => radio.value);
            if (values.length) {
                const value = values[0];
                if (value !== this.value) {
                    this.value = value;
                    this.$emit('change', {
                        detail: {
                            value: value
                        }
                    });
                }
            }
            this.$emit('click', e);
        }
    }
};
</script>
