<template>
<Card :padding="0"  style="background:#eee;" :bordered="myConfig.bordered" :dis-hover="myConfig.disHover" :class="cardClass" >
    <template  v-if="showTitle"  #title>
    <p :style="pStyle" @click="toggle" >
        <span :class="titleClass" v-text="myConfig.title" /><Icon v-if="myConfig.hide" class="efuture-title-icon" :style="iconStyle" type='ios-arrow-forward'/>
    </p>
    </template>
     <template  #extra>
        <a  v-if="myConfig.showBtn && editFlag" href="#" @click.prevent="editForm">{{myConfig.editBtnText}} </a> 
        <a  v-if="myConfig.showBtn && !editFlag"  style="margin-left: 10px;" href="#" @click.prevent="saveForm">{{myConfig.saveBtnText}} </a> 
     </template>
    <div v-show="showForm" style="padding:0px">
         <FormCardBox v-for="(item) in myConfig.items"  :ref="item.name" :key="item.name" :config="item" :dictData="dictData" style="margin-bottom: 10px;"  @doAction="doAction"/>
    </div>
</Card>  
</template>

<script>
import FormCardBox from './formcardbox.vue';
export default {
    name:'formcardgroupbox',
    components:{
        FormCardBox
    },
    data () {
        return {
            myConfig:{
                title:'',
                titleType:1,
                hide:true,
                showBtn:true,
                editBtnText:'编辑',
                saveBtnText:'保存',
            },
            showForm:true,
            editFlag:false,
            showTitle:false,
            iconStyle:'',
            pStyle:''
        };
    },
    created () {
        this.init();
    },
    props:{
        config: {
            type:Object,
            default:null
        },
        dictData: {
            type: Object,
            default:null
        }
    },
    computed: {
        titleClass () {
            return `efuture-title-font-${this.myConfig.titleType}`;
        },
        cardClass() {
             if (this.myConfig.showSubSpecialStyle) {
                return (`efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title ' +  `efuture-card-extra-title-${this.myConfig.titleType}`);
            } else {
                if (!this.showForm) {
                    return ( `efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title-nobottom ' +  `efuture-card-extra-title-${this.myConfig.titleType}`);
                } else {
                    return `efuture-card-head-title-${this.myConfig.titleType}` + ` efuture-card-extra-title-${this.myConfig.titleType}`;
                }
            }
        }
    },
    methods:{
        init (){
            this.myConfig = Object.assign({},this.myConfig,this.config);
            if (this.myConfig.items) {
                this.myConfig.items.forEach((el, index) => {
                    if (el.showBtn === undefined) {
                        el.showBtn = false;
                    }
                    el.titleType = 2;
                    if (!el.name) {
                        el.name = 'form_' + index;
                    }
                });
            }
            if (this.myConfig.title) {
                this.showTitle = true;
            }
            if (this.myConfig.hide) {
                this.pStyle = 'cursor:pointer;#e3e5e8';
                this.iconStyle = 'transform: rotate(90deg)';
            }    
        },
        toggle () {
            if (this.myConfig.hide) {
                this.showForm = !this.showForm;
                this.setTitleStyle();
            }
        },
        setShowForm(value) {
            this.showForm = value;
            this.setTitleStyle();
        },
        editForm () {
            this.editFlag = false;
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].setFormReadOnly(false);
                }
            });
            let obj = {};
            obj.name = 'editForm';
            this.$emit('doAction', obj);
        },
        saveForm () {
            let flag = false;
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].checkValidate();
                    if (this.$refs[el.name][0].errorFlag) {
                        flag = true;
                    }
                }
            });
            if (!flag) {
                this.editFlag = true;
                this.myConfig.items.forEach(el => {
                    if (this.$refs[el.name] && this.$refs[el.name][0]) {
                        this.$refs[el.name][0].setFormReadOnly(true);
                    }
                });
                let obj = {};
                obj.name = 'editForm';
                obj.para = this.getData();
                this.$emit('doAction', obj);
            }
        },
        getData () {
            let obj = {};
            this.myConfig.items.forEach((el,index) => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    if (index === 0) {
                        Object.assign(obj, this.$refs[el.name][0].getData());
                    } else {
                        let data = this.$refs[el.name][0].getData();
                        if (el.items) {
                            el.items.forEach(el2 => {
                                if (el2.name) {
                                    obj[el2.name] = data[el2.name];
                                }
                                if (el2.sname) {
                                    obj[el2.sname] = data[el2.sname];
                                }
                                if (el2.ename) {
                                    obj[el2.ename] = data[el2.ename];
                                }
                                if (el2.textName) {
                                    obj[el2.textName] = data[el2.textName];
                                }
                            });
                        } 
                    }
                }
            });
            return obj;

        },
        setData (data) {
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].setData(data);
                }
            });
        },
        setTitleStyle () {
            if (this.showForm) {
                this.iconStyle = 'transform: rotate(90deg)';
            } else {
                this.iconStyle = '';
            }
        },
        isChange () {
            let flag = false;
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    if (!flag) {
                        flag = this.$refs[el.name][0].isChange();
                    }
                   
                }
            });
            return flag;
        },
        getForm(name) {
            if (this.$refs[name] && this.$refs[name][0]) {
                return this.$refs[name][0];
            } else {
                return null;
            }
        },
        clearData () {
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].clearData();
                   
                }
            });
        },
        setFormReadOnly (value) {
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].setFormReadOnly(value);
                   
                }
            });
        },
        checkValidate() {
            let flag = false;
            this.editFlag = false;
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].checkValidate();
                    flag = this.$refs[el.name][0].isError();
                    if (flag) {
                        this.editFlag = true;
                    }
                }
            });
        },
        setBtnReadOnly(value) {
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].setBtnReadOnly(value);
                }
            });
        },  
        doAction(obj) {
            this.$emit('doAction', obj);
        },
        isError() {
            return this.editFlag;
        },
        setShowBtn(value) {
            this.myConfig.items.forEach(el => {
                if (this.$refs[el.name] && this.$refs[el.name][0]) {
                    this.$refs[el.name][0].setShowBtn(value); 
                }
            });
        }
    }

};
</script>