<template>
    <div style="width: 100%">
        <el-tabs  v-if="tabsArr.length > 0" type="border-card" v-model="activeModel" @tab-click="handleClick">
            <el-tab-pane v-for="(data,index) in dataSetting.tabOptions"
                         :label="data.label" :name="data.name" :key="index">
                <table-form-render isTabs :propTableviewsData="tableviewsData" :tabsArr="renderArr" ref="renderRef"
                                   :propFormData="formData" :formOperate="formOperate" :propDataAllObj="dataAllObj" :isEditData="isEditData"
                                   :propUploadFkInfo="uploadFkInfo" :propTableviewEventArr="tableviewEventArr"
                                   :propConditionEventRuleArr="conditionEventRuleArr" :propNewConditionEventRuleArr="newConditionEventRuleArr"
                                   :propNewControlEventObj="newControlEventObj" :propControlEventObj="controlEventObj"
                                   :propAddCommentsFields="addCommentsFields" :propRelationId="relationId"
                                   :propFieldSysDataObj="fieldSysDataObj" :isFlow="isFlow" :flowFieldStatus="flowFieldStatus"
                                   :activeTab="data.name" :isConfig="isConfig" :tableFormRefObj="tableFormRefObj" :isFirstClick="isFirstClick"
                >
                </table-form-render>
            </el-tab-pane>
        </el-tabs>
        <div v-else style="text-align: center;height:100px;line-height:100px">{{'请添加选项卡内容！'}}</div>
    </div>
</template>

<script>
    import {commonRender} from "../../views/popup/js/commonRender";
    export default {
        name: "pl-tabs",
        props:{
            name:{
                type:String,default:""
            },
            tableviewsData:{
                type:Object,default: () => {
                    return {}
                }
            },
            formData:{
                type:Object,default: () => {
                    return {}
                }
            },
            uploadFkInfo:{
                type:Object,default: () => {
                    return {}
                }
            },
            tableviewEventArr:{
                type:Array,default: () => {
                    return []
                }
            },
            newConditionEventRuleArr:{
                type:Array,default: () => {
                    return []
                }
            },
            fieldSysDataObj:{type:Object,default:() => {return {};}},
            newControlEventObj:{type:Object,default:() => {return {};}},
            controlEventObj:{type:Object,default:() => {return {};}},
            conditionEventRuleArr:{
                type:Array,default: () => {
                    return []
                }
            },
            dataSetting:{
                type:Object,default: () => {
                    return {}
                }
            },
            dataAllObj:{
                type:Object,default: () => {
                    return {}
                }
            },
            flowFieldStatus:{
                type:Object,default: () => {
                    return {}
                }
            },
            tabsArr:{
                type:Array,default: () => {
                    return []
                }
            },
            addCommentsFields:{
                type:Array,default: () => {
                    return []
                }
            },
            relationId:{
              type:String,default:""
            },
            formOperate:{
                type:String,default:"add"
            },
            isEditData: {type: Boolean, default: false},//是否可编辑数据
            isFlow: {type: Boolean, default: false},//是否是流程
            isConfig: {type: Boolean, default: false},//是否是配置层
        },
        data(){
            return {
                titleCss:'',
                activeModel:'1',
                renderArr:[],
                tableFormRefObj: {},
                isFirstClick: false
            }
        },
        watch:{
          'dataSetting.colCss'(val){
            if(val){
              this.titleCss=this.dataSetting.colCss
            }
          },
            'dataSetting.tabOptions':{
                deep:true,
                handler:function(){
                    (this.dataSetting.tabOptions || []).forEach(item => {
                        if(item.choose){
                            this.activeModel = item.name;
                        }
                    })
                }
            },
            'tabsArr':{
                deep:true,
                handler:function(){
                    this.refreshTabData();
                }
            },
            activeModel(){
                this.refreshTabData();
            }
        },
        created() {
          if(this.dataSetting.colCss){
            this.titleCss=this.dataSetting.colCss;
          }
          if(this.isConfig){
              (this.dataSetting.tabOptions || []).forEach(item => {
                  if(item.choose){
                      this.activeModel = item.name;
                  }
              })
          }
          this.refreshTabData();
          this.handleClick();
        },
        methods:{
            refreshTabData(){
                let arr = [];
                this.tabsArr.forEach(item => {
                    if(item.belongTab == this.activeModel){
                        arr.push(item);
                    }
                })
                let resultTabs = new commonRender().renderTrs(arr,'pc',[]);
                this.renderArr = resultTabs[0];
            },
            submitComment(){
                this.$refs.renderRef && this.$refs.renderRef.submitComment();
            },
            handleClick() {
                this.$nextTick(() => {
                    let refArr = this.$refs.renderRef || [];
                    refArr.forEach((ref,index) => {
                        let refObj = ref.$refs || {};
                        Object.keys(refObj).forEach(tableRef => {
                            if(tableRef && tableRef.includes("editTableRef") && this.$refs.renderRef[index].$refs[tableRef]) {
                                if(this.tableFormRefObj[tableRef]) {
                                    this.isFirstClick = true;
                                }else {
                                    this.isFirstClick = false;
                                }
                                this.$set(this.tableFormRefObj, tableRef, this.$refs.renderRef[index].$refs[tableRef]);
                            }
                        })
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .divider-class{
        color:red;
        margin: 0 0 10px 0;
    }
    ::v-deep .el-tabs--border-card>.el-tabs__content{
        padding: 5px 0 0;
    }
</style>
