<template> 
<div class="querybar" >
    <Row  type="flex" :gutter="0">
        <Col span='16'>
            <Row type="flex"  :gutter="0">
                <Col span='6' style="margin-right:12px">
                    <ControlBox  ref="field"  :config="fieldConfig"  ></ControlBox>
                </Col>
                <Col span='6' style="margin-right:20px">
                    <ControlBox  v-if="hackReset" ref="editors"  :config="editorsConfig"  ></ControlBox>
                </Col>
                <Col style="margin-right:10px">
                    <Button customIcon="iconfont icon-custom-search"  type="primary" @click="search" >查询</Button>
                </Col>
                <Col>
                    <Button  customIcon="iconfont icon-custom-reset"  @click="clear">重置</Button>
                </Col>
                <Col>
                    <Divider  type="vertical" class="dividercommon"/>
                </Col>
                <Col>
                    <Dropdown trigger="custom" :visible="filterSceneFlag" @on-click="filterAction" placement="bottom-start" @on-clickoutside="closeFilterScene">
                       <Badge  class-name="badgeclass" :count="sceneNum">
                        <ButtonGroup>
                            <Button  customIcon="iconfont icon-custom-filter"  @click="updataFilterScene">高级查询</Button>  
                            <Button  v-if="!filterSceneFlag && sceneFlag" icon="ios-arrow-down"  @click="openFilterScene"> </Button>
                            <Button  v-if="filterSceneFlag && sceneFlag" icon="ios-arrow-up"  @click="closeFilterScene"> </Button>
                        </ButtonGroup>
                        </Badge>
                         <template #list>
                        <DropdownMenu>
                            <DropdownItem v-for="(temp,index) in sceneData"  :selected="temp.scenename == selectedScence" :name="temp.scenename" :key="'scene_' + index">{{temp.scenename}}</DropdownItem>
                        </DropdownMenu>
                          </template>
                    </Dropdown>
                </Col>
            </Row>
        </Col>
        <Col span='8'>
        <Row type="flex" justify="end"  :gutter="0" >
            <Col style="padding-right:10px;">
                <Dropdown trigger="custom" :visible="btnFlag" @on-click="action" placement="bottom-start" @on-clickoutside="closeBtn">
                    <ButtonGroup>
                        <Button customIcon="iconfont icon-custom-add"   v-if="addDataBtnFlag"  @click="addData">新增</Button>   
                        <Button   v-if="!btnFlag && moreBtnFlag" icon="ios-arrow-down"  @click="openBtn"> </Button>
                        <Button   v-if="btnFlag && moreBtnFlag" icon="ios-arrow-up"  @click="closeBtn"> </Button>
                    </ButtonGroup>
                    <template #list>
                    <DropdownMenu>
                        <DropdownItem v-for="(item,index) in btnData" style="padding-left:0px;" :key="'btn_' + index">
                            <Button  :icon="item.icon" type="text" :customIcon="item.customIcon" @click="action(item.name)" >{{item.text}}</Button>
                        </DropdownItem>
                    </DropdownMenu>
                    </template>
                </Dropdown>
            </Col>
            <Col>
                <PromptMessages style="height:100%"/>
            </COl> 
        </Row>
        </Col>
    </Row>
    <div v-show="filterFlag" style="margin-top:20px">
        <BillConditionsBox ref="filter"  @doAction="doAction"  @conditionAction="conditionAction" :config="config" :dictData="dictData"/>
    </div>
</div>
</template>
<script>
    import PromptMessages from './promptmessage.vue';
    import BillConditionsBox from './billconditionsbox.vue';
    export default {
        name: 'mquerybar',
        components:{
            BillConditionsBox,PromptMessages
        },
        props:{
            config: {
                type: Object,
                default () {
                    return {};
                }
            },
            dictData: {
                type: Object,
                default:null
            },
            moduleMethod:{
                type:Array,
                default: () => {
                return [];      
            }
        }
        } ,
        data () {
            return {
                globalConfig:{
                },
                myConfig: {
                },
                conditionPrior:[],
                condition:[],
                dataType:{},
                hackReset:true,
                addDataBtnFlag:true,
                enablePermissions:false,
                showCondition:true,
                showHelpBtn:false,
                showbatchBtn:true,
                btnFlag:false,
                filterFlag:false,
                sceneFlag:true,
                filterSceneFlag:false,
                fieldConfig: {
                    name:'field',
                    type:'ComboBox',
                    codeWithName:false,
                    placeholder:'请选择',
                    valueChanged:this.fieldChanged
                },
                editorsConfig:{
                    name:'editors',
                    type:'TextBox',
                    readOnly:true
                },
                searchDictData:{},
                showModuleCode:false,
                selectedScence:'',
                sceneData:[],
                moreBtnFlag:false,
                btnData:[]
            };
        },
        created () {
            this.init();
        },
        computed:{
            sceneNum () {
                return this.sceneData.length;
            }
        },
        methods:{
            init () {
                //获取初期默认值
                this.myConfig = Object.assign({}, this.globalConfig, this.myConfig);
                //获取配置
                if (this.config) {
                    this.myConfig = Object.assign({}, this.myConfig, this.config);
                }
                //处理下拉框
                if (this.myConfig.items) {
                    this.myConfig.items.forEach(el => {
                        if (this.dictData) {
                            this.initDictkey(el);
                        }
                        if (el.vtype === 'datetime') {
                            delete el.vtype;
                        }
                    });
                }
                
                if (this.myConfig.btnData !== undefined) {
                    this.btnData = this.$Method.copy(this.myConfig.btnData);
                }

                this.btnData.forEach(el => {
                    if (el.icon && el.icon.startsWith('custom')) {
                        el.customIcon='iconfont icon-' + el.icon;
                        el.icon = null;
                    }
                });
                
                if (this.myConfig.sceneData !== undefined) {
                    this.sceneData = this.$Method.copy(this.myConfig.sceneData);
                }
                if (this.myConfig.enablePermissions  !== undefined) {
                    this.enablePermissions = this.myConfig.enablePermissions;
                }
                this.initField();
                this.fieldConfig.data = this.conditionPrior;
                if (this.dictData != null) {
                    this.searchDictData = this.$Method.copy(this.dictData);
                }
                if (this.myConfig.curHelpUrl) {
                    this.showHelpBtn = true;
                }
                if (this.myConfig.modulecode) {
                    this.showModuleCode = true;
                }
                this.searchDictData.FIELD =  this.condition;

                if (this.enablePermissions) {
                    let temp = this.moduleMethod.find(el => el.name === 'addData');
                    if (temp) {
                        this.addDataBtnFlag = true;
                    } else {
                        this.addDataBtnFlag = false;
                    }

                    let btnData = [];
                    this.moduleMethod.forEach(el => {
                        let t = this.btnData.find(el2 => el2.name === el.name);
                        if (t) {
                            btnData.push(t);
                        }
                    });
                    this.btnData = btnData;
                }
                if (this.btnData.length > 0) {
                    this.moreBtnFlag = true;
                } else {
                    this.moreBtnFlag = false;
                }

                if (this.sceneData.length > 0) {
                    this.sceneFlag = true;
                } else {
                    this.sceneFlag = false;
                }
                if (this.myConfig.sceneData) {
                    this.sceneData = JSON.parse(this.myConfig.sceneData);
                }
                if (this.addDataBtnFlag) {
                    if (this.myConfig.addDataflag !== 'Y') {
                        this.addDataBtnFlag = false;
                    }
                }
            },
            initDictkey(el) {
                if (el.children && el.children.length > 0) {
                    for (let i=0;i<el.children.length; i++) {
                        this.initDictkey(el.children[i]);
                    } 
                } else {
                    if (el.dictkey) {
                        if (el.data === undefined) {
                            let dictkey = el.dictkey;
                            if (el.customDictkey) {
                                dictkey = el.customDictkey;
                            }
                            el.data = this.dictData[dictkey];
                        }
                    }
                }
            },
            initField() {
                let condition = [];
                let datatype = {};
                let conditionPrior = [];
                if (this.myConfig.items) {
                    this.myConfig.items.forEach(el => {
                        this.initComnonField(el,condition,datatype,conditionPrior);
                    });
                }
                this.condition = condition;
                this.dataType = datatype;
                this.conditionPrior = conditionPrior;
            },
            initComnonField(el,condition,datatype,conditionPrior) {
                if (el.children && el.children.length > 0) {
                    for (let i=0;i<el.children.length; i++) {
                        this.initComnonField(el.children[i],condition,datatype,conditionPrior);
                    }
                } else {
                    if (el.condition || el.conditionPrior) {
                        let obj = {};
                        obj.code = el.name;
                        if (el.label) {
                            obj.name = el.label;
                        } else {
                            obj.name = el.name;
                        }
                        let tempObj = this.$Method.copy(el);
                        tempObj.readOnly = false;
                        tempObj.visible = true;
                        tempObj.defaultValue = '';
                        tempObj.required = false;
                        obj.config = tempObj;
                        datatype[obj.code] = tempObj;
                        condition.push(obj);
                        if (el.conditionPrior) {
                            conditionPrior.push(obj);
                        }
                    }
                }
            },
            clear() {
                this.customClear();
                let temp = {};
                temp.name = 'condition_clear';
                this.$emit('conditionAction',temp);
            },
            search() {
                let temp = {};
                temp.name = 'condition_search';
                temp.para = this.getQuerySearchParam();
                this.closeFilterScene();
                this.$emit('conditionAction',temp);
            },
            conditionAction(obj) {
                this.filterFlag = false;
                let data = this.$refs.filter.getData();
                this.updateScene(data.scenename,data);
                this.$emit('conditionAction',obj);
            },
            getQuerySearchParam() {
                if (this.customGetQuerySearchParam) {
                    return this.customGetQuerySearchParam();
                }
            },
            fieldChanged(e) {
                const index = this.conditionPrior.findIndex(el => el.code === e.value);
                if (index > -1) {
                    this.editorsConfig = Object.assign({},{},this.conditionPrior[index].config);
                } else {
                    this.editorsConfig = {
                        name:'editors',
                        type:'TextBox',
                        readOnly:true
                    };
                }
                this.hackReset = false;
                this.$nextTick(() =>{
                    this.hackReset = true;
                });
                
            },
            customClear () {
                this.$refs.field.setValue('');
                let e = {};
                e.value = '';
                this.fieldChanged(e);
            },
            customGetQuerySearchParam() {
                let searchParam = {};
                let obj = {};
                let el = {};
                el.field = this.$refs.field.getValue();
                el.editors = this.$refs.editors.getValue();
                el.calculator = '==';
                if (el.field && el.editors) {
                    if (this.dataType[el.field].calculator) {
                        el.calculator = this.dataType[el.field].calculator;
                    }
                    obj = this.getConditionValue(el.field,el.editors,el.calculator,this.dataType[el.field]);
                }
                let highObj = {};
                /*let highObj = this.$refs.searchgrid.getResultCondition();
                if (highObj['$and']) {
                    if (obj !== {}) {
                        highObj['$and'].push(obj);
                    }
                    searchParam = Object.assign({},{},highObj);
                } else {
                    searchParam = Object.assign({},obj,highObj);
                }*/
                searchParam = obj;
                return searchParam;
            },
            openHelp () {
                window.open(this.myConfig.curHelpUrl);
            },
            openBtn() {
                this.btnFlag = true;
                this.openBtnFlag = true;
            },
            closeBtn() {
                if (!this.openBtnFlag) {
                    this.btnFlag = false;
                } else {
                    this.openBtnFlag = false;
                }
            },
            openFilterScene() {
                this.filterSceneFlag = true;
                this.openFilterSceneFlag = true;
            },
            closeFilterScene() {
                if (!this.openFilterSceneFlag) {
                    this.filterSceneFlag = false;
                } else {
                    this.openFilterSceneFlag = false;
                }
            },
            doAction (obj) {
                if (obj.name == 'saveScene' || obj.name == 'delScene') {
                    if (obj.para.flag === 'I') {
                        let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
                        if (index > -1) {
                            this.alert('场景名称[' + obj.para.scenename + ']已存在,请检查');
                            return false;
                        }  else {
                            this.sceneData.push(obj.para);
                            
                        }
                    }
                    if (obj.para.flag === 'U') {
                        if (this.selectedScence !== obj.para.scenename) {
                            let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
                            if (index > -1) {
                                this.alert('场景名称[' + obj.para.scenename + ']已存在,请检查');
                                return false;
                            }
                        } else {
                            let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
                            if (index > -1) {
                                this.sceneData.splice(index,1,obj.para)
                            }
                        }
                    }
                    if (obj.para.flag === 'D') {
                          let index =  this.sceneData.findIndex(el => el.scenename === obj.para.scenename);
                          if (index > -1) {
                               this.sceneData.splice(index,1)
                          }
                          this.filterFlag = false;  
                    }
                    if (this.sceneData.length > 0) {
                        this.sceneFlag = true;
                    } else {
                        this.sceneFlag = false;
                    }
                    obj.para = this.$Method.copy(this.sceneData);
                    this.$emit('doAction', obj);
                } else if (obj.name == 'closeFilter') {
                    this.closeFilterScene();
                }
                else {
                    this.$emit('doAction', obj);
                }
            },
            action(name) {
                let para = {};
                para.name = name;
                this.$emit('doAction', para);
                this.btnFlag = false;
            },
            addData () {
                let para = {};
                para.name = 'addData';
                this.$emit('doAction', para);
            },
            filterAction(name) {
                let temp = this.sceneData.find(el => el.scenename === name);
                if (temp) {
                    this.selectedScence = temp.scenename;
                    this.$refs.filter.setData(temp);
                    this.$nextTick(() => {
                        this.filterFlag = true;
                        this.filterSceneFlag = false;
                    });
                }
            },
            updataFilterScene() {
                this.filterFlag = !this.filterFlag
                if (!this.selectedScence && this.filterFlag) {
                    this.$refs.filter.addScene();
                    this.selectedScence = false;
                }
                this.filterSceneFlag = false;
                this.btnFlag = false;
            },
            addScene (tmp) {
                this.sceneData.push(tmp);
                this.selectedScence = tmp.scenename;
            },
            updateScene(name,tmp) {
                let index = this.sceneData.findIndex(el => el.scenename === name);
                if (index > -1) {
                    this.sceneData.splice(index,1,tmp);
                    this.selectedScence = tmp.scenename;
                }
            },
            delScence(name) {
                let index = this.sceneData.findIndex(el => el.scenename === name);
                if (index > -1) {
                    this.sceneData.splice(index,1);
                    this.selectedScence ='';
                }
            },
           
        }
        
    };
</script>
<style lang="less" scoped>
        .dividercommon {
            margin:1px 12px 0 12px;
            height:32px;
        }
</style>
