<template>
    <div class="fm-form-item" :data-id="widget.model"v-if="widget.key">
        <el-form-item v-if="widget.type != 'divider' && display[widget.model]"
                      :prop="widget.model"
                      :ref="widget.model"
                      :class="{[widget.options && widget.options.customClass] : widget.options && widget.options.customClass?true: false,'no-label-form-item': widget.options.isLabelWidth && widget.options.labelWidth == 0 }"
                      :label="widget.options.hideLabel ? '' : widget.name"
                      :label-width="widget.options.hideLabel ? '0px' : (widget.options.isLabelWidth ? widget.options.labelWidth + 'px' : '')"
                      :key="widget.key"
                      :required="widget.options.required"
                      ref="generateFormItem"
        >
            <generate-element-item
                :blanks="blanks"
                :is-table="false"
                :widget="widget"
                :models="dataModels"
                :remote="remote"
                :edit="edit"
                :remote-option="remoteOption"
                :key="widget.key"
                v-model="dataModel"
                :platform="platform"
                :preview="preview"
                :serverURL="serverURL"
                :data-source-value="dataSourceValue"
                :event-function="eventFunction"
                :print-read="printRead"
                :form-component="formComponent"
            >
                
                <template v-slot:[blank.name]="scope" v-for="blank in blanks">
                    <slot :name="blank.name" :model="scope.model"></slot>
                </template>
            </generate-element-item>
        </el-form-item>
        
        <el-divider v-if="widget.type == 'divider' && display[widget.model]" :content-position="widget.options.contentPosition">
            {{ widget.name }}
        </el-divider>
    </div>

</template>

<script>
import GenerateElementItem from './GenerateElementItem'
import {EventBus} from '../util/event-bus.js'

export default {
    components: {
        GenerateElementItem
    },
    props: ['widget', 'models', 'rules', 'remote', 'blanks', 'display', 'edit', 'remoteOption', 'platform', 'preview', 'containerKey', 'serverURL', 'dataSourceValue', 'eventFunction', 'printRead', 'formComponent'],
    data() {
        return {
            dataModel: this.models[this.widget.model],
            dataModels: this.models
        }
    },
    mounted() {
        let _this = this
        EventBus.$on('on-upload-finished', (modelKey) => {
            if (_this.$refs[this.widget.model]){
                _this.$refs[this.widget.model].clearValidate()
            }
        })
    },
    methods: {},
    watch: {
        dataModel: {
            deep: true,
            handler(val) {
                EventBus.$emit('on-change-' + this.containerKey, val, this.widget.model, this.containerKey, this.widget)
    
                // 执行 onChange 方法
                if (this.widget.events && this.widget.events.onChange) {
                    let funcKey = this.widget.events.onChange
        
                    this.eventFunction[funcKey]({value: val, field: this.widget.model})
                }
            }
        },
        models: {
            deep: true,
            handler(val) {
                this.dataModels = val
                this.dataModel = val[this.widget.model]
            }
        }
    },
    created() {
    }
}
</script>
