<template>
    <el-form :model="formData" label-width="120px" style="width: 100%;height: 100%" size="medium">
        <el-row>
            <spcp-form-wrapper v-for="(item,index) in formConstructor" :key="index" v-bind:bind-props="item.bindProps">
                <component :is="item.spcpComponent"></component>
            </spcp-form-wrapper>
        </el-row>
    </el-form>
</template>
<script>
import spcpFormWrapper from './spcpFormWrapper.vue';
export default {
    name: "form-view",
    props:{
        sourceId:{type:String,default:""}, // 当前使用的数据源ID
    },
    components: {spcpFormWrapper},
    data(){
        return {
            loginUser:{},
            tableviewId:'a5b2a74ef6e011ee8255114a6f1ea455',
            tableviewsData:{},
            formId:"",
            formData: {},
            formConstructor: [{
                spcpComponent:'spcp-input'
            },{
                spcpComponent:'spcp-input'
            }],
            userBackfillKey:""
        }
    },
    provide:function(){
        return {
            spcpFormData:this.formData
        }
    },
    created() {
        this.init();
    },
    methods:{
        init(){
            this.initTableview().then(() => {
                this.loadFormRenderData().then(() => {

                })
            })
        },
        initTableview(){
            return new Promise(resolve => {
                this.FORM_GLOBAL.getTableViews(this.tableviewId).then(tableviewsData => {
                    if(!tableviewsData || !tableviewsData.id){
                        this.$message.error("表单资源不存在！");
                        return;
                    }
                    this.tableviewsData = tableviewsData;
                    this.formId = this.tableviewsData.formId;
                    this.userBackfillKey = `userBackfill-${this.formId}-${this.tableviewId}`;
                    let objForm = {};
                    (this.tableviewsData.viewStyle || "").split(";").forEach(item => {
                        let tempArrForm = item.split(":");
                        if (tempArrForm.length == 2) {
                            objForm[tempArrForm[0]] = tempArrForm[1];
                        }
                    });
                    delete objForm["background-color"];
                    this.$set(this.tableviewsData, 'form-style', objForm);
                    this.FORM_GLOBAL.getFormBase(this.formId).then(formBaseData => {
                        this.formDefineKey = formBaseData.defineKey;
                        let sourceKey = formBaseData.sourceKey;
                        let shareSources = formBaseData.shareSources;
                        if((shareSources || "").indexOf(this.sourceId) > -1){
                            sourceKey = this.sourceId;
                        }else if(this.sourceId){
                            this.$message.error("无效的数据源ID，已自动调整为默认数据源！");
                        }
                        let currentSourceKey = window.currentDataSourceKey;
                        if(!currentSourceKey) {
                            window.currentDataSourceKey = sourceKey;
                        }
                        resolve();
                    })
                });
            });
        },

        loadFormRenderData() {
            return new Promise(resolve => {
                this.FORM_GLOBAL.getControlConfig(this.tableviewId,this.loginUser.userType).then(resData =>{
                    this.groupFieldObj = {};
                    this.tabsFieldObj = {};
                    this.inGroupFieldIdArr = [];
                    this.inTabsFieldIdArr = [];
                    (resData || []).forEach(item => {
                        if(typeof(item.specialSet) == 'string'){
                            item.specialSet = JSON.parse(item.specialSet || "{}");
                        }
                        let objTd = {};
                        (item.colCss || "").split(";").forEach(item => {
                            let tempArrTd = item.split(":");
                            if (tempArrTd.length === 2) {
                                objTd[tempArrTd[0]] = tempArrTd[1];
                            }
                        });
                        this.$set(item, 'td-style', objTd);
                        Object.keys(item.specialSet).forEach(key => {
                            if (Object.keys(item).indexOf(key) == -1) {
                                item[key] = item.specialSet[key];
                            }
                        });
                        // if (item.controlType === "editList") {
                        //     this.editTableFormId.push(item.linkFormId);
                        // }
                        // if (item.isUserBackfill && item.isUserBackfill === "1"){
                        //     this.userBackfillArr.push(item);
                        // }
                        // if(item.groupField){
                        //     this.inGroupFieldIdArr.push(item.code);
                        //     if(!this.groupFieldObj[item.groupField]){
                        //         this.groupFieldObj[item.groupField] = [];
                        //     }
                        //     this.groupFieldObj[item.groupField].push(item);
                        // }
                        // if(item.tabsField){
                        //     this.inTabsFieldIdArr.push(item.code);
                        //     if(!this.tabsFieldObj[item.tabsField]){
                        //         this.tabsFieldObj[item.tabsField] = [];
                        //     }
                        //     this.tabsFieldObj[item.tabsField].push(item);
                        // }
                        item.spcpComponent = this.getComponentName(item.controlType);
                        // item.spcpCols = item.fieldInclue;
                        item.bindProps = {
                            spcpCols:item.fieldInclue,
                            spcpLabel:item.showName
                        }
                    });
                    this.formConstructor = resData || [];
                    console.log(this.formConstructor);
                    // this.contentArr = resData || [];
                    // let result = new commonRender().renderTrs(this.contentArr,'pc',this.inGroupFieldIdArr,this.operate,this.inTabsFieldIdArr);
                    // this.renderArr = result[0];
                    // this.dataAllObj = result[1];
                    // this.oldDataAllObj = JSON.parse(JSON.stringify(this.dataAllObj)); //拷贝一份
                    //初始化验证
                    // if (this.operate !== 'view'){
                    //     // (this.renderArr || []).forEach((tr, trIndex) => {
                    //     //     (tr["tds"] || []).forEach((td, tdIndex) => {
                    //     //         this.buidRules(td, trIndex, tdIndex);
                    //     //     });
                    //     // });
                    //     if(this.isGroup){
                    //         (this.groupArr || []).forEach((tr,trIndex) =>{
                    //             (tr["tds"] || []).forEach((td,tdIndex) =>{
                    //                 this.buidRules(td,trIndex,tdIndex);
                    //             });
                    //         });
                    //     }else if(this.isTabs){
                    //         (this.tabsArr || []).forEach((tr,trIndex) =>{
                    //             (tr["tds"] || []).forEach((td,tdIndex) =>{
                    //                 this.buidRules(td,trIndex,tdIndex);
                    //             });
                    //         });
                    //     }else{
                    //         (this.renderArr || []).forEach((tr,trIndex) =>{
                    //             (tr["tds"] || []).forEach((td,tdIndex) =>{
                    //                 this.buidRules(td,trIndex,tdIndex);
                    //             });
                    //         });
                    //     }
                    // }
                    resolve();
                });
            });
        },
        getComponentName(controlType){
            let component = "";
            if (controlType === 'input') {
                component = 'spcp-input';
            }
            // switch (controlType){
            //     case 'input':
            //         component = 'spcp-input';
            //         break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //     //     break;
            //     // case 'input':
            //     //     component = 'spcp-input';
            //         break;
            //     default:
            //         break;
            // }
            return component;
        }
    }
}
</script>
<style scoped>

</style>