<template>
    <label :class="[_class,iSwitch]" :for="tag" :style="[core ? {background:'#007bff',border:'1px solid #007bff',
        transition:'.1s linear',} : {}]">
        <input :id="tag" type="checkbox" @change="change($event)" v-model="core">
        <i :style="[core ? {left: 'unset',backgroundColor: '#fff',marginLeft: '9px'} : {marginLeft: '2px',backgroundColor: '#fff'}]"></i>
        <span v-show="!core" style="color: #fff;">{{ closeText }}</span>
        <span class="open" v-show="core" style="color: #fff;border-color: #fff;">{{ openText }}</span>
    </label>
</template>

<script>
    export default {
        data(){
            return {
                core: false,
                tag: this.$utils.tool.random('mxl-switch-'),
                iSwitch:'iSwitch',
            }
        },
        name: 'switch',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            size: {
                default: 'md',
                type: String
            },
            value: {
                default: false,
            },
            openText: {
                default: '',
            },
            closeText: {
                default: '',
            }
        },
        computed: {
            _class(){
                let layout = ['xs','sm', 'md', 'lg'].includes(this.size) ? `${this.size}` : '';
                return `${layout}`;
            }
        },
        watch: {
            value: {
                handler(){
                    let t = !!this.value;
                    if(t !== this.core) {
                        this.core = t;
                        this.input();
                    }
                },
                immediate: true
            }
        },
        methods: {
            change(){
                this.$emit('change', this.core);
            },
            input(){
                this.$emit('input', this.core)
            }
        }
    }
</script>

<style>
    .iSwitch {
        position: relative;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        border-radius: 15px;
        border: 1px solid rgb(255, 73, 73);
        cursor: pointer;
        margin: 20px 10px;
    }

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

    .iSwitch i {
        display: inline-block;
        border-radius: 100%;
        background: #fff;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .iSwitch span {
        padding: 0!important;
        text-align: center!important;
        font-style: normal!important;
        position: absolute;
    }

    .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%);
    }
    /*-------xs---------------------*/
    .xs {
        width: 20px !important;
        height: 18px;
        background-color: rgb(255, 73, 73);
        line-height: 18px;
        min-width: 35px;
        margin-top: 8px;
        border: 1px solid rgb(255, 73, 73);
    }

    .xs span {
        margin-left: 5px;
        font-size: 9px;
        top: 0px;
    }

    .xs i {
        width: 11px;
        height: 11px;
    }
    .xs .open{
        margin-left: -14px;
    }

    /*-------sm---------------------*/
    .sm {
        width: 42px !important;
        height: 21px;
        background-color: rgb(255, 73, 73);
        line-height: 24px;
        min-width: 35px;
        margin-top: 8px;
        border: 1px solid rgb(255, 73, 73);
    }

    .sm span {
        margin-left: 6px;
        font-size: 12px;
        top: -2px;
    }

    .sm i {
        width: 14px;
        height: 14px;
    }
    .sm .open{
        margin-left: -17px;
    }
    /*----md------*/
    .md {
        width: 51px !important;
        height: 26px;
        line-height: 34px;
        min-width: 35px;
        margin-top: 8px;
        background: rgb(255, 73, 73);
    }

    .md span {
        font-size: 13px;
        margin-left: 8px;
        top: -4px !important;
    }

    .md i {
        width: 19px;
        height: 19px;
    }

    .md .open{
        margin-left: -17px !important;
    }
    /*----lg------*/
    .lg {
        width: 59px !important;
        height: 29px;
        line-height: 28px;
        min-width: 35px;
        margin-top: 8px;
        background: rgb(255, 73, 73);
    }

    .lg span {
        font-size: 15px;
        margin-left: 9px;
        top: -0px;
    }

    .lg i {
        width: 23px;
        height: 23px;
        margin-top: 2px;
        margin-left: 13px;
    }

    .lg .open{
        margin-left: -20px !important;
    }
</style>