<template> 
<div  :style="style">
    <Form ref="form" :model="form" :rules="formRules" :label-width="myConfig.labelWidth" :inline="myConfig.inline" :id="myConfig.name" @keydown.enter.prevent ="keyDownEvent">
        <Row type="flex" justify="start">
            <Col v-for="(item,index) in items"  :key="'form_' + index" :span="initFormItemCol(index)" v-show="item.visible !== false" :style="{height:item.height}" >
                <FormItem  :label="item.label" :prop="item.name||item.sname"  style="width: 100%;" :show-message="false">
                    <template #label>
                    <span v-if="item.required === true" style="color:#348eed;">{{item.label}}</span>
                    <span v-else>{{item.label}}</span>
                    </template>
                    <div @click="EditCell(item)" style="width: 100%;height:100%" >
                        <ControlBox v-if="editKey=== item.name"   :config="item"  :valueData="form"  @inputValue="input" style="width:100%" :editIndex="editIndex" ></ControlBox>
                        <ShowText v-else style="display:inline-block;height:32px;line-height:32px" :label="formatValue(form[item.name],form,item)" contentAlign="left" ></ShowText>
                    </div>
                </FormItem>
            </Col>
        </Row>
    </Form>
</div>
</template>
<script>
    import Base from '@/components/form/baseform.vue';
    export default {
        extends: Base,
        data (){
            return {
                editIndex: -1,
                editKey:''
            };
        },
        created () {
            this.init();
        },
        props: {
            valueData: {
                type: Object,
                default () {
                    return {};
                }
            },
            vstyle:{
                type:String,
                default:''
            },
            showRowAction:{
                type: Boolean,
                default:false
            }
        },
        methods:{
            customInit() {
                this.form = Object.assign({},this.form,this.valueData);
                this.style = this.vstyle;
            },
            keyDownEvent() {
                this.cancelCellEditing();
            },
            formatValue(value , row, column) {
                return this.$Method.formatValue(value ,row, column);
            },

            EditCell(config) {
                if (config.readOnly) {
                    this.editKey = '';
                    this.cancelCellEditing();
                    return;
                }
                if (this.showRowAction) {
                    this.cancelCellEditing();
                    return;
                }
                if (this.editKey === config.name) {
                    return;
                } 
                if (this.config.cellbeginedit) {
                    let rowinfo = {};
                    rowinfo.index = this.editIndex;
                    rowinfo.column = config;
                    rowinfo.row = this.valueData;
                    if (this.config.cellbeginedit) {
                        if (!this.config.cellbeginedit(rowinfo)) {
                            this.cancelCellEditing();
                            return;
                        } else {
                            this.editKey = config.name;
                        }
                    }
                } else {
                    this.editKey = config.name;
                }  
            },
            addRowInfo(obj,column) {
                obj.rowinfo = {};
                obj.rowinfo.column = column;
                obj.rowinfo.index = this.editIndex;
                obj.rowinfo.row = this.valueData;
                obj.rowinfo.gridObject = this.config.getGridObject();
                obj.rowinfo.formObject = this;
            },
            valueChanged(obj) {
                const column = this.config.items.find(el => {return el.name === obj.name;});
                this.addRowInfo(obj,column);
                return column.valueChanged(obj);
            },
            searchBefore(obj) {
                const column = this.config.items.find(el => {return el.name === obj.config.name;});
                this.addRowInfo(obj,column);
                return column.searchBefore(obj);
            },
            setDataBefore(obj,that) {
                const column = this.config.items.find(el => {return el.name === that.myConfig.name;}) ;
                let temp = {};
                temp.data = obj;
                this.addRowInfo(temp,column);
                return column.setDataBefore(temp, that);
            },
            setEditIndex(value) {
                this.editIndex = value;
            },
            getEditIndex() {
                return this.editIndex;
            },
            cancelCellEditing() {
                this.editKey = ''; 
            }
        },
        watch:{
            valueData: {
                handler(data) {
                    this.form = Object.assign({},this.form,data);
                },
                deep: true,
                immediate: true,
            }
        }
    };
</script>
