<template>
    <label class="iSwitch" :for="tag" :style="[core ? {background:'#007bff', paddingRight: '29px'} : {}]">
        <input :id="tag" type="checkbox" @change="change" v-model="core">
        <i :style="[core ? {right: '29px', left: 'unset'} : {left: 0}]"></i>
        <span v-show="!core" style="margin-left: 29px;color: #fff;">{{ closeText }}</span>
        <span v-show="core" style="margin: 0 5px;color: #fff;">{{ openText }}</span>
    </label>
</template>

<script>
    export default {
        data(){
            return {
                core: false,
                tag: this.$utils.tool.random('mxl-switch-')
            }
        },
        name: 'switch',
        props: {
            value: {
                default: false,
            },
            openText: {
                default: '',
            },
            closeText: {
                default: '',
            }
        },
        watch: {
            value: {
                handler(){
                    this.core = !!this.value
                    this.change();
                },
                immediate: true
            }
        },
        methods: {
            change(){
                this.$emit('input', this.core)
            }
        }

    }
</script>

<style>
    .iSwitch {
        position: relative;
        display: inline-block;
        height: 30px;
        border-radius: 15px;
        background: #dcdcdc;
        border: 1px solid #dcdcdc;
        box-shadow: 0 0 5px #dcdcdc;
        overflow: hidden;
        vertical-align: middle;
        padding-right: 10px;
    }

    .iSwitch input {
        width: 0;
        visibility: hidden;
    }

    .iSwitch i {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 29px;
        height: 29px;
        border-radius: 100%;
        background: #fff;
    }

    .iSwitch span {
        line-height: 29px;
    }

    .iSwitch input:checked+i {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }

    .iSwitch input:checked+i:before {
        display: inline-block;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }
</style>