<template> 
<div>
    <Row>
        <Col span='20'>
           <Row type="flex" justify="start" align="middle"> 
                  <Col span='24' style="padding-top:4px" >
                    <template v-if="!isConnector"> 
                        <FormBox ref="form" :config="form"  @inputValue="formChanged"/>
                    </template> 
                    <template v-else> 
                        <FormBox ref="form" :config="formConnector" @inputValue="formChanged"/>
                    </template> 
                </Col>
            </Row>
        </Col>
        <Col v-if='operflag' span='4'>
          <Row type="flex" justify="end" align="middle" style="padding-top:8px" > 
                <Button  size='small' type='default' icon="ios-add" style="margin-right:8px" @click="doAdd"></Button>
                <Button  size='small' type='default' icon="ios-remove"  @click="doDel"></Button>
         </Row>
        </Col>
    </Row>
</div>
</template>
<script>
    export default {
        name: 'conditionselector',
        data () {
            return {
                form:{
                    lineNum:12,
                    labelWidth:10,
                    showLabel:false,
                    items:[{
                        name:'field',
                        type:'ComboBox',
                        codeWithName:false,
                        valueChanged:this.fieldChanged,
                        colNum:3,
                       // size:'small',
                        isFull:true
                    },{
                        name:'oper',
                        type:'ComboBox',
                        codeWithName:false,
                        clearable:false,
                        //size:'small',
                        colNum:2,
                        data:[{
                            name: '等于',
                            code: '=='
                        }],
                        defaultValue:'==',
                        isFull:true
                    },{
                        name:'value',
                        type:'TextBox',
                        //size:'small',
                        readOnly:true,
                        colNum:3,
                        isFull:true
                    }]
                },
                formConnector:{
                    lineNum:8,
                    labelWidth:30,
                    showLabel:false,
                    items:[{
                        name:'connector',
                        type:'ComboBox',
                        codeWithName:false,
                        //size:'small',
                        colNum:2,
                        data:[{'code':'$or','name':'或'}, {'code':'$and','name':'且'}],
                        defaultValue:'$and',
                        style:{
                            'min-width':'50px'
                        },
                        clearable:false
                    }]
                },
                dataType:{}
            };
        },
        created () {
            this.init();
        },
        props:{
            config: {
                type: Object,
                default () {
                    return {};
                }
            },
            setOperData: {
                type: Function
            },
            operflag:{
                type:Boolean,
                default:true
            },
            isConnector:{
                type:Boolean,
                default:true
            },
            valueData: {
                type: Object,
                default () {
                    return {};
                }
            }
        } ,
        mounted () {  
            if (!this.isConnector) {
                if (this.valueData.field){
                    this.fieldChanged({value:this.valueData.field});
                } 
            }
            this.$nextTick(() => {
                this.$refs.form.setData(this.valueData);
            });
        },
        methods:{
            formChanged(){
                let form = this.$refs.form.getData();
                this.$emit('inputValue', form);   
            },
            init() {
                if (!this.isConnector) {
                    this.initField();
                }
            },
            initField () {
                let fieldData = [];
                if (this.config.items && this.config.items.length > 0) {
                    this.config.items.forEach(el => {
                        if (el.name && el.label) {
                            fieldData.push({code:el.name,name:el.label});
                            this.dataType[el.name] = Object.assign({},el, {name:'value'});
                            this.dataType[el.name].operData = this.getOperData(el);
                        }
                    });
                }
                this.form.items[0].data = fieldData;

            },
            getOperData(el) {
                let tempData = [];
                tempData.push({
                    name: '等于',
                    code: '=='
                });
                if (el.type === 'DateBox' || el.type === 'NumberBox') {
                    tempData.push({
                        name: '不小于',
                        code: '>='
                    });
                    tempData.push({
                        name: '不大于',
                        code: '<='
                    });
                    tempData.push({
                        name: '不等于',
                        code: '<>'
                    });
                } 
                if (el.type === 'TextBox') {
                    tempData.push({
                        name: '不等于',
                        code: '<>'
                    });
                    tempData.push({
                        name: '包含',
                        code: 'LIKE'
                    });
                } 
                if (this.setOperData) {
                    tempData =  this.setOperData(el, tempData);
                }
                return tempData; 
            },
            fieldChanged(e) {
                let self = this;
                let operValue = '==';
                let obj = [];
                let oper = {};
                oper.name = 'oper';
                if (e.value) {
                    let config = Object.assign({},this.dataType[e.value]);
                    oper.data = this.$Method.copy(config.operData);
                    oper.readOnly = false;
                    obj.push(oper);
                    config.name ='value'; 
                    config.label = '';
                    config.readOnly = false;
                    config.visible = true;
                    config.valueChanged = '';
                    obj.push(config);
                    if (config.operDefaultValue) {
                        operValue = config.operDefaultValue;
                    }
                } else {
                    oper.data = [{
                        name: '等于',
                        code: '=='
                    }];
                    oper.readOnly = true;
                    obj.push(oper);
                    let valueConfig = {
                        name:'value',
                        type:'TextBox',
                        readOnly:true,
                        colNum:3,
                        isFull:true
                    };
                    obj.push(valueConfig);
                }
                self.$refs.form.updateItemsConfig(obj);
                self.$nextTick(() => {
                    self.$refs.form.setValue('oper',operValue); 
                    self.$refs.form.setValue('value',''); 
                });
                return true;
            },
            doAdd (){
                let obj = {};
                obj.name = 'doAdd';
                this.$emit('doAction', obj);
            },
            doDel (){
                let obj = {};
                obj.name = 'doDel';
                this.$emit('doAction', obj);
            }
        }
    };
</script>
