<template>
    <div class="app-container">
        <el-tabs v-model="setting.selected" :type="setting.type" class="tab"
           :size="$store.state.settings.Size" @tab-click="clickHandle($event)">
            <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.name" :name="tab.id" :lazy="setting.lazy"
                         :ref="'tab_'+tab.id"      >
                <component v-if="!tab.content||tab.component"
                           :ref="'tab_content_'+tab.id"   :is="tab.component" :params="tab.params">
                </component>
                <div v-else>{{tab.content}}</div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import resize from '../utils/mixins/resize';
import page from './Common/page';
export default {
    name: "TabControl",
    mixins: [resize,page],//监听外部框架的大小改变事件
    components: {

    },
    computed:{

    },
    props: {
        items: {
            type: Array,
            default(){
              return  [{id:"1",name:"页面演示",component:"test",componentPath:"./test",params:{},query:{id:"{id}"}},
                {id:"2",name:"内容演示",content:"你好!!我的朋友"}];
            }
        },
        options:{
           type:Object,
           default(){
             return {type:null,selected:null,height:"100%",lazy:true};
           }
        },
    },
    data() {
        return {
          initialized:false,
          tabs:[],
          setting:{}
        }
    },async created() {
        this.$_page_getRouter();
        if (this.fid) {
            let cache = {};
            if (this.$store.state.form[this.fid]) {
                cache = this.$d.decodeData(this.$store.state.form[this.fid], {}).data[0];
            } else {
                await this.$async({
                    url: this.$store.state.api.form.loadConfig + this.fid, keymap: {}, beforeDecode: (e) => {
                        this.$store.dispatch('form/update', {key: this.fid, value: e});
                    }
                }).then(async (res) => {
                    cache = res.data[0];
                })
            }
            //完成布局参数干预
            this.handleParams(cache.view.params);
            this.updatePageParams(cache.view.query);
        }else{
            this.handleParams(this.params);
        }
    },
    mounted() {
        this.initialized=true;
        this.resize();
    },
    methods: {
        resize(e){

        },
        handleParams(params){
            if(params){
                if(params.items)
                    this.tabs=params.items;
                else
                    this.tabs=this.items;
                if(params.options)
                    this.setting=this.$d.merge(this.options, params.options);
                else
                    this.setting=this.options;
            }else{
                this.tabs=this.items;
                this.setting=this.options;
            }
            for(let i in this.tabs){
                let tab=this.tabs[i];
                if(i==0&&! this.setting.selected)
                    this.setting.selected=tab.id;
                if(tab.componentPath&&!this.$options.components[tab.component]){
                    this.$reg(this,tab.component,tab.componentPath);
                }
            }
        },
        updatePageParams(params){

        },updateTabPageParams(item,params){
            this.$d.debug().log("触发了页签查询",item,params)
            let tab="tab_"+item.id;
            let tabId="tab_content_"+item.id;
            var p = {};
            item.query=this.$d.merge(params,item.query);
            for (let key in item.query) {
                if (typeof item.query[key] == "string") {
                    p[key] = item.query[key].urlFormat(this.queryParams);
                } else {
                    p[key] = item.query[key]
                }
            }
            this.$nextTick(()=> {
                if (this.$refs[tab] && this.$refs[tab][0].loaded) {
                    this.$nextTick(() => {
                        this.$nextTick(() => {
                            this.$nextTick(() => {//等待子组件加载完成
                                this.$nextTick(() => {//等待子组件加载完成
                                    if (this.$refs[tabId] && this.$refs[tabId][0].$_page_updateQueryParams && item.query) {//为组件
                                        this.$refs[tabId][0].$_page_updateQueryParams(p, true);
                                        delete item.lastParams;
                                    } else {//非组件
                                    }
                                });
                            });
                        });
                    });
                } else {//未加载
                    item.lastParams = p;
                }
            });
        },customQuery(params){
            this.$d.debug().log("触发了页签查询22222",params)
            // this.updatePageParams(params);

            for(let i in this.tabs){
                this.updateTabPageParams(this.tabs[i],params);
            }
        },clickHandle(e){
            // this.$d.debug().log("点击了页签",e.label,e)
            let item=this.tabs.find((tab)=>tab.id==e.name);
            if(item&&item.lastParams){
                this.$nextTick(()=>{
                    this.updateTabPageParams(item, item.lastParams);
                })
            }else{
                let tabId="tab_content_"+item.id;
                if(this.$refs[tabId]&&   this.$refs[tabId][0].resize){
                    this.$refs[tabId][0].resize();
                }
            }
        }
    }
}
</script>
