<template>
    <div class="row  go-form-row flex-div" v-show="inputItem.display == null ? true : inputItem.display" style="margin-bottom: 0">
        <go-label
            :labelSplit="labelFlag"
            :showLabel="labelFlag"
            :showSlot="inputItem.showLabelSlot"
            :item="inputItem"
        ></go-label>

        <div :class="'go-content ' + getInputWid()" :style="getInputWidStyle()">
            <go-checkbox @on-change="change" :labelAlign="labelAlign" v-model="showValue"
                         :label="(inputItem&&inputItem.items&&inputItem.items[0]&&inputItem.items[0].label)||label">
                <slot></slot>
            </go-checkbox>

        </div>
        <div
            v-if="btnName && btnName.length > 0"
            btnid="completeBtn"
            class="go-btn-simple no-padding primary"
            style="position: relative;left:5px;top:4px;"
        >
            {{ btnName }}
        </div>
    </div>
</template>

<script>
    import GoClearInputIcon from "../commponents/go-clear-input-icon";
    import GoErrorIcon from "../commponents/go-error-icon";
    import GoLabel from "../commponents/go-label";
    import formMixin from "../../../mixins/formMixins";
    import GoCheckbox from "./go-checkbox";
    import {AssertUtils} from "goingutils";

    export default {
        name: "go-checkbox-input",
        mixins: [formMixin],
        props: {
            labelAlign: {
                type: String,
                default: "left"
            },
            value: {},
            btnName: {
                type: String,
                default: ""
            }
        },
        computed: {
            //判断是否显示label 以及是否显示split
            labelFlag(){
                if(AssertUtils.isNotEmpty(this.inputItem["label"])){
                    return true;
                }else{
                    return false;
                }
            },
        },
        methods: {
            change(selValue) {
                this.$emit('input', selValue);
                this.$emit('on-change', selValue);
            }
        },
        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;
                }
            }
        },
        components: {
            GoCheckbox,
            GoLabel,
            GoErrorIcon: GoErrorIcon,
            GoClearInputIcon: GoClearInputIcon
        }
    };
</script>
