<template>
    <Card :bordered="false" :padding="0" dis-hover>
        <template v-if="myConfig.modetype === '1'">
            <p @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 style="margin-left:24px;margin-top:0px;margin-bottom:10px;"/>
        </template>
        <template v-if="myConfig.modetype === '2'">
            <div style="margin-bottom:10px;">
                <span class="efuture-title-verticalline" /> <span style="font-size: 14px;font-weight:bold" v-text="myConfig.title" />
            </div>
        </template>
        <Form ref="form" class="efuture-tip-form" v-show="showForm" :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" class="efuture-form" >
                    <FormItem v-if="item.type !== 'Divider' && item.status && item.visible !== false"  :prop="item.name||item.sname"  :style="getFormItemStyle(item)" :show-message="false">
                        <template #label>
                            <ShowText :style="getLableStyle"  :contentAlign="myConfig.labelPosition" :label="item.label"  :config="item"></ShowText>
                        </template>
                        <template v-if="!showEffectValue || !item.showEffectValue">
                            <ControlBox :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
                        </template>
                        <template v-else>
                                <Poptip trigger="hover" style="width:100%"  placement="top">
                                    <ControlBox :ref="item.name||item.sname"  :valueData="form" :config="item" @inputValue="input"   @doAction="doAction" ></ControlBox>
                                    <template #content>
                                        <ControlBox  :ref="'effect_' + item.name||item.sname"  style="width:100%" :valueData="effectForm" :config="effectConfig(item)"  ></ControlBox>
                                    </template>    
                                </Poptip>
                        </template>     
                    </FormItem>
                    <ControlBox  v-if="item.type === 'Divider'"  :ref="item.dividerName"  :style="getDividerStyle" :config="item"></ControlBox>
                </Col>
                </template>
            </Row>
        </Form>
    </Card>
</template>

<script>
import Base from '@/components/form/formbox.vue';
export default {
    name:'mformcard',
    extends: Base,
    data () {
        return {
            myConfig:{
                title:'',
                modetype:'1',
                labelPosition: "right",
            },
            showForm:true,
            editFlag:false,
            showTitle:false,
            showEffectValue:false,
            effectForm:{}
        };
    },
    methods:{
        customInit() {
            if (this.myConfig.showEffectValue !== undefined) {
                this.showEffectValue = this.myConfig.showEffectValue;
            }
            this.myConfig.items.forEach(el => {
                if (el.showEffectValue === undefined) {
                    if (this.myConfig.showEffectValue) {
                        el.showEffectValue = this.myConfig.showEffectValue;
                    }
                }
            })
        },
        toggle () {
          this.showForm = !this.showForm;
        },
        setShowForm(value) {
            this.showForm = value;
        },
        effectConfig(item) {
            let config = this.$Method.copy(item);
            config.readOnly = true;
            return config;
        },
        setEffectData(obj) {
            this.effectForm = Object.assign({}, {}, obj);
        },
        getLableStyle() {
            if (this.myConfig.modetype === '1') {
                return 'padding-left:10px';
            }
            return '';
        },
        getDividerStyle() {
            if (this.myConfig.modetype === '1') {
                return 'margin-left:32px;';
            }
            return '';
        }
    }
};
</script>