<template>
    <Card  :padding="0" style="padding-left:20px;padding-right:20px" dis-hover>
        <p  @click="toggle" style="cursor:pointer;margin-top: 14px;margin-bottom:14px;" >
            <template v-if="!isAdd"> 
                <Row  type="flex" :gutter="0"  align="middle">
                    <Col span="18">
                        <Icon custom='iconfont icon-custom-pack' color="#f3b352" v-show="showForm" size="14" />
                        <Icon  v-show="!showForm" color="#f3b352" custom='iconfont icon-custom-spread' size="14"/> 
                       <span style="margin-left:16px;font-size: 14px;font-weight:bold" v-text="title" />
                    </Col>
                    <Col span="6"  v-show="showForm" >
                        <Row   type="flex" justify="end"  align="middle" :gutter="0">
                            <Col>
                                <Button  style="float:right" size="small"  customIcon="iconfont icon-custom-recallcard"  type="text"  :disabled="btnReadOnly" @click.stop="resetRow" >撤消</Button>
                            </Col>
                            <Col >
                                <Divider  type="vertical"  style="margin: 0 15px 0 15px;float:right"/>
                            </Col>
                            <Col>
                                <Button style="float:right" size="small" customIcon="iconfont icon-custom-delcard" type="text" :disabled="btnReadOnly" @click.stop="delBatchRow">删除</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>               
                <Divider  type="vertical"  style="margin: 0 15px 0 15px;float:right"/>
            </template>
             <template v-else> 
                 <Badge status="processing" text="新增项" />
             </template>
        </p>
        <Divider v-show="showForm" style="margin-top:0px;margin-bottom:10px;"/>
        <div  v-show="showForm" style="padding-left:10px">
            <Formcard ref="form" :key="myConfig.name" :config="myConfig" :dictData="dictData"   @doAction="doAction"/>
            <Divider v-show="showChildrenGrid" style="margin-bottom:10px;margin-top: 10px;"/>
            <EditGridCard v-show="showChildrenGrid" ref="grid"  :config="gridConfig" :dictData="dictData" >
                <template #header>
                <Row type="flex" justify="start"  align="middle" :gutter="0"  style="margin-bottom: 10px;display: flex;">
                    <Col v-if="showAddBtn">
                        <Button customIcon="iconfont icon-custom-rowadd"  type="text" size="small" :disabled="btnReadOnly" @click="addRow" >添加</Button>
                    </Col>
                    <Col v-if="showAddBtn && showDelBatchBtn">
                        <Divider  type="vertical"  style="margin: 0 15px 0 15px;height: 20px"/>
                    </Col>
                    <Col v-if="showDelBatchBtn">
                        <Button customIcon="iconfont icon-custom-rowdel" size="small" type="text" :disabled="btnReadOnly" @click="delRow">删除</Button>
                    </Col>
                    <Col class="col-align" v-if="showZoom" style="flex:1;text-align: right;">
                        <Button type="ghost" shape="circle" :customIcon="[isFull ? 'iconfont icon-custom-minimize' : 'iconfont icon-custom-fullscreen']" @click="setZoom"></Button>
                    </Col>
                </Row>
                </template>
            </EditGridCard>
            <Row v-if="isAdd" type="flex" justify="end" align="middle" style="margin-top: 10px;margin-bottom: 10px;" :gutter="16">
                <Col>
                    <Button  style="width:84px"  @click="cancel">取消</Button>
                </Col>
                <Col>
                    <Button style="width:84px" type="info" @click="save">确认</Button>
                </Col>
            </Row>
        </div>
    </Card>
</template>

<script>
import Formcard from './formcard.vue';
import EditGridCard from './editgridcard.vue';
export default {
    name:'mformdetail',
    components:{Formcard,EditGridCard},
    data () {
        return {
            editFlag:false,
            showChildrenGrid:false,
            gridConfig:{},
            myConfig:{},
            readOnly:false,
            btnReadOnly:false,
            showAddBtn:true,
            showDelBatchBtn:true,
            showForm:true,
            showZoom: false,
            isFull: false,
        };
    },
    props:{
        config:{
            type:Object,
            default:null
        },
        valueData:{
            type:Object,
            default () {
                return {};
            }
        },
        dictData: {
            type: Object,
            default:null
        },
        index:{
            type:String,
            default:''
        },
        curlIndex:{
            type:[String,Number],
            default:''
        },
        isAdd:{
            type:Boolean,
            default:false
        }
    },
    created () {
        this.init();
    },
    computed: {
        title() {
            let title = '标题';
            if (this.config.titleName) {
                if (this.valueData[this.config.titleName]) {
                    title = this.valueData[this.config.titleName];
                }
            }
            let titlePrefix = '#';
            if (this.config.titlePrefix) {
                titlePrefix = this.config.titlePrefix;
            }
            let resultTitle = titlePrefix + (Number(this.index)+1)  + '    ' + title;
            return resultTitle;
        }
    },
    methods:{
        init () {
            this.myConfig = Object.assign({},this.myConfig, this.config.formConfig);
            if (this.config.showEffectValue !== undefined) {
                 this.myConfig.showEffectValue = this.config.showEffectValue;
            }
            this.myConfig.modetype = '3';
            if (this.config.gridConfig !== undefined && this.config.gridConfig.items && this.config.gridConfig.items.length > 0) {
                Object.assign(this.gridConfig, this.config.gridConfig);
                this.gridConfig.showCheckBox = true;
                if (this.config.showEffectValue !== undefined) {
                    this.gridConfig.showEffectValue = this.config.showEffectValue;
                }
                this.gridConfig.modetype = '3';
                if (this.gridConfig.showAddBtn !== undefined) {
                    this.showAddBtn = this.gridConfig.showAddBtn;
                }
                if (this.gridConfig.showDelBatchBtn !== undefined) {
                    this.showDelBatchBtn = this.gridConfig.showDelBatchBtn;
                }
                if (this.gridConfig.showZoom !== undefined) {
                    this.showZoom = this.gridConfig.showZoom;
                }
                this.gridConfig.addRowBefore = this.addRowBefore;
                this.gridConfig.delRowBefore = this.delRowBefore;
                this.showChildrenGrid = true;
                if (this.gridConfig.height === undefined) {
                    this.gridConfig.height = 200;
                }
            } else {
                this.showChildrenGrid = false;
            }
        },
        toggle () {
          this.showForm = !this.showForm;
        },
        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.curlIndex = this.curlIndex;
            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.curlIndex = this.curlIndex;
            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.curlIndex = this.curlIndex;
            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.readOnly = value;
            this.btnReadOnly = 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);
        },
        setEffectData(data) {
            if (this.$refs.form) {
                this.$refs.form.setEffectData(data);
            }
            if (this.showChildrenGrid && this.$refs.grid) {
                let gridData = [];
                if (data[this.config.gridName]) {
                    gridData = data[this.config.gridName];
                }
                this.$refs.grid.setEffectData(gridData);
            }
        },
        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);
            }
        },
        setShowForm(value) {
            this.showForm = value;
        },
        setBtnReadOnly(value) {
            this.btnReadOnly = value;
        },
        addRow () {
            this.$refs.grid.addRow();
        },
        delRow() {
            this.$refs.grid.delBatchRow();
        },
        setShowZoom() {
           this.isFull = !this.isFull;
        },
        delBatchRow() {
            let obj = {};
            obj.name = 'delRowData'
            obj.para = {};
            obj.para.curlIndex = this.curlIndex;
            this.$emit('doAction', obj);
        },
        resetRow() {
            this.customSetData(this.valueData);
        },
        doAction(obj) {
            this.$emit('doAction', obj);
        }
    },
    mounted () {
        this.$nextTick(()=> {
            this.customSetData(this.valueData);
        });       
    }
};
</script>