<template>
    <div class="com-switcher" :class="{active:value,disable:disable}" @click="onClick">
        <div></div>
    </div>
</template>
<script>
export default {
    name: "com-switcher",
    props: {
        name: String,
        value: Number,
        disable: Boolean
    },
    // data() {
    //     return {
    //         active: this.value
    //     };
    // },
    methods: {
        onClick() {
            this.$emit("change", Number(!this.value), this.name);
        }
    }
};
</script>
<style lang="less" scoped>
.com-switcher {
    position: relative;
    width: 54px;
    height: 24px;
    background-color: rgb(0, 0, 0);
    border: 2px solid #737373;
    border-radius: 13px;
    transition: background-color 0.2s;
    transition-timing-function: linear;
    cursor: pointer;
    > div {
        top: 1px;
        width: 18px;
        height: 18px;
        background-color: #737373;
        border-radius: 11px;
        position: absolute;
        transition: right 0.2s, color 0.2s;
        right: 31px;
        transition-timing-function: ease-in-out;
    }
    &.active {
        > div {
            right: 1px;
            background-color: @color;
        }
    }
    &.disable {
        pointer-events: none;
        opacity: 0.5;
    }
}
[show-mode="mobile"],
[edit-mode="mobile"] {
    .com-switcher {
        width: 46px;
        height: 10px;
        border: none;
        margin: 5px 0;
        background-color: #ececec;
        > div {
            top: 50%;
            margin-top: -11px;
            width: 22px;
            height: 22px;
            background-color: rgb(158, 158, 158);;
        }
        &.active {
            background-color: fade(@color,50%); //rgb(157, 241, 228);
            > div {
                right: 0px;
                background-color: @color;
            }
        }
        &.disable {
            pointer-events: none;
            opacity: 0.5;
        }
    }
}
</style>