<template>
    <div :class='["web-switch", {"isChecked" : !worth} ]'>
        <span class="web-switch-left">
            <span @click="isChecked" :class="{'is-active' : worth}">{{inactiveText}}</span>            
        </span>
        <span @click="isChecked" :style="{'background-color': worth? activeColor: inactiveColor,'cursor': eldisabled? 'not-allowed': 'pointer'}" class="web-switch-core"></span>
        <span class="web-switch-right">
            <span :class="{'is-active' : !worth}" @click="isChecked">{{activeText}}</span>            
        </span>
    </div>
</template>

<script>
    export default {
        name: "web-switch",
        props:{
            activeColor:{
                type: String,
                default: "#409eff"
            },
            value: {
                type: Boolean,
                default: true
            },
            inactiveColor: {
                type: String,
                default: "#dcdfe6"
            },
            activeText:{
                type: String,
                default: ""     
            },
            inactiveText:{
                type: String,
                default: ""
            },
            disabled:{
                type: Boolean,
                default: false
            },
            eldisabled:{
                type:Boolean,
                default: false
            }
        },
        data() {
            return {
                worth: this.value,
                abled: this.disabled
            }
        },
        methods:{
            isChecked(){
                if(!this.disabled){
                this.worth = !this.worth;
                }
            }
        },
    }
</script>

<style scoped>
    .web-switch{
        display: inline-flex;
        align-items: center;
        position: relative;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        vertical-align: middle;
    }
    .isChecked .web-switch-core:after{
        left: 100%;
        margin-left: -17px;
    }
    .web-switch-core{
        margin: 0;
        display: inline-block;
        position: relative;
        width: 40px;
        height: 20px;
        border: 1px solid #dcdfe6;
        outline: none;
        border-radius: 10px;
        box-sizing: border-box;
        background: #dcdfe6;
        cursor: pointer;
        transition: border-color .3s,background-color .3s;
        vertical-align: middle;
    }
    .web-switch-core:after{
        content: "";
        position: absolute;
        top: 1px;
        left: 1px;
        border-radius: 100%;
        transition: all .3s;
        width: 16px;
        height: 16px;
        background-color: #fff;
    }
    .active-color{
        width: 40px;
        border-color: rgb(19, 206, 102);
        background-color: rgb(19, 206, 102);
    }
    .inactive-color{
        width: 40px;
        border-color: rgb(255, 73, 73);
        background-color: rgb(255, 73, 73);
    }
    .web-switch-left{
        margin-right: 10px;
    }
    .web-switch-right{
        margin-left: 10px;
    }
    .is-active{
        color: #409eff;
    }
    .eldisabled{
        cursor: not-allowed;
    }
</style>