<template> 
 <div v-show="myConfig.visible" >
    <Tag  :color="color" :size="myConfig.tagSize"  v-for="(tempItem,index) in data" :key="index + '_edit'"  :closable="tempItem.closable" @on-close="closeTag(index)">{{ tempItem.label}}</Tag>
    <Button ref="btn" v-show="!myConfig.readOnly" icon="ios-add" type="dashed" :size="myConfig.size" @click="click">{{myConfig.btnText}}</Button>
    <Modal v-model="popShow" :styles="queryConfig.popStyle" :width="currentWidth" :title="modeTitle" :footer-hide="footerHide" :draggable="draggable" :closable="myConfig.closable" class="efuture-model">
        <div  style="padding-left:16px;padding-right:16px;"><component :is="pop" ref="popView" :config="queryConfig" :dictData="myConfig.dictData"  @conditionAction="conditionAction" :isPop="true" @dbclick="dbclick"/></div>
        <template #footer>
        <div>
              <Row type="flex" justify="center" align="middle"  :gutter="8">
                <Col>
                    <Button  type="primary" style="width:120px" @click="ok" >确认</Button>
                </Col>
                </Row>
        </div>
        </template>
    </Modal>
</div>
</template>
<script>
    import Base from '@/components/base/controlbase.vue';
    export default {
        name: 'poptagbox',
        extends: Base,
        data () {
            return {
                myConfig: {
                    isTree:false,
                    selectkey:'',
                    color:'primary',
                    closable:true,
                    tagSize:'default',
                    size:'small',
                    clearCondition:true,
                    btnText:'添加',
                    popControl:'',
                    dictData:{}
                    
                },
                queryConfig:{
                    popStyle:{
                        top:'20px'
                    }
                },
                popShow:false,
                data:[],
                selectTreeData:[],
                customRows:[],
                draggable:false,
                value:[],
                oldValue:[],
                color:'default',
                footerHide:false
            };
        },
        props:{
            fatherValue: {
                type: Array,
                default: () => []
            }
        } ,
        computed: {
            pop () {
                if (this.queryConfig.popControl) {
                    return this.queryConfig.popControl;
                } else {
                    if (this.queryConfig.isTree) {
                        return 'TreeBox';
                    } else {
                        return 'ViewGrid';
                    }
                }
            },
            modeTitle() {
                let title = this.config.label;
                if (this.queryConfig.title) {
                    title = this.queryConfig.title;
                }
                if (this.myConfig.curlTitle) {
                    title = this.myConfig.curlTitle
                }
                return title;
            }
        },
        methods:{
            conditionAction(temp) {
                switch(temp.action) {
                    case 'condition_ok':
                        if (temp.rows) {
                            this.customRows = [];
                            let flag = true;
                            if (temp.rows.length === 0) {
                                this.$refs.popView.alert('请选择');
                                this.popShow = true;
                                return true;
                            }
                            if (this.queryConfig.isTree) {
                                if (this.queryConfig.allowLastNode) {
                                    temp.rows.some(el => {
                                        if (this.$refs.popView.isChildren(el)) {
                                            flag = false;
                                            return true;
                                        }
                                    });
                                }
                                if (!flag) {
                                    this.$refs.popView.alert('选中的节点存在非末级节点，请检查');
                                    this.popShow = true;
                                } else {
                                    if (this.config.allowLastNode === true) {
                                        let rows = [];
                                        temp.rows.forEach(el => {
                                            if (!el.children || el.children.length === 0) {
                                                rows.push(el);
                                            }
                                        });
                                        this.setCommmonValue(rows);
                                    } else {
                                        this.setCommmonValue(temp.rows);
                                    }
                                    this.popShow = false;
                                }
                            } else {
                                this.setCommmonValue(temp.rows);
                                this.popShow = false;
                            }
                        }
                        break;
                    case 'condition_cancel':
                        this.popShow = false;
                        break;
                }
                if (!this.popShow) {
                    document.querySelector('body').removeAttribute("style");
                }
            },
            overrideSearchParam (param) {
                if (this.myConfig.overrideSearchParam) {
                    return this.myConfig.overrideSearchParam(param);
                } else {
                    return param;
                }
            },
            setCommmonValue(rows) {
                let that = this;
                if (this.myConfig.onAddTag) {
                    let temp = {};
                    temp.addData = rows;
                    temp.data = this.$Method.copy(this.data);
                    temp.control = that;
                    temp.name =  this.myConfig.name;
                    let tmp = this.myConfig.onAddTag(temp);
                    if (tmp && tmp.length > 0) {
                        tmp.forEach(el => {
                            if (!el.label) {
                                if (this.myConfig.setLabel) {
                                    el.label = this.myConfig.setLabel(el);
                                }
                            }
                            el.closable = true;
                            this.data.push(el);
                        });
                    }
                } else {
                    rows.forEach(el => {
                        if (this.myConfig.setLabel) {
                            el.label = this.myConfig.setLabel(el);
                        }
                        el.closable = true;
                        this.data.push(el);
                    });
                }
                this.setFatherValue();
            },
            setFatherValue() {
                let para = this.valueToFatherValue();
                para.name = this.myConfig.name;
                this.$emit('inputValue', para);
            },

            customInit () {
                if (this.config.selectkey) {
                    Object.assign(this.queryConfig, this.getQueryConfig(this.config.selectkey));
                    if (!this.queryConfig.isConfig) {
                        this.queryConfig.resources = this.OmdUrl[this.queryConfig.resources];
                    }
                    if (this.queryConfig.draggable) {
                        this.draggable = this.queryConfig.draggable;
                    }
                    this.queryConfig.overrideSearchParam = this.overrideSearchParam;
                    if (this.config.multiSelect !== undefined) {
                        this.queryConfig.multiSelect = this.config.multiSelect;
                    }
                    if (this.config.showAll !== undefined) {
                        this.queryConfig.showAll = this.config.showAll;
                    }
                    if (this.queryConfig.popControl) {
                        this.footerHide = true;
                    }

                    this.setSizeConfig(this.queryConfig);
                   
                    if (JSON.stringify(this.myConfig.dictData) === '{}') {
                        let obj = {};
                        if (this.queryConfig.items && this.queryConfig.items.length > 0) {
                            this.queryConfig.items.forEach(el => {
                                let dictkey = el.dictkey;
                                if (el.customDictkey) {
                                    dictkey = el.customDictkey;      
                                }
                                if (dictkey) {
                                    obj[dictkey] = '';  
                                }
                            });
                        }
                        if (JSON.stringify(obj) !== '{}') {
                            if (this.myConfig.getDictData) {
                                obj = this.myConfig.getDictData(obj);
                            }
                            this.myConfig.dictData = obj;
                        }
                    }
                    if (this.myConfig.sysDictData !== undefined) {
                        if (this.myConfig.dictData === undefined) {
                            this.myConfig.dictData = {};
                        }
                        this.myConfig.dictData = Object.assign({}, this.myConfig.sysDictData, this.myConfig.dictData);
                    }
                   
                    if(this.queryConfig.isTree) {
                        this.queryConfig.showTitle = false;
                    }
                } 
                if (this.myConfig.readOnly) {
                    this.color = 'default';
                } else {
                    this.color = this.myConfig.color;
                }
            },
            valueToFatherValue() {
                let para= {};
                para.value = [];
                if (this.data && this.data.length > 0) {
                    this.data.forEach(el => {
                        let temp  = this.$Method.copy(el);
                        delete temp.label;
                        delete temp.closable;
                        para.value.push(temp);
                    });
                }
                return para;
            },
            click(){
                let flag = true;
                if (!this.queryConfig.isTree) {
                    if (this.$refs.popView.$children.length > 0) {
                        if (this.$refs.popView.$children[0].customClear) {
                            this.$refs.popView.$children[0].customClear();
                        }
                        this.$refs.popView.clearData();
                    }
                }
                if (this.myConfig.readOnly) {
                    return;
                }
                if (this.myConfig.searchBefore) {
                    this.$refs['popView'].clearSearchBeforeSearchParam();
                    flag = this.myConfig.searchBefore(this,this.$refs['popView']);
                    if (flag) {
                        if (this.searchParam !== undefined) {
                            this.$refs['popView'].setSearchBeforeSearchParam(this.searchParam);
                        }
                    }
                }
                if (flag) {
                    if (this.config.selectkey) {
                        this.popShow = true;
                        if (this.myConfig.clearCondition) {
                            if (this.$refs['popView'].clearCondition) {
                                this.$refs['popView'].clearCondition();
                            }
                        }
                        if (this.queryConfig.manualLoad) {
                            this.$refs['popView'].refurbish();
                        } else {
                            this.$refs['popView'].setData([]);
                        }

                    }    
                }
            },
          
            closeTag (index) {
                let flag = true;
                let that = this;
                if (this.myConfig.onDelTag) {
                    let temp = {};
                    temp.delIndex = index;
                    temp.data = this.$Method.copy(this.data);
                    temp.control = that;
                    temp.name =  this.myConfig.name;
                    flag = this.myConfig.onDelTag(temp);
                }
                if (flag) {
                    if (index > -1) {
                        this.data.splice(index, 1);
                        this.setFatherValue();
                    }
                }
            },
            onSelectChange() {
                return this.$refs.myTreeBox.onSelectChange();
            },
            
            onToggleExpand() {
                return this.$refs.myTreeBox.onToggleExpand();
            },
            dbclick(e) {
                let temp = {};
                temp.action= 'condition_ok';
                temp.rows = [];
                temp.rows.push(e);
                this.conditionAction(temp);
            },
            ok() {
                let temp = {};
                temp.action= 'condition_ok';
                temp.rows = this.$refs.popView.getSelection();
                this.conditionAction(temp);
            },
            watchCustomFatherValue () {
                this.data = [];
                if (this.value && this.value.length > 0) {
                    this.value.forEach(el => {
                        let elx = this.$Method.copy(el);
                        if (this.config.setLabel) {
                            elx.label = this.config.setLabel(elx);
                        } else {
                            elx.label = '';
                        }
                        elx.closable = true;
                        this.data.push(elx);
                    });
                } 
            },

            setCustomPro(obj) {
                if (obj.readOnly !== undefined) {
                    let data = this.$Method.copy(this.data);
                    if (obj.readOnly) {
                        this.color = 'default';
                    } else {
                        this.color = this.myConfig.color;
                    }
                    data.forEach((el,index) => {
                        let temp = this.$Method.copy(el);
                        if (obj.readOnly === true) {
                            temp.closable = false;
                        } else {
                            temp.closable = true;
                        }
                        this.data.splice(index, 1,temp);
                    });
                    
                }
                return obj;
            },
            setFocus(value) {
                if (value) {
                    this.$refs.btn.$el.focus();
                } else {
                    this.$refs.btn.$el.blur();
                }
            }
        },
        mounted() {
            //this._setCustomWidth(this.clientWidth);
        },
        watch:{
            popShow:{
                handler(newValue)  {
                    if (this.config.onOpenChange) {
                        this.config.onOpenChange(newValue);
                    }
                },
                immediate: true
            }
        }
    };
</script>