<template>
    <el-form style="height: 100%;width: 100%" :model="optFormData">
        <el-row>
            <component :is="child.component" v-bind="child.props" :key="child.code" :code="child.code" v-for="child in renderData.children"></component>
        </el-row>
    </el-form>
</template>

<script>
import Vue from "vue";
const allComponents = require.context("./components", true, /\.vue$/);
allComponents.keys().forEach(key => {
    const component = allComponents(key).default;
    Vue.component(component.name, component);
})
import {converter} from './converter/converterJson'

export default {
    name: "page-container",
    data(){
        return{
            renderData: {
                id:"1",
                component: "page",
                "children": []
            }, // 标准渲染json格式数据
            configDataAll: {}, // 所有配置数据对应的json对象
            optFormData: {}, // 表单对象
            configEntity:{}, // 每个组件对应的配置属性
        }},
    provide:function(){
        return{
            container:this,
            formData:this.optFormData,
            configEntity:this.configEntity
        }
    },
    created(){
        this.initConfigData();
    },

    methods:{
        initConfigData(){
            this.FORM_GLOBAL.getTableViews('c190daafefdd11ed9fa6d50ed14bf6db').then(tableviewsData => {
                this.FORM_GLOBAL.getControlConfig('c190daafefdd11ed9fa6d50ed14bf6db').then(resData =>{
                    resData.forEach(item => {
                        this.configDataAll[item.code] = item;
                        let props = this.getComponentProps(item);
                        let component = {
                            code: item.code,
                            id:item.id,
                            component:this.getComponent(item.controlType),
                        }
                        this.configEntity[item.id] = props;
                        this.configDataAll[component.code] = component;
                        if(!item.container){ // 没有放在组件的内部
                            let componentCol = {
                                id: item.id + "_3",
                                code: item.code + "_3",
                                component: "spcp-col-container",
                                cols: Number(item.fieldInclue),
                                children: [component]
                            };
                            this.configDataAll[componentCol.code] = componentCol;
                            this.renderData["children"].push(componentCol);
                        }else{

                        }
                    })
                    console.log(this.renderData);
                });
            });
        },
        /**
         * 根据旧版本的控件类型，获取新版本的渲染组件名称
         * @param controlType
         */
        getComponent(controlType){
            let component = "";
            switch (controlType){
                case "input":
                    component = "spcp-input";
                    break;
                case "radio":
                    component = "spcp-radio";
                    break;
                case "select":
                    component = "spcp-select";
                    break;
                default:
                    break;
            }
            return component;
        },
        /**
         * 获取指定组件类型需要设置的所有属性
         */
        getComponentProps(item){
            return converter('1.0',item);
        },
        /**
         * 获取指定组件的样式
         */
        getComponentStyle(item){
            return "";
        },
        /**
         * 获取指定组件的on事件
         */
        getComponentEvent(item){
            return "";
        },
    }
}


</script>

<style scoped>

</style>