<template>
    <a-switch class="dhcSwitch" v-model:value="svalue" @change="handleChange" :value="value" v-bind="$attrs">
    </a-switch>
</template>
<script>
export default {
    name: 'ProSwitch',
    props: {
        value: {
            type: String,
            default: null
        },
    },
    watch: {
        //判断下拉框的值是否有改变
        svalue (val, oldVal) {
            if (val != oldVal) {
                this.$emit('input', this.svalue);
            }
        },
        value (val, oldVal) {
            if (val != oldVal) {
                this.svalue = val;
            }
        }
    },
    methods: {
        handleChange (data, node, event) {
            this.$emit('change', data, node, event)
        }
    },
    mounted () {
    },
    data () {
        return {
            svalue: this.value
        }
    }
}
</script>
<style lang="scss">
.dhcSwitch {
    .el-switch__label * {
        font-size: 11px;
    }

    .el-switch__label--left {
        position: relative;
        left: 29px;
        color: #fff;
        z-index: -1111;
        width: 0px;

        span {
            width: 40px;
        }
    }

    .el-switch__label--right {
        font-size: 11px;
        position: relative;
        right: 70px;
        color: #fff;
        z-index: -1111;
        width: 0px;

        span {
            display: inline-block;
            width: 40px;
        }
    }

    .el-switch__core {
        width: 65px !important;
    }

    .el-switch__label--right.is-active {
        z-index: 10;
        color: #fff !important;
    }

    .el-switch__label--left.is-active {
        z-index: 10;
        color: #9c9c9c !important;
    }
}
</style>
