<template>
    <Row style="height: 26px;">
        <Checkbox @on-change="change" v-model="showValue" label="">
            <span style="display: inline-block;margin-left: 5px;" v-if="labelAlign==='right'">{{ label }}</span>
            <span style="display: inline-block;margin-left: 5px;"><slot></slot></span>
        </Checkbox>
    </Row>
</template>

<script>
    import formMixin from "../../../mixins/formMixins";


    export default {
        name: "go-checkbox",
        mixins: [formMixin],
        props: {
            value:{},
            label: {
                type:String
            },
            labelAlign: {
                type:String,
                default: 'right',
            },
        },
        data() {
            return {};
        },
        computed: {},
        methods: {
            change(data) {
                this.$emit('input', data);
                this.$emit("on-change", data);
            }
        },
        mounted() {
            if (this.value || this.value === 'true') {
                this.showValue = true;
            } else {
                this.showValue = false;
            }
        },
        watch: {
            value(val) {
                if (val || val === 'true') {
                    this.showValue = true;
                } else {
                    this.showValue = false;
                }
            }
        },
    };
</script>
