<template>
    <Card :bordered="false" :padding="0" dis-hover>
        <p v-if="showTitle" @click="toggle" style="cursor:pointer;">
            <Row type="flex" justify="start" align="middle" style="margin-top:14px;margin-bottom:14px">
                <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:10px;font-size: 14px;font-weight:bold" v-text="myConfig.title"/>
            </Row>
        </p>
        <Divider v-if="showTitle" style="margin-top:0px;margin-bottom:10px;margin-left:24px;"/>
        <div v-show="showForm" :style="myConfig.divStyle">
            <Form
                ref="form"
                :model="form"
                :rules="formRules"
                :label-position="myConfig.labelPosition"
                :label-width="myConfig.labelWidth"
                :inline="myConfig.inline"
                :id="myConfig.name"
                @submit.enter.prevent
            >
                <Row type="flex" justify="start">
                    <template  v-for="(item,index) in items" :key="'form_' + index">
                        <Col
                            v-if="item.status"
                            :span="initFormItemCol(index)"
                            v-show="item.visible !== false"
                        >
                            <FormItem
                                v-if="item.type !== 'Divider' && item.status && item.visible !== false"
                                :label="item.label"
                                :prop="item.name||item.sname"
                                :style="getFormItemStyle(item)"
                                :show-message="false"
                            >
                                <ControlBox
                                    :ref="item.name||item.sname"
                                    :valueData="form"
                                    :config="item"
                                    @inputValue="input"
                                    @doAction="doAction"
                                ></ControlBox>
                            </FormItem>
                            <ControlBox v-if="item.type === 'Divider'" :ref="item.dividerName"  :config="item"></ControlBox>
                        </Col>
                    </template>
                </Row>
            </Form>
        </div>
    </Card>
</template>
<script>
import Base from './baseform.vue';
export default {
    name: 'FormCardBox',
    extends: Base,
    data() {
        return {
            myConfig: {
                hide: true,
                titleType: 1,
                editBtnText: '编辑',
                saveBtnText: '保存',
                cancelBtnText: '放弃',
                showBtn: true,
                bordered: true,
                disHover: false,
                showSubSpecialStyle: false,
                divStyle: 'padding:0px 0px 0px 24px',
            },
            btnReadOnly: false,
            showBtn: true,
            showForm: true,
            showTitle: true,
            editFlag: false,
            saveFlag: false,
            cancelFlag: false,
            pStyle: '',
            iconStyle: '',
        };
    },
    created() {
        this.init();
    },
    computed: {
        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}`;
                }
            }
        },
        titleClass() {
            return `efuture-title-font-${this.myConfig.titleType}`;
        },
    },
    methods: {

        customInit() {
            if (this.myConfig.hide) {
                this.pStyle = 'cursor:pointer';
                this.iconStyle = 'transform: rotate(90deg)';
            }
            if (!this.myConfig.title) {
                if (this.myConfig.titleType !== 1) {
                    this.showTitle = true;
                } else {
                    this.showTitle = false;
                }
            }

            if (this.myConfig.readOnly !== undefined) {
                this.readOnly = this.myConfig.readOnly;
            }
            if (this.myConfig.titleType !== 1) {
                if (this.config.hide === undefined) {
                    this.myConfig.hide = false;
                }
                if (this.config.bordered === undefined) {
                    this.myConfig.bordered = false;
                }
                if (this.config.disHover === undefined) {
                    this.myConfig.disHover = true;
                }
            }
            this.showBtn = this.myConfig.showBtn;
            if (this.myConfig.cancelBtn !== undefined) {
                this.cancelFlag = this.myConfig.cancelBtn;
            }
     // let _this = this;
     // document.addEventListener("keydown", _this.watchEnter);
        },
        setFormReadOnly(value) {
            this.editFlag = value;
            if (!this.myConfig.items || this.myConfig.items.length === 0) {
                return false;
            }
            let self = this;
            this.myConfig.items.forEach(el => {
                let name = '';
                if (el.name) {
                    name = el.name;
                } else if (el.sname) {
                    name = el.sname;
                }
                if (!value) {
                    if (this.myConfig.cellbeginedit) {
                        let obj = {};
                        obj.name = name;
                        obj.form = this.$Method.copy(this.form);
                        obj.formObject = self;
                        let flag = this.myConfig.cellbeginedit(obj);
                        if (flag) {
                            this.setReadOnly(name, value);
                        } else {
                            this.setReadOnly(name, !value);
                        }
                    } else {
                        this.setReadOnly(name, value);
                    }
                } else {
                    this.setReadOnly(name, value);
                }
            });
        },
        editForm() {
            let flag = true;
            if (this.myConfig.editObjectBefore) {
                flag = this.myConfig.editObjectBefore(this.myConfig.name);
            }
            if (flag) {
                this.setFormReadOnly(false);
                let obj = {};
                obj.name = 'editForm';
                obj.formname = this.myConfig.name;
                this.$emit('doAction', obj);
            }
        },
        cancelForm() {
            this.setData(this.oldForm);
            this.setFormReadOnly(true);
            let obj = {};
            obj.name = 'cancelForm';
            obj.formname = this.myConfig.name;
            this.$emit('doAction', obj);
        },
        saveForm() {
            this.checkValidate();
            if (this.errorFlag) {
                return false;
            }
            this.setFormReadOnly(true);
            let obj = {};
            obj.name = 'saveForm';
            obj.formname = this.myConfig.name;
            obj.para = this.getData();
            this.$emit('doAction', obj);
        },
        toggle () {
            this.showForm = !this.showForm;
        },
        setShowForm(value) {
            this.showForm = value;
            this.setTitleStyle();
        },
        setTitleStyle() {
            if (this.showForm) {
                this.iconStyle = 'transform: rotate(90deg)';
            } else {
                this.iconStyle = '';
            }
        },
        isEdit() {
            return this.editFlag;
        },
        setShowBtn(value) {
            this.showBtn = value;
        },
        setBtnReadOnly(value) {
            this.btnReadOnly = value;
        },
    },
};
</script>
