<template>
    <div :class="'y_switch '+classStr" @click="fnClick"></div>
</template>

<script>
    export default {
        name: "ySwitch",
        computed:{
            classStr(){
                return(this.color == "main" ? " y_switch_color_main" : "") +
                (this.color == "warning" ? " y_switch_color_warning" : "") +
                (this.color == "info" ? " y_switch_color_info" : "") +
                (this.color == "danger" ? " y_switch_color_danger" : "") +
                    (this.switch ? " y_switch_open" : "")
            }
        },
        data(){
            return {
                switch:this.value,
            }
        },
        methods:{
            fnClick(){
                if(!this.lock){
                    this.switch = !this.switch;
                }
                else{
                    this.$emit("click");
                }
            }
        },
        model:{
            prop:"value",
            event:"update:value"
        },
        props:{
            color:{
                default:"main"
            },
            lock:Boolean,
            value:"",
        },
        watch:{
            value(){
                this.switch = this.value;
            },
            switch(){
                this.$emit("update:value",this.switch);
            }
        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    .y_switch{
        width: 51px;
        height: 26px;
        border-radius: 13px;
        position: relative;
        transition:all .3s;
        cursor: pointer;
        &:after{
            content:" ";
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            left:5px;
            top:3px;
            border-radius: 50%;
            transition:all .3s;
            //background:
        }
    }

    .y_switch_open{
        &:after{
            left:26px;
        }
    }
    .y_switch_color_main{
        background:#e8def5;
        &:after{
            background: $color_topic_main;
        }
        &.y_switch_open{
            background: #b392de;
            &:after{
                background: #3c008a;
            }
        }
    }
    .y_switch_color_warning{
        background:#FBF6E6;
        &:after{
            background: #fff;
        }
        &.y_switch_open{
            background: #FED100;
            &:after{
                background: #fff;
            }
        }
    }
    .y_switch_color_info{
        background:#c0dae5;
        &:after{
            background: #77b0c8;
        }
        &.y_switch_open{
            background: #77b0c8;
            &:after{
                background: #539bb9;                                                                                     ;
            }
        }
    }
    .y_switch_color_danger{
        background:#e5c0c0;
        &:after{
            background: #c87777;
        }
        &.y_switch_open{
            background: #c87777;
            &:after{
                background: #b95353;                                                                                     ;
            }
        }
    }
</style>
