<!-- webview only -->
<template>
    <section :class="['bl___checkbox-container', {checked}]" v-if="type === 'checkbox'" @click.capture="toggleChecked" @touchstart.capture="$emit('touchstart', $event)" @touchmove.capture="$emit('touchmove', $event)" @touchend.capture="$emit('touchend', $event)" @touchcancel.capture="$emit('touchcancel', $event)">
        <section class="checkbox-content">
            <svg class="check" v-show="checked" :width="`${20}px`" :height="`${20}px`" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M8.57824934,16.1403956 L19.0387593,6.04962372 C19.4582704,5.6449407 20.1246476,5.65093461 20.5368114,6.06309836 C20.9395221,6.46580911 20.9395221,7.11873226 20.5368114,7.52144301 C20.532439,7.52581542 20.5280273,7.5301484 20.523577,7.53444145 L9.33859084,18.3240822 C9.32293976,18.3419319 9.30659998,18.3593883 9.28957149,18.3764168 C8.86853749,18.7974508 8.18590649,18.7974508 7.76487249,18.3764168 L3.1907755,13.8023198 C2.7697415,13.3812858 2.7697415,12.6986548 3.1907755,12.2776208 C3.6118095,11.8565868 4.2944405,11.8565868 4.7154745,12.2776208 L8.57824934,16.1403956 Z" stroke="none" stroke-width="1" fill-rule="evenodd" :fill="color"></path>
            </svg>
        </section>
    </section>
    <section :class="['bl___switch-container', {checked}]" v-else @click.capture="toggleChecked" @touchstart.capture="$emit('touchstart', $event)" @touchmove.capture="$emit('touchmove', $event)" @touchend.capture="$emit('touchend', $event)" @touchcancel.capture="$emit('touchcancel', $event)">
        <section class="switch-content" :style="{'background': color}">
            <section class="disable-background"></section>
            <section class="switch-button"></section>
        </section>
    </section>
</template>

<script>
export default {
    name: 'BSwitch',
    props: {
        checked: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: 'switch',
            validator(value) {
                return value === 'switch' || value === 'checkbox';
            }
        },
        color: {
            type: String,
            default: '#ff5687',
        }
    },
    model: {
        prop: 'checked',
        event: 'changeValue'
    },
    methods: {
        toggleChecked(e) {
            this.$emit('change', {detail: {value: !this.checked}});
            this.$emit('changeValue', {detail: {value: !this.checked}});
            this.$emit('click', e);
        }
    }
}
</script>

<style lang="less" scoped>
.bl___switch-container {
    .switch-content {
        width: 54px;
        height: 32px;
        border-radius: 32px;
        position: relative;

        .switch-button {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 1px;
            top: 1px;
            border-radius: 30px;
            background-color: #ffffff;
            transition: all 0.3s;
        }

        .disable-background {
            width: 56px;
            height: 34px;
            position: absolute;
            left: -1px;
            top: -1px;
            background: #eeeeee;
            transition: all 0.3s;
            border-radius: 32px;
        }
    }

    &.checked {
        .switch-content {
            .switch-button {
                transform: translateX(22px);
            }

            .disable-background {
                transform: scale(0);
            }
        }
    }
}
.bl___checkbox-container {
    width: 22px;
    height: 22px;
    border: 1px solid #eeeeee;
    border-radius: 2px;

    .checkbox-content {
        background: #ffffff;
        font-size: 0;
        text-align: center;

        .check {
            margin-top: 1px;
        }
    }
}
</style>
