<template lang="pug">
    label
        input(
            :disabled="disabled"
            ref="ocFormElement"
            type="checkbox"
            :name="name"
            :true-value="trueValue"
            :false-value="falseValue"
            v-model="isChecked")
        i {{this.isChecked === trueValue? this.on : this.off}}
</template>

<script>
    export default {
        name: 'oc-toggle',
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            trueValue: {
                default: true
            },
            falseValue: {
                default: false
            },
            value: {
                default: false
            },
            name: String,
            on: { type: String, default: "" },
            off: { type: String, default: "" }
        },
        data() {
            return {
                isChecked: this.falseValue
            }
        },
        watch: {
            value(val){
                this.isChecked = val;
            },
            isChecked() {
                this.$emit('change', this.$refs.ocFormElement);
                this.$emit('input', this.isChecked);
            }
        },
        mounted() {
            this.isChecked = this.value;
        },
    }
</script>

<style lang="stylus" scoped>
    @keyframes zoomIn 
        0% 
            opacity 0
            transform scale3d(.3, .3, .3)
        50% 
            opacity 1
    @keyframes fadeIn
        0% 
            opacity 0
        100% 
            opacity 1
    :host
        display inline-block
    label
        cursor pointer
        position relative
        display inline-block
        overflow hidden
        vertical-align middle
        transition all .3s
        input
            cursor inherit
            opacity 0
            position absolute
            left 0
            top 0
            width 100%
            height 100%
            z-index 1
        i
            border 1px solid #ccc
            min-width 40px
            font-size 12px
            position relative
            z-index 0
            width auto
            left 0
            top 0
            background-color #ccc
            color #fff
            height 20px
            line-height 20px
            padding-left 20px
            padding-right 5px
            display inline-block
            border-radius 50px
            font-style normal
            border 1px solid #d1d7e3
            transition border-color .3s,background-color .3s
            &:before
                position absolute
                left 1px
                top 1px
                content ""
                display block
                width 16px
                height 16px
                border-radius 50px
                background-color #fff
                transition all .3s
                
        >input:checked
            ~i
                border-color #2639a0
                padding-left 5px
                padding-right 22px
                font-weight 500
                background-color #2639a0
                &:before
                    left 100%
                    margin-left -17px
        >input[disabled] ~i
            border 1px solid #d1d7e3
            background-color #ccc
            &:before
                background-color #999
</style>