<template> 
<div v-show="myConfig.visible">
   <Select   ref="myControl"   v-model="value" :transfer="myConfig.transfer"   :multiple="myConfig.multiSelect"  :max-tag-count="myConfig.maxTagCount" :size="myConfig.size" :disabled="myConfig.readOnly" :clearable="myConfig.clearable"  @on-change="_setFatherValue" :filterable="myConfig.filterable" :placeholder="myConfig.placeholder"  @on-open-change="onOpenChange">
        <template v-if="!myConfig.showOptionGroup">
             <template v-if="myConfig.readOnly">
                <Option v-for="(item) in myConfig.data" :value="item[myConfig.valueField]" :key="item[myConfig.valueField]">{{item.label}}</Option>
             </template>
             <template v-else>
                <Option v-for="(item) in myConfig.data" v-show="item.visible" :value="item[myConfig.valueField]" :key="item[myConfig.valueField]">{{item.label}}</Option>
             </template>
        </template>
        <template v-else>
            <OptionGroup v-for="(item,index) in myConfig.data" :label="item.label" :key="'option_' + index">
                    <template v-if="myConfig.readOnly">
                        <Option v-for="(item2) in item.data" :value="item2[myConfig.valueField]" :key="item2[myConfig.valueField]">{{item2.label}}</Option>
                    </template>
                    <template v-else>
                        <Option v-for="(item2) in item.data" v-show="item2.visible" :value="item2[myConfig.valueField]" :key="item2[myConfig.valueField]">{{item2.label}}</Option>
                    </template>
            </OptionGroup>
        </template>
    </Select>
</div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'combobox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    data:[],
                    valueField: 'code',
                    textField: 'name',
                    maxTagCount: 2,
                    codeWithName: true ,
                    defaultValue:'',
                    filterable:false,
                    clearable:true,
                    readOnly:false,
                    showOptionGroup:false,
                    multiSelect:false,
                    editData:[],
                    showNullItem:false,
                    filterData:null,
                    transfer:false
                }
            };
        },
        methods:{
            fatherValueToValue (value) {
              if (this.myConfig.multiSelect) {
                return value;
              } else {
                return value + '';
              }
            },
            watchCustomFatherValue() {
                let para= {};
                let flag = false;
                if (!this.myConfig.multiSelect && this.value === '') {
                    if (!this.myConfig.showNullItem && this.myConfig.data.length === 1) {
                        if (this.myConfig.required) {
                            if (this.myConfig.showOptionGroup) {
                                if (this.myConfig.data[0].data.length  === 1) {
                                    this.value = this.myConfig.data[0].data[0][this.myConfig.valueField];
                                    flag = true;
                                } 
                            } else {
                                this.value = this.myConfig.data[0][this.myConfig.valueField];
                                flag = true;
                            }
                        }
                        para.value = this.value;
                    }
                } else {
                    para.value = this.value;
                }
                this.oldValue = this.value;
                if (flag) {
                    this.$nextTick(() =>{
                        para.name = this.myConfig.name;
                        this.$emit('inputValue', para);
                    });
                }
            },
            setPro (obj) {
                if (this.setCustomPro) {
                    obj = this.setCustomPro(obj);
                }
                if (obj) {
                    this.myConfig = Object.assign({}, this.myConfig, obj);
                }
            },
            isOptionShow(temp) {
                if (this.myConfig.readOnly) {
                    return true;
                } else {
                    return temp.visible;
                }
            },  
            setCustomPro(obj) {
                if (obj.data !== undefined && obj.data.length > 0) {
                    this.editData = [];
                    if (this.myConfig.showOptionGroup) {
                        obj.forEach(el => {
                            let temp = this.$Method.copy(el);
                            temp.data = [];
                            el.data.forEach(el2 => {
                                if (this.myConfig.codeWithName) {
                                    el2.label = '['+ el2[this.myConfig.valueField]+']' + el2[this.myConfig.textField];
                                } else {
                                    el2.label =el2[this.myConfig.textField];
                                }
                                if (this.myConfig.filterData) {
                                    el2.visible = this.myConfig.filterData(el2);
                                } else {
                                    el2.visible = this.doDictGroupKey(el2);
                                }
                            });
                        });
                    } else {
                        obj.data.forEach(el => {
                            if (this.myConfig.codeWithName) {
                                el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
                            } else {
                                el.label =el[this.myConfig.textField];
                            }
                            if (this.myConfig.filterData) {
                                el.visible = this.myConfig.filterData(el);
                            } else {
                                el.visible = this.doDictGroupKey(el);
                            }
                        });
                    }
                  
                }
                return obj;
            },
            customInit() {
                this.editData = [];
                if (this.myConfig.data && this.myConfig.data.length > 0) {
                    if (this.myConfig.showOptionGroup) {
                        this.myConfig.data.forEach(el => {
                            let temp = this.$Method.copy(el);
                            temp.data = [];
                            el.data.forEach(el2 => {
                                if (this.myConfig.codeWithName) {
                                    el2.label = '['+ el2[this.myConfig.valueField]+']' + el2[this.myConfig.textField];
                                } else {
                                    if (el2[this.myConfig.textField]) {
                                        el2.label =el2[this.myConfig.textField];
                                    } else {
                                        el2.label =el2[this.myConfig.valueField];
                                    }
                                }
                                if (this.myConfig.filterData) {
                                    el2.visible = this.myConfig.filterData(el2);
                                } else {
                                    el2.visible = this.doDictGroupKey(el2);
                                }
                            });
                            this.editData.push(temp);
                        });
                    } else {
                        this.myConfig.data.forEach(el => {
                            if (this.myConfig.codeWithName) {
                                el.label = '['+ el[this.myConfig.valueField]+']' + el[this.myConfig.textField];
                            } else {
                                if (el[this.myConfig.textField]) {
                                    el.label =el[this.myConfig.textField];
                                } else {
                                    el.label =el[this.myConfig.valueField];
                                }
                            
                            }
                            if (this.myConfig.filterData) {
                                el.visible = this.myConfig.filterData(el);
                            } else {
                                el.visible = this.doDictGroupKey(el);
                            }
                        });
                    }
                    
                }
            },
            onOpenChange(value) {
                if (this.config.onOpenChange) {
                    this.config.onOpenChange(value);
                }
            },
            doDictGroupKey(el) {
                if (!this.config.dictgroupkey) {
                    return true;
                }
                let dictgroupkey = this.config.dictgroupkey.split(',');
                if (el.dgroup) {
                    let index  = dictgroupkey.findIndex(tmp => tmp === el.dgroup);
                    if (index > -1) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return true;
                }
            },
            setFocus(value) {
                if (value) {
                    this.$refs.myControl.$refs.reference.focus();
                    this.$refs.myControl.isFocused = true;
                } else {
                    this.$refs.myControl.$refs.reference.blur();
                    this.$refs.myControl.isFocused = false;
                }
            }
        }
    };
</script>