<template>
    <div :class="classStr">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "yCheckGroup",
        computed: {
            classStr() {
                return "y_checkGroup " +
                    (this.direct == 'vertical' ? "y_checkGroup_directVertical " : "") +
                    (this.direct == 'horizontal' ? "y_checkGroup_directhorizontal " : "") +
                    (this.customClass ? this.customClass : "")
            }
        },
        data() {
            return {
                result: this.listResult
            };
        },
        methods: {
            /**
             * 设置内容
             * @param value 内容的值
             * @param action 内容行为[1:选中，2:取消]  只有复选的时候才用
             */
            setValue(value, action, index) {
                //如果是单选
                if (this.radio) {
                    this.result = value;
                } else {
                    if (!this.result || !this.result.length) {
                        this.result = [];
                    }
                    action = action || 1;
                    let index = this.result.indexOf(value);
                    if (action == 1) {
                        if (index < 0) {
                            this.result.push(value);
                            this.result.sort();
                        }
                    } else if (action == 2 && index > -1) {
                        this.result.splice(index, 1);
                    }
                }
                //通知旗下所有除当前子组件的组件
                if (this._childrens && this._childrens["yCheckbox"]) {
                    for (let a  in this._childrens["yCheckbox"]) {
                        this._childrens["yCheckbox"][a] && this._childrens["yCheckbox"][a].parentChange && this._childrens["yCheckbox"][a].parentChange();
                    }
                }
            }
        },
        model: {
            prop: "listResult",
            event: "update:listResult"
        },
        props: {
            customClass: String,
            direct: {
                default: "horizontal",
                type: String
            },
            disabled: Boolean,
            listResult: {
                default: "",
                type: [Array, String,Number]
            },
            radio: Boolean,
        },
        watch: {
            listResult() {
                //this.result = this.listResult;
                this.setValue(this.listResult);
            },
            result() {
                this.$emit("change");
                this.$emit("update:listResult", this.result);
            }
        },
        created() {

        }
    }
</script>

<style lang="scss">
    @import "../css/var.scss";
    @import "../css/base.scss";

    .y_checkGroup {

    }

    .y_checkGroup_directhorizontal {
        & > .y_checkbox,&>y-checkbox {
            margin-right: 39px;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .y_checkGroup_directVertical {
        & > .y_checkbox,&>y-checkbox {
            display: block;
            margin-top: 5px;
        }
    }

</style>
