<template>
<Card  :padding="0" style="padding:14px 16px;" dis-hover>
    <Row type="flex" justify="start" align="middle" style="max-height:120px;overflow-y:auto;overflow-x:hidden" >
        <Col v-for="temp in data" :key="temp.index" span="12">
            <BillConditionBox v-if="reset" :config="myConfig" :ref="temp.index" :curIndex="temp.index" :valueData="temp.form" @doAction="doAction" @inputValue="input"/>
        </Col>
    </Row>
    <Row type="flex" justify="start" align="middle">
        <Col span="24"  style="margin-bottom:14px">
            <p     @click.stop="doAdd" style="cursor:pointer">
                <Row type="flex" justify="start" align="middle">
                    <Col>
                        <Icon custom="iconfont icon-custom-addcond"   size="20" color="#AF292E"/>
                    </Col>
                    <Col>
                        <span style="margin-left:18px;color:#AF292E;font-size:14px"> 添加条件 </span>
                    </Col>
                </Row>
            </p>
        </Col>
    </Row>
    <Row type="flex" justify="start" align="middle">
        <Col style="margin-right:10px">
            <Button  type="primary"  @click="searchFilter" >筛选</Button>
        </Col>
        <Col >
            <Button   @click="clearData" >清空筛选值</Button>
        </Col>
        <Col>
            <Divider  type="vertical" class="dividercommon" />
        </Col>
        <Col v-if="!delSceneFlag" >
            <Checkbox v-model="saveSceneFlag"><span style="margin-left: 10px;">保存场景</span></Checkbox>
        </Col>
        <Col v-if="saveSceneFlag || delSceneFlag"  style="margin-right:14px">
            <Input  v-model="scenename"  placeholder="请输入场景名称" style="width: 456px" />
        </Col>
        <Col v-if="saveSceneFlag || delSceneFlag" >
            <Button type="info" @click="saveScene" >保存</Button>
        </Col>
        <Col v-if="delSceneFlag">
            <Divider  type="vertical" class="dividercommon"/>
        </Col>
        <Col v-if="delSceneFlag" >
            <Button @click="delScene" >删除场景</Button>
        </Col>
         <Col v-if="delSceneFlag">
            <Divider  type="vertical" class="dividercommon"/>
        </Col>
        <Col v-if="delSceneFlag">
            <Button @click="addScene">新增</Button>
        </Col>
    </Row>
</Card>
</template>

<script>
import BillConditionBox from './billconditionbox';
export default {
    name:'mbillconditionsbox',
    components: {BillConditionBox},
    data () {
        return {
            saveSceneFlag:false,
            delSceneFlag:false,
            scenename:'',
            reset:true,
            data:[],
            oldForm:{},
            selectorConfig:{}
        };
    },
    props:{
        config: {
            type: Object,
            default () {
                return {};
            }
        },
        dictData: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    created() {
        this.init();
    },
    methods:{
        init () {
            this.curlModeType = this.modeType;
            this.myConfig = Object.assign({}, this.myConfig, this.config);
            if (this.dictData && this.myConfig.items) {
                this.myConfig.items.forEach(el => {
                    if (el.dictkey) {
                        if (el.data === undefined) {
                            let dictkey = el.dictkey;
                            if (el.customDictkey) {
                                dictkey = el.customDictkey;
                            }
                            if (this.dictData[dictkey]) {
                                el.data = this.dictData[dictkey];
                            }
                        }
                    }
                });
            }
            this.initData();
        },
        doAction(obj) {
            if (obj.name === 'doDel') {
                let index = this.data.findIndex(el => el.index === obj.index);
                if (index > -1) {
                    this.data.splice(index ,1);
                    this.$nextTick(() => {
                        if (this.data.length === 0) {
                            let obj = {};
                            obj.index ='index_0';
                            obj.form = {};
                            this.data.push(obj); 
                        }
                    });
                }
            }
        },
        input(e) {
            let index = this.data.findIndex(el => el.index === e.index);
            if (index > -1) {
                let obj = Object.assign({},this.data[index],{form:e.form});
                this.data.splice(index,1,obj);
            }
        },
        doAdd() {
            let num = this.data.length;
            let index = 'index_' + num;
            do {
                let tempIndex = this.data.findIndex(el => el.index === index);
                if (tempIndex > -1) {
                    num++;
                    index = 'index_' + num;
                } else {
                    let obj = {};
                    obj.index = index;
                    obj.form ={};
                    this.data.push(obj);
                    break;
                }
            } while (true);
        },
        initData() {
            this.data = [];
            let obj = {};
            obj.index ='index_0';
            obj.form = {};
            this.data.push(obj); 
        },
        clearData() {
            this.data = [];
            this.$nextTick(() => {
                this.initData();
            });
        },
        getCommomParam (obj, para) {
            let param = {};
            let config = this.myConfig.items.find(el => el.name === obj.field);
            if (config) {
                if (config.type === 'DateBox') {
                    if (!config.vtype || config.vtype === 'date') {
                        if (obj.oper === '==') {
                            let temp = {};
                            temp[obj.field] ={};
                            temp[obj.field]['>='] = obj.value +' 00:00:00';
                            let temp2 = {};
                            temp2[obj.field] ={};
                            temp2[obj.field]['<='] = obj.value +' 23:59:59';
                            let temp3 = {};
                            temp3['$and'] = [];
                            temp3['$and'].push(temp);
                            temp3['$and'].push(temp2);
                            if (para) {
                                para.push(temp3);
                            } else {
                                Object.assign(param,temp3);
                            }
                        } else if (obj.oper === '>' || obj.oper === '>=') {
                            param[obj.field] = {};
                            if (obj.oper === '>=') {
                                param[obj.field][obj.oper] =  obj.value + ' 00:00:00';
                            } else {
                                param[obj.field][obj.oper] =  obj.value + ' 23:59:59';
                            }
                        } else if  (obj.oper === '<' || obj.oper === '<='){
                            param[obj.field] = {};
                            if (obj.oper === '<=') {
                                param[obj.field][obj.oper] =  obj.value + ' 23:59:59';
                            } else {
                                param[obj.field][obj.oper] =  obj.value + ' 00:00:00';
                            }
                        } else if (obj.oper === '<>'){
                            let temp = {};
                            temp[obj.field] ={};
                            temp[obj.field]['<'] = obj.value +' 00:00:00';
                            let temp2 = {};
                            temp2[obj.field] ={};
                            temp2[obj.field]['>'] = obj.value +' 23:59:59';
                            let temp3 = {};
                            temp3['$or'] = [];
                            temp3['$or'].push(temp);
                            temp3['$or'].push(temp2);
                            if (para) {
                                para.push(temp3);
                            } else {
                                Object.assign(param,temp3);
                            }
                        }
                    } else {  
                        param[obj.field] = {};
                        if (obj.value.value !== undefined) {
                            param[obj.field][obj.oper] = obj.value.value; 
                        } else {
                            param[obj.field][obj.oper] = obj.value; 
                        }
                    }
                } else {
                    if (obj.oper === 'LIKE') {
                        param[obj.field] = {};
                        param[obj.field][obj.oper] = '%' + obj.value + '%';
                    } else  {
                        param[obj.field] = {};
                        if (obj.value.value !== undefined) {
                            param[obj.field][obj.oper] = obj.value.value; 
                        } else {
                            param[obj.field][obj.oper] = obj.value; 
                        }
                    } 
                }
                
            }
            
            if (para === undefined) {
                return param;
            } else {
                para.push(param);
            }
           
        },
        getQuerySearchParam () {
            if (this.data.length  === 0) {
                return {};
            }
            if (this.data.length  === 1) {
                if (this.data[0].form.value  || this.data[0].form.value === 0) {
                    return this.getCommomParam(this.data[0].form);
                } else {
                    return {};
                }
            }
            if (this.data.length > 1) {
                let obj = {};
                let paraOr = [];
                let paraAnd = [];
                this.data.forEach(el => {
                    if (el.form.value || el.form.value === 0) {
                        if (el.form.relevance === 'or') {
                            this.getCommomParam(el.form, paraOr);
                        }
                        if (el.form.relevance === 'and') {
                            this.getCommomParam(el.form, paraAnd);
                        }
                        
                    }
                });
                if (paraOr.length > 0) {
                    obj['$or'] = paraOr;
                }
                if (paraAnd.length > 0) {
                    obj['$and'] = paraAnd;
                }
                let result = {};
                if (paraOr.length > 0 || paraAnd.length > 0) {
                    result['$and'] = [];
                    result['$and'].push(obj);
                }
                return result;
            }
        },
        getData() {
            let tmp = {};
            tmp.scenename = this.scenename;
            tmp.data = JSON.stringify(this.$Method.copy(this.data));
            let result = Object.assign({},this.oldForm,tmp);
            return result;
        },
        setData(obj) {
            this.data = [];
            this.scenename = '';
            if (obj.data) {
                 this.data = JSON.parse(obj.data);
            }
            if (obj.scenename) {
                this.scenename = obj.scenename;
            }
            this.oldForm = this.$Method.copy(obj);
            this.delSceneFlag = true;
            this.reset = false;
            this.$nextTick(() => {
                this.reset = true;
            })
        },
        searchFilter() {
            let temp = {};
            temp.name = 'condition_searchFilter';
            temp.para = this.getQuerySearchParam();
            this.$emit('conditionAction',temp);
        },
        closeFilter (){
            let temp = {};
            temp.name = 'condition_closeFilter';
            this.$emit('conditionAction',temp);
        },
        addScene () {
            this.delSceneFlag = false;
            this.saveSceneFlag = false;
            this.oldForm = {};
            this.initData();
            this.reset = false;
            this.$nextTick(() => {
                this.reset = true;
            });
        },
        saveScene() {
            let temp = {};
            temp.name = 'saveScene';
            temp.para = Object.assign({},this.oldForm,this.getData());
            if (this.delSceneFlag) {
                temp.para.flag = 'U';
            } else {
                temp.para.flag = 'I';
            }
            this.$emit('doAction',temp);
            this.$nextTick(() => {
                if (!this.delSceneFlag) {
                    this.delSceneFlag = true;
                }
            });
        },
        delScene() {
            let temp = {};
            temp.name = 'saveScene';
            temp.para = Object.assign({},this.oldForm,this.getData());
            temp.para.flag ='D';
            this.$emit('doAction',temp);
        }
    }
};
</script>

<style lang="less" scoped>
.masterplate {
    .querybar {
         .ivu-input {
            height:40px;
         }
         .ivu-select-single {
            .ivu-select-selection {
                height: 40px;
                position: relative;
            }
         }
         
         .ivu-btn {
             height:40px;
         }
        .ivu-btn-red {
            color: #fff;
            background-color: #AF292E;
        }
        .ivu-btn-red:hover {
            background-color: #FFB5B8;
            border-color: #FFB5B8;
        }
        .ivu-btn-red :focus {
            background-color: #7A2531;
            border-color: #7A2531;
        }
        .ivu-btn-black {
            color: #fff;
            background-color: #4D4E53;
        }

        .ivu-btn-black:hover {
              background-color: #CDD0D6;
              border-color: #CDD0D6;;
         }
         .ivu-btn-black:focus {
              background-color: #000000;
              border-color: #000000;;
         }
         .ivu-btn-default:hover {
               color: #EF6E73;
              background-color: #FFF9F9;
              border-color: #EF6E73;;
         }
        .ivu-btn-default:focus {
             color: #DF3D43;
            background-color: #FFF9F9;
            border-color: #DF3D43;
        }
        .modulecodetext {
            height:40px;
            text-align:center;
            vertical-align: middle;
            background-color: #F5F7FA;
            line-height: 40px;
            padding: 0 15px;
        }
        .dividercommon {
            margin:1px 12px 0 12px;
            height:32px;
        }
    }
 
}


</style>
