<template lang="pug">
    span(ref="divFormProps")
        div
            span.select-group-toggle(@click='toggleShow') {{ isShowGroup ? '<< Hide' : '>> All attributes' }}
        span.select-group-item( v-show="isShowGroup", v-for="(item, key) in items", v-if="item.propertyValue", :style="{ 'margin-right': itemMarginRight }") 
            label.select-group-label(:style="{ width: samePropsLabelWidth, 'padding-right': labelPaddingRight }") {{`${item.propertyName}:`}}
            oc-select.w150(:items="item.propertyValue", :name="(formPropertiesPrefix || '') + key + '_in'",  :isAll="true", :isShowFilter="isShowFilter", multiple)
</template>

<script>
    export default {
        name: 'oc-select-group',
        props: {
            items: { type: Object, default: null },
            // 参数为对象列表{
            //     value1:{
            //         propertyName: '',
            //         propertyValue: ''
            //     },
            //     value2:{
            //         propertyName: '',
            //         propertyValue: ''
            //     },
            // }
            formPropertiesPrefix: { type: String, default: null },  //查询时，额外附加的属性前缀
            isShowFilter: {type: Boolean, default: false },
            isClear: {type: Boolean, default: false },
        },
        data() {
            return {
                isShowGroup: false,
                samePropsLabelWidth: '80px',
                
                itemMarginRight: '10px',
                labelPaddingRight: '5px'

            }
        },
        mounted(){
            this.adjustStyle();
        },
        methods: {
            toggleShow(){
                if(this.isClear) {
                    oc.tools.form.clear(this.$refs.divFormProps);
                }
                this.isShowGroup = !this.isShowGroup;
            },
            adjustStyle() {
                let form = this.$parent.$refs.formPagerSearch;

                if(form) {
                    let span =  form.querySelector('span');
                    let label = form.querySelector('label');

                        if(span.classList.contains('ocFormItem')) {
                        this.itemMarginRight = '20px';
                        this.labelPaddingRight = '5px';
                    }

                    this.$nextTick(_ => {
                        label && (this.samePropsLabelWidth = label.clientWidth + 'px');
                    })
                }
                

            },
        }
        
    }
</script>
<style lang="stylus" scoped>
    .select-group-item
        display inline-block
        overflow hidden
        // margin-right 10px
        margin-bottom 5px
    .select-group-label
        display inline-block
        color #888
        overflow hidden
        vertical-align middle
        word-break break-all
    .select-group-toggle
        display inline-block
        margin-bottom 10px
        &:hover
            color #2639a0
            cursor pointer
</style>