<template>
  <page  :style="styles" :componentClasses="componentClasses"></page>
</template>

<script>
import Page from './page/index/index.vue';
// 加载内置插件及每个区块对应的key
import {SVC} from './service';
// 加载组件库
import defaultComponentClass from './components';
import eventbus from './service/eventbus';
const pluginsBelongKeys = SVC.pluginsBelongKeys;
const sortedPlugins = SVC.sortedPlugins;
import mixUtil from './plugins/save/mixUtil'


import Service from "./service/tool-service";
import httpLoading from "./utils/httpLoading";
export default {
    mixins:[mixUtil],
    data () {
        return {
            styles: {
                        height: '100%',
                        position: 'absolute',
                        bottom: 0,
                        left: 0,
                        right: 0,
                        top:"0px"
            },
            isRerver:false,//note 判断是否被转换了
            jsonObj:{
                page:{},
                elements:[]
            },
        };
    },
    methods:{
        updateHeight(topHeight){
            this.styles.top=topHeight;
        },
        getComponents(){
           let builtInPlugins = [];
           const context = require.context(
               './components',
               true,
               /index\.(vue)$/
           );

           context.keys().forEach(item => {
               let myItem=context(item).default;
               //note 公共组件全部预置
               if(myItem.name=="gaea-box"||myItem.name=="gaea-btns-oprator"||myItem.name=="gaea-container"||myItem.name=="gaea-steps"||myItem.name=="gaea-title"||myItem.name=="gaea-button"){
                   builtInPlugins.push(myItem);
               }
               //note 判断每一步所需要的组件
               else if(localStorage.itemStep=="1"){
                   if(myItem.name=="gaea-form"||myItem.name=="gaea-form-table"||myItem.name=="gaea-form-radio"||myItem.name=="gaea-identity-check"||myItem.name=="gaea-date-picker"
                       ||myItem.name=="gaea-input"||myItem.name=="gaea-input-number"||myItem.name=="gaea-radio"||myItem.name=="gaea-select"||myItem.name=="gaea-table-daterange"
                       ||myItem.name=="gaea-table-input"||myItem.name=="gaea-address-select"||myItem.name=="gaea-radio"||myItem.name=="gaea-select"||myItem.name=="gaea-table-input"){
                       builtInPlugins.push(myItem);
                   }
               }else{
                   if(myItem.name=="gaea-form"||myItem.name=="gaea-form-table"||myItem.name=="gaea-form-radio"||myItem.name=="gaea-identity-check"||myItem.name=="gaea-date-picker"
                       ||myItem.name=="gaea-input"||myItem.name=="gaea-input-number"||myItem.name=="gaea-radio"||myItem.name=="gaea-select"||myItem.name=="gaea-table-daterange"
                       ||myItem.name=="gaea-table-input"||myItem.name=="gaea-address-select"||myItem.name=="gaea-radio"||myItem.name=="gaea-select"||myItem.name=="gaea-table-input"){
                   }else{
                       builtInPlugins.push(myItem);
                   }
               }

           });
           return builtInPlugins;
       },
        exportLocalData(){
            let stateaArr= this.$store.state.viewport.instances;
            let localInstances= [...stateaArr];
            localInstances.splice(0,1);
            for(let key=0;key<localInstances.length;key++){
                delete localInstances[key][1].vm;
                // val.data.property.value=val.data.property.label;
            }
            console.log(localInstances); // [ 1, 2, 3 ]  openModalTitle
            return localInstances;
            //let templateJSON=JSON.stringify(localInstances);
        },
        showTemplateType(obj){
            eventbus.$emit("showTemplateType",obj);
        },
        exportData(marker){
            this.$store.commit('viewport/deleteDataArr', {});
            debugger;
            console.log(this.componentTree);
            // let pageObj= JSON.parse(localStorage.getItem("page"));
            configPageIde.page.fullModel.templateCache.validators=[];
            this.jsonObj.page = configPageIde.page;
            this.jsonObj.elements = [];
            this.componentTreeFactory(this.componentTree,this.jsonObj.elements);
            let allJson={
                previewJson:{},//预览的json
                localJson:{}//存储的json
            }
            let exportJson =  this.jsonObj;
          /*  let copyObj={
                data:this.jsonObj
            }
            Object.assign(exportJson, copyObj);*/

            //note 保存模板和json
            //note 这里面要做一个修改，给每一个form 里面添加字段属性，然后把字段的属性放到校验里面去
            let jsonArr2=[];
            let propArr=[];
            let targetArr=[];
             debugger;
            for(let i=0;i<exportJson.elements.length;i++) {
                for (var j = 0; j < exportJson.elements[i].data.length; j++) {
                    //判断添加的数组是否为空了
                    if (exportJson.elements[i].data[j].type == "form") {
                        let jsonArr = exportJson.elements[i].data[j].data.items;
                        for (let m = 0; m < jsonArr.length; m++) {
                            if(jsonArr[m].type=="checkboxMultiple"){
                                exportJson.page.fullModel[jsonArr[m].prop]=[];
                            }else{
                                exportJson.page.fullModel[jsonArr[m].prop]="";
                            }
                            delete jsonArr[m].rules;
                        }
                    }
                }
            }
            console.log(propArr);
            allJson.previewJson=exportJson;
            if(marker==1){
                //note 保存  exportJson
                 allJson.localJson=this.exportLocalData();
            }else {
                //note 预览 2
            }
            return allJson;
        },
    },
    components: {
        Page
    },
    computed: {
        viewportInstances () {
            //note 获取拖拽组件的属性
            let viewprotInstances = this.$store.state.viewport.instances;
            let obj = Object.create(null);
            for (let [k,v] of viewprotInstances) {
                obj[k] = v;
            }
            return obj;
        },
        applicationState () {
            return this.$store.state.application;
        },
        viewportState () {
            return this.$store.state.viewport;
        },
        componentTree () {
            debugger;
            //note 获取组件树层级
            let _root = this.digui(this.viewportState.rootInstanceKey);
            return [_root][0].children;
        },
        instances () {
            return this.$store.state.viewport.instances;
        },
        formValidatorRules(){
            //note rules校验规则rules的抽取
            debugger;
            let result = _.pickBy(this.viewportInstances,(value)=>{
                if(value.data.validateArr&&value.data.validateArr.length>0){
                    value.data.validateArr.forEach(function(v,k) {
                        console.log(v); //这样就会分别将name遍历出来,判断有没有校验联动
                        if(v.requireKeyValues&&v.requireKeyValues.length>0){
                            //
                            v.requireKeyValues.forEach(function(v1,k) {
                                console.log(v1); //这样就会分别将name遍历出来,判断有没有校验联动
                                if(v1.values.indexOf(",")==-1){
                                    //note 没找到
                                }else{
                                    v1.values=v1.values.split(",");
                                }

                            });
                        }
                    });
                }
                return value.data.validateArr&&value.data.validateArr.length>0;
            });
            result = _.mapKeys(result,(value)=>{
                return value.data.property.prop;
            });
            result = _.mapValues(result,(value)=>{
                let validateArr = value.data.validateArr.map((value)=>{
                    return _.pickBy(value,(value)=>{
                        return value;
                    })
                });
                if(!validateArr[0].required){
                    validateArr.splice(0,1)
                }
                return validateArr;
            });
            return result;
        }
    },
    props: {
        componentClasses: {
            default () {
                return [];
            }
        }
    },
    created () {
        /*if(localStorage.isRefresh&&localStorage.isRefresh=="1"){
            localStorage.isRefresh="0";
            location.reload();
        }*/
        console.log(JSON.stringify(defaultComponentClass));
        //this.componentClasses=this.getComponents();
        this.$store.commit('application/loadBuiltInPlugins', {pluginsBelongKeys, sortedPlugins});
        /*this.componentClasses.forEach(item => {
            this.$store.commit('application/addComponentClass', item);
        });*/
        this.componentClasses.concat(defaultComponentClass).forEach(item => {
            this.$store.commit('application/addComponentClass', item);
        });
    },
    mounted(){

    }

};
</script>

<style>
  html,body{height:100%}
  .formDiv{
    width: 100%;
    text-align: center;
    position: relative;
  }
  .formTableDiv{
    width: 24%;
    text-align: center;
  }

</style>
