<template>
    <a-form-model-item :label="attr.name" :prop="attr.alias">
        <a-select v-if="setting.box_type === 'select'"
                  :allowClear="true"
                  :value="modelVal"
                  :disabled="disabled"
                  @change="selectChange">
            <a-select-option v-for="(item, index) in options"
                             :key="index" :value="item.value">
                {{ item.label }}
            </a-select-option>
        </a-select>
        <a-select v-else-if="setting.box_type === 'multiSelect'"
                  :allowClear="true"
                  mode="multiple"
                  :value="modelVal"
                  :disabled="disabled"
                  @change="selectChange">
            <a-select-option v-for="(item, index) in options"
                             :key="index" :value="item.value">
                {{ item.label }}
            </a-select-option>
        </a-select>
        <a-radio-group v-else-if="setting.box_type === 'radio'"
                       :value="modelVal"
                       @change="radioChange"
                       :style="{width: '100%'}">
            <a-row v-for="(item, index) in options" :key="index">
                <a-col v-for="(child, index1) in item" :span="span" :key="index1">
                    <a-radio :value="child.value">
                        {{ child.label }}
                    </a-radio>
                </a-col>
            </a-row>
        </a-radio-group>
        <a-checkbox-group v-else-if="setting.box_type === 'checkbox'"
                          :value="modelVal"
                          @change="boxChange"
                          :style="{width: '100%'}">
            <a-row v-for="(item, index) in options" :key="index" :gutter="[10, 10]">
                <a-col v-for="(child, index1) in item" :span="span" :key="index1">
                    <a-checkbox  :value="child.value">
                        {{ child.label }}
                    </a-checkbox >
                </a-col>
            </a-row>
        </a-checkbox-group>
    </a-form-model-item>
</template>

<script>
import util from "../../utils/util"
import {gettype} from "../../utils/functions"
export default {
    name: "mix-box",
    model: {
        prop: "modelVal",
        event: 'change'
    },
    props: {
        modelVal: "",
        attr: {
            type: Object,
            default: () => {
            }
        }
    },
    data(){
        return {
            setting: {
                is_allow_null: true,
                box_type: 'select',
                options: [],
                per_row_number: 1
            },
            disabled: false,
            perRowNumber: 1,
            span: 24,
            options: []
        }
    },
    created() {
        this.setting = this.attr.setting
        this.setDisable(this.attr.display)
        this.perRowNumber = this.setting.per_row_number ? this.setting.per_row_number: 1
        this.span = 24 / this.perRowNumber
        this.setOption(this.setting.box_type, this.setting.options, this.perRowNumber)
    },
    methods: {
        setDisable(display) {
            if (display === 'r' || display === 'v') {
                this.disabled = true;
            } else if (display === 'h') {
                this.textType = 'hidden';
            } else if (display === 'w') {
                this.disabled = false;
            }
        },
        setOption(boxType, origin, size){
            let options = [];
            origin.forEach(v => {
                let value = v.split(':')
                options.push({
                    value: value[0],
                    label: value.length > 1 ? value[1]: value[0]
                })
            })
            if (boxType === 'select' || boxType === 'multiSelect') {
                this.options = options
            } else {
                this.options = util.chunk(options, size)
            }
        },
        selectChange(value, option) {
            this.$emit('change', value);
        },
        radioChange(e){
            this.$emit('change', e.target.value);
        },
        boxChange(value){
            this.$emit('change', value);
        }
    }
}
</script>

<style scoped>

</style>
