<template>
    <div
        class="row  go-form-row flex-div"
        v-show="inputItem.display == null ? true : inputItem.display"
    >
        <go-label v-if="!radioBox"
                  :labelWidth="labelWidth"
                  :labelAlign="labelAlign" :item="inputItem"></go-label>
        <!--带radio的label-->
        <go-label-radio ref="radioLabel" v-else :radioVal="radioVal" @radioBoxClick="radioBoxClick"
                        :item="inputItem"></go-label-radio>

        <div :class="'go-content ' + getInputWid()" :style="getInputWidStyle()">

         <CheckboxGroup @on-change="selGroupValues" v-model="selValues">
                <span :key="index" v-for="(itemObj, index) of inputItem.items" style="line-height: 25px;">
                    <Checkbox :disabled="itemObj.disabled" :label="itemObj.label"></Checkbox>
                    <div v-if="display==='block'" style="width: 100%;overflow: hidden;height: 1px;"></div>
                </span>

         </CheckboxGroup>

        <go-clear-input-icon
            @clickClearIcon="clearInputValue"
            v-model="value"
            :disabled="inputItem.disabled"
            :right="5"
        ></go-clear-input-icon>
            <!--校验提醒图标-->
            <go-error-icon v-model="value" :item="inputItem"></go-error-icon>
        </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 GoLabelRadio from "../commponents/go-label-radio";
    import GoErrorIcon from "../commponents/go-error-icon";
    import GoLabel from "../commponents/go-label";
    import formMixin from "../../../mixins/formMixins";
    import {GoingUtils, AssertUtils} from "goingutils";

    export default {
        name: "go-checkbox-group",
        mixins: [formMixin],
        data() {
            return {
                selValues: [],
            };
        },
        props: {
            display: {
                type: String,
                default: "block"
            },
            labelAlign: {
                type: String,
                default: "right"
            },
            value: {},
            btnName: {
                type: String,
                default: ""
            }
        },
        computed: {},
        methods: {
            //设置drop的radio状态
            setRadioValue(radioState){
                this.$refs.radioLabel.setRadioValue(radioState);
                // //设置子项的dis状态
                this.inputItem.items.forEach((itemObj)=>{
                    itemObj.disabled=!radioState;
                });
            },
            selGroupValues() {
                this.$emit('input', this.selValues.join(GoingUtils.relChart));
            },
            radioBoxClick(data) {
                this.$emit('radioBoxClick', {item: this.inputItem, data});
            },
            change(selValue) {
                this.$emit('input', selValue);
            }
        },
        mounted() {
            //如果不为空 才设置值
            if (AssertUtils.isNotEmpty(this.value)) {
                this.selValues = this.value.split(GoingUtils.relChart);
            } else {
                this.selValues = [];
            }
            this.$nextTick(()=>{
                //判断是否存在radio 选择
                if(this.radioBox){
                    this.setRadioValue(this.radioVal);
                }
            });
        },
        watch: {
            value(newVal) {
                //如果不为空 才设置值
                if (AssertUtils.isNotEmpty(newVal)) {
                    this.selValues = newVal.split(GoingUtils.relChart);
                } else {
                    this.selValues = [];
                }
            },
            //监听radio选项值的变化
            radioVal(newVal){
                if(this.radioBox){
                    this.setRadioValue(newVal);
                }
            }
        },
        components: {
            GoLabelRadio,
            GoLabel,
            GoErrorIcon: GoErrorIcon,
            GoClearInputIcon: GoClearInputIcon
        }
    };
</script>
