<template>
    <div class="row go-form-row flex-div">
        <div class="go-label">
            <input
                :checked="item.radioVal || false"
                v-if="radioBox != null && radioBox.length > 0"
                type="radio"
                @click="radioBoxClick($event)"
                :name="radioBox"
            />
            {{ item.label }}：
        </div>
        <div :class="'go-content ' + getInputWid()" style="position: relative;">
            <template v-if="item.items.length > 1">
                <go-checkbox-group v-model="model" @on-change="change">
                    <go-checkbox
                        :disabled="item.disabled"
                        :key="o.value"
                        :label="o.value"
                        v-for="o in item.items"
                    >{{ o.label }}
                    </go-checkbox
                    >
                </go-checkbox-group>
            </template>
            <template v-else>
                <go-checkbox
                    :disabled="item.disabled"
                    v-model="model"
                    @on-change="change"
                >{{ item.items[0].label }}
                </go-checkbox
                >
            </template>
        </div>
    </div>
</template>

<script>
    import GoCheckboxGroup from "./go-checkbox-group";
    import GoCheckbox from "./go-checkbox";
    import formMixin from "../../../mixins/formMixins";

    export default {
        name: "go-checkbox-input",
        mixins: [formMixin],
        props: {
            value: {
                type: [Boolean, Array]
            },
            item: {
                type: Object,
                default() {
                    return {};
                }
            },
            width: {
                type: String,
                default: "big"
            },
            radioBox: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                model:
                    this.item.items.length > 1
                        ? Array.isArray(this.value)
                        ? this.value
                        : []
                        : !!this.value
            };
        },
        watch: {
            value(val) {
                this.model =
                    this.item.items.length > 1 ? (Array.isArray(val) ? val : []) : !!val;
            }
        },
        methods: {
            radioBoxClick(event) {
                this.$emit("radioBoxClick", this.item, event);
            },
            change() {
                this.$emit("input", this.model);
                this.$emit("on-change", this.model);
            }
        },
        components: {
            "go-checkbox-group": GoCheckboxGroup,
            "go-checkbox": GoCheckbox
        }
    };
</script>
