<template>
    <Card :padding="0">
        <FormCardBox  ref="form" :config="myConfig" :dictData="dictData" >
            <template v-if="btnTypeValue === '1'" #btn>
            <a   v-if="!editFlag && !readOnly" href="#" @click.prevent="edit">编辑</a> 
            <a  style="margin-left: 10px;"  v-if="!editFlag && !readOnly"  href="#" @click.prevent="del">删除</a> 
            </template>
            <template v-else-if="btnTypeValue === '2'" #btn>
                <a  href="#" @click.prevent="del">删除</a> 
            </template>
            <template v-else #btn>
                <a   v-if="showBtn  && !btnReadOnly" href="#" @click.prevent="editStatic">编辑</a> 
                <span v-if="showBtn && btnReadOnly" >编辑 </span>
            </template>
        </FormCardBox>
        <div  v-if="showChildrenGrid">
            <EditGridCard  ref="grid" :config="gridConfig"  :dictData="dictData"></EditGridCard>
        </div>
        <Row v-if="btnTypeValue === '1' && editFlag" type="flex" justify="center" align="middle" style="margin-top: 10px;margin-bottom: 10px;" :gutter="16">
            <Col>
                 <Button  type="primary" @click="save">录入完成</Button>
                 <Button  style="margin-left: 20px;" @click="cancel">放弃</Button>
            </Col>
        </Row>
    </Card>
</template>

<script>
import FormCardBox from './formcardbox.vue';
export default {
    name:'formdetail',
    components:{
        FormCardBox
    },
    data () {
        return {
            editFlag:false,
            showChildrenGrid:false,
            girdFlag:false,
            gridConfig:{},
            myConfig:{},
            readOnly:false,
            showBtn:true,
            btnReadOnly:false,
            btnTypeValue:'1'
        };
    },
    props:{
        config:{
            type:Object,
            default:null
        },
        valueData:{
            type:Object,
            default () {
                return {};
            }
        },
        dictData: {
            type: Object,
            default:null
        },
        index:{
            type:String,
            default:''
        },
        isAdd:{
            type:Boolean,
            default:false
        },
        btnType:{
            type:String,
            default:'1'
        },
    },
    created () {
        this.init();
    },
    methods:{
        init () {
            if (this.isAdd) {
                this.editFlag = true;
            }
            this.myConfig = Object.assign({},this.myConfig, this.config.formConfig);
            this.myConfig.titleType = 2;
            this.myConfig.showBtn = false;
            this.myConfig.showSubSpecialStyle = true;
            if (this.config.gridConfig !== undefined && this.config.gridConfig.items && this.config.gridConfig.items.length > 0) {
                Object.assign(this.gridConfig, this.config.gridConfig);
                this.gridConfig.showDelRow = true;
                this.gridConfig.operFixedFlag = false;
                this.gridConfig.showCheckBox = false;
                this.gridConfig.showAddBtn = true;
                this.gridConfig.showTitle = false;
                this.gridConfig.addBtnType = '2';
                this.gridConfig.titleType = 2;
                this.gridConfig.addRowBefore = this.addRowBefore;
                this.gridConfig.delRowBefore = this.delRowBefore;
                this.gridConfig.tableSize = 'small';
                this.gridConfig.showBorder = false;
                //this.gridConfig.bordered = true;
                this.showChildrenGrid = true;
                if (this.gridConfig.height === undefined) {
                    this.gridConfig.height = 200;
                }
            } else {
                this.showChildrenGrid = false;
            }
            this.btnTypeValue = this.btnType;
            if (this.myConfig.btnType) {
                this.btnTypeValue = this.myConfig.btnType;
            }
        },
        addRowBefore(e) {
            if (this.config.gridConfig.addRowBefore) {
                e.form = this.$refs.form.getData();
                return this.config.gridConfig.addRowBefore(e);
            }
            return true;
        },
        delRowBefore(e) {
            if (this.config.gridConfig.delRowBefore) {
                e.form = this.$refs.form.getData();
                return this.config.gridConfig.delRowBefore(e);
            }
            return true; 
        },
        edit () {
            this.editFlag = true;
            if (this.$refs.form) {
                this.$refs.form.setFormReadOnly(false);
            }
            if (this.$refs.grid) {
                this.$refs.grid.setReadOnly(false);
            }
            let obj = {};
            obj.name = 'editForm';
            obj.para = {};
            obj.para.index = this.index;
            obj.para.formObject = this.$refs.form;
            obj.para.form = this.$refs.form.getData();
            if (this.$refs.grid) {
                obj.para.gridObject = this.$refs.grid;
            }
            this.$emit('doAction', obj);
        },
        del () {
            let obj = {};
            obj.name = 'delForm';
            obj.para = {};
            obj.para.index = this.index;
            this.$emit('doAction', obj);
        },
        checkValidate () {
            this.$refs.form.checkValidate();
            if (this.$refs.form.isError()) {
                return true;
            } else {
                return false;
            }
        },
        save () {
            this.$refs.form.checkValidate();
            if (this.$refs.form.isError()) {
                return false;
            }
            let obj = {};
            obj.name = 'saveForm';
            obj.para = {};
            obj.para.index = this.index;
            obj.para.data = this.$refs.form.getData();
            if (this.showChildrenGrid && this.$refs.grid) {
                if (this.$refs.grid.checkValidate()) {
                    return false;
                }
                obj.para.data[this.config.gridName] = this.$refs.grid.getChangeData();
                if (obj.para.data[this.config.gridName].length > 0 && obj.para.data.flag === undefined) {
                    obj.para.data.flag = 'U';
                }
            }
            if (!this.isAdd) {
                this.editFlag = false;
            }
            this.$emit('doAction', obj);
        },
        getChangeData () {
            let data = this.$refs.form.getData();
            if (data.flag === undefined) {
                data.flag = 'U';
            }
            if (this.showChildrenGrid && this.$refs.grid) {
                if (this.$refs.grid.checkValidate()) {
                    return false;
                }
                data[this.config.gridName] = this.$refs.grid.getChangeData();
                if (data[this.config.gridName].length > 0 && data.flag === undefined) {
                    data.flag = 'U';
                }
            }
            return data;
        },
        cancel () {
            if (!this.isAdd) {
                this.editFlag = false;
            }
            this.$refs.form.setData(this.valueData);
            this.$refs.form.setFormReadOnly(true);
            if (this.showChildrenGrid && this.$refs.grid) {
                this.$refs.grid.setReadOnly(true);
                this.$refs.grid.setData(this.valueData[this.config.gridName]);
            }
            let obj = {};
            obj.name = 'cancelForm';
            this.$emit('doAction', obj);
        },

        setReadOnly (value) {
            this.editFlag = !value;
            this.readOnly = value;
            this.$refs.form.setFormReadOnly(value);
            if (this.showChildrenGrid && this.$refs.grid) {
                this.$refs.grid.setReadOnly(value);
            }
        },
        clearData() {
            this.$refs.form.clearData();
            if (this.$refs.grid) {
                this.$refs.grid.clearData();
            }
        },
        isChange () {
            let flag = this.$refs.form.isChange();
            if (!flag) {
                if (this.showChildrenGrid && this.$refs.grid) {
                    flag = this.$refs.grid.isChange();
                }
            }
            return flag;
        },
        setFormReadOnly(value) {
            this.readOnly = value;
        },
        setData(data) {
            this.customSetData(data);
        }, 
        getData() {
            let data = this.$refs.form.getData();
            if (this.showChildrenGrid && this.$refs.grid && this.config.gridName) {
                data[this.config.gridName] = this.$refs.grid.getData();
            }
            return data;
        },
        customSetData(data) {
            if (this.$refs.form) {
                this.$refs.form.setData(data);
            }
            if (this.showChildrenGrid && this.$refs.grid) {
                let gridData = [];
                if (data[this.config.gridName]) {
                    gridData = data[this.config.gridName];
                }
                this.$refs.grid.setData(gridData);
            }
        },
        editStatic() {
            if (this.$parent && this.$parent.$parent && this.$parent.$parent.editDetails) {
                this.$parent.$parent.editDetails();
            }
        },
        setShowBtn(value) {
            this.showBtn = value;
        },
        setBtnReadOnly(value) {
            this.btnReadOnly = value;
        }
    },
    mounted () {
        this.$nextTick(()=> {
            this.customSetData(this.valueData);
        });
        if (this.btnType === '1') {
            if (this.isAdd) {
                this.setReadOnly(false);
            } else {
                this.setReadOnly(true);
            }
        } else if (this.btnType === '2') {
            this.setReadOnly(false);
        } else {
            this.setReadOnly(true);
        }
        
       
    }
};
</script>
<style lang="less">
    .head-title-2{
        padding: 7px 16px;
        background-color:#f8f8f9
    }
</style>
