<template>
    <div style="height:500px;">
        <div v-for="(item,index) in contentData.contentArr" :key="index" style="height: 100%;" v-if="needTab == '0'">
            <common-table-form v-if="isShow(item,'tableView',index)"
                               ref="tableFormRef"
                               view-id="7a5f2e31799b40958b72873c070dc768" data-id="" table-name="tb_vue_test" show-type="add">
            </common-table-form>
            <complex-view-rendering v-if="isShow(item,'complex',index)"
                    :id="item.url[item.url.length - 1]" menu-id="42e98c847d2a4befaa935724e10df086" :is-sup="true">
            </complex-view-rendering>
            <component v-if="isShow(item,'diyPage',index) && changeUrl(item.url)"
                       :is="componentIndex"></component>
        </div>

        <div style="height: 100%;" v-if="needTab == '1'">
            <el-tabs v-model="singleTabValue" style="height: 100%;">
                <el-tab-pane name="0">
                    <span slot="label"><i :class="contentData.icon"></i> {{contentData.tabTitle}}</span>
                    <div v-for="(item,index) in contentData.contentArr" :key="index" style="height: 100%;">
                        <common-table-form v-if="isShow(item,'tableView',index)"
                                           ref="tableFormRef"
                                           view-id="7a5f2e31799b40958b72873c070dc768" data-id="" table-name="tb_vue_test" show-type="add">
                        </common-table-form>
                        <complex-view-rendering v-if="isShow(item,'complex',index)"
                                           :id="item.url[item.url.length - 1]" menu-id="42e98c847d2a4befaa935724e10df086" :is-sup="true">
                        </complex-view-rendering>
                        <component v-if="isShow(item,'diyPage',index) && changeUrl(item.url)"
                                   :is="componentIndex"></component>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div style="height: 100%;" v-if="needTab == '2'">
            <el-tabs v-model="editableTabsValue" :type="contentData.tabStyle"
                     :tab-position="contentData.tabPlace" style="height: 100%;">  <!--@tab-click="tabClick"-->
                <el-tab-pane :key="item.name"
                             v-for="item in contentData.tabInfoArr"
                             :label="item.tabTitle"
                             :name="item.name">
                    <span slot="label"><i :class="item.tabIcon"></i> {{item.tabTitle}}</span>
                    <common-table-form :ref="'tableFormRef' + item.name"
                                       view-id="7a5f2e31799b40958b72873c070dc768" data-id="" table-name="tb_vue_test" show-type="add">
                    </common-table-form>
                    <complex-view-rendering v-if="item.url[0] == 'complex'"
                                       :id="item.url[item.url.length - 1]" menu-id="42e98c847d2a4befaa935724e10df086" :is-sup="true">
                    </complex-view-rendering>
                    <component v-if="item.url[0] == 'diyPage' && changeUrl(item.url)"
                               :is="componentIndex"></component>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import {Replace} from "sasp-base";
    import ElTabPane from "element-ui/packages/tabs/src/tab-pane";
    export default {
        name: "plDynamicPanel",
        components: {ElTabPane},
        props:{
            needTab:{type:String,default:"0"},
            contentData:{type:Object,default:() => {return {};}},
            fieldObj:{type:Object,default:() => {return {};}},
            isPerview:{type:Boolean,default:false},
            formData:{type:Object,default:() => {return {};}},
        },
        data(){
            return {
                diyFunctionObj:{},
                complexObj:{},
                conditionResultObj:{},
                keyObj:{},
                //缺省值类型
                defaultArr:[
                    {label:"用户名",value:"LOGINUSER.userName"},
                    {label:"用户ID",value:"LOGINUSER.userId"},
                    {label:"用户账户",value:"LOGINUSER.userAccount"},
                    {label:"用户类型",value:"LOGINUSER.userType"},
                    {label:"关联ID",value:"LOGINUSER.linkId"},
                    {label:"组织名称",value:"LOGINUSER.mainOrgName"},
                    {label:"组织ID",value:"LOGINUSER.mainOrgId"},
                    {label:"部门名称",value:"LOGINUSERDEPT.orgName"},
                    {label:"部门ID",value:"LOGINUSERDEPT.id"},
                    {label:"组织岗位用户ID",value:"LOGINUSER.orgPosUserIds"},
                    {label:"用户所属省ID",value:"LOGINUSERDEPT.province"},
                    {label:"用户所属市ID",value:"LOGINUSERDEPT.city"},
                    {label:"用户所属区ID",value:"LOGINUSERDEPT.area"},
                    {label:"用户所属街道ID",value:"LOGINUSERDEPT.street"},
                    {label:"用户所属省名称",value:"LOGINUSERDEPT.provinceName"},
                    {label:"用户所属市名称",value:"LOGINUSERDEPT.cityName"},
                    {label:"用户所属区名称",value:"LOGINUSERDEPT.areaName"},
                    {label:"用户所属街道名称",value:"LOGINUSERDEPT.streetName"},
                    {label:"系统时间",value:"SYSTIME.yearMoNday"}
                ],
                componentIndex:"",
                componentUrl:"",
                singleTabValue:"0",
                editableTabsValue:"0",
                tableViewVisable:false,
            }
        },
        mounted(){
            if(this.needTab == '0' ||  this.needTab == '1'){
                this.$refs["tableFormRef"] && this.$refs["tableFormRef"][0] && this.$refs["tableFormRef"][0].loadData();
            }else if(this.needTab == '2'){
                this.contentData.tabInfoArr.forEach(item => {
                    if(item.url[0] == 'tableView'){
                        this.$refs["tableFormRef" + item.name] && this.$refs["tableFormRef" + item.name][0] && this.$refs["tableFormRef" + item.name][0].loadData();
                    }
                });
            }
        },
        created(){
            this.init();
            this.getIndex();
        },
        watch:{
            componentUrl(){
              this.getIndex();
          }
        },
        methods:{
            init(){
                Object.keys(this.fieldObj).forEach(fieldId => {
                    let obj = {value:this.fieldObj[fieldId].field};
                    this.keyObj[fieldId] = obj;
                });
                this.defaultArr.forEach(item => {
                    this.keyObj[item.value] = item;
                });
            },

            isShow(contentObj,type,index){
                /*if(this.conditionResultObj[index]){
                    return this.conditionResultObj[index];
                }*/
                let result = "";
                let urlType = this.contentData.contentArr[0].url[0];
                if(!this.isPerview){
                    result = urlType == type;
                }else{
                    result = this.getConditionResult(contentObj.conditionArr,index) && urlType == type;
                }
                // this.conditionResultObj[index] = result;
                return result;
            },


            getConditionResult(conditionArr,index){
                this.index = index;
                let loginUser = this.CACHE_GLOBAL.getLoginUser();
                let userDept = this.CACHE_GLOBAL.getLoginDept();
                this.conditionResultObj = {};
                let msg = "";
                conditionArr.forEach(item => {
                    msg += "&& ";
                    if(item.key){
                        if(item.key.indexOf("LOGINUSER") > -1){
                            msg += "'" + Replace.def(loginUser,item.key) + "' ";
                        }else if(item.key.indexOf("LOGINDEPT") > -1){
                            msg += "'" + Replace.def(userDept,item.key) + "' ";
                        }else{
                            msg += "'" + this.formData[this.keyObj[item.key].value] + "' ";
                        }
                    }
                    if(item.operaSign){
                        msg += item.operaSign + " ";
                    }
                    if(item.value){
                        msg += "'";
                        if(item.valType == 'default'){
                            if(item.value.indexOf("LOGINUSER") > -1){
                                msg += Replace.def(loginUser,item.value);
                            }else{
                                msg += Replace.def(userDept,item.value);
                            }
                        }else if(item.valType == 'sysData'){
                            msg += item.valueName;
                        }else if(item.valType == 'sysParam'){
                            msg += this.sysParamObj[item.value].paramVal;
                        }else if(item.valType == 'constant'){
                            msg += item.value;
                        }
                        msg += "'";
                    }
                    msg += " ";
                });
                if(msg){
                    msg = msg.substring(3);
                }
                return eval(msg);
            },

            async changeUrl(urlArr){
                if(urlArr[0] != 'diyPage'){
                    return;
                }
                let id = urlArr[urlArr.length - 1];
                let res = null;
                    // await this.axios.post(this.api.sysFunction.getById,{id:id});
                if(res && res.data){
                    this.componentUrl = res.data.ljdz;
                    return true;
                }
            },

            getIndex(){
                if(!this.componentUrl){
                    return;
                }
                let url = this.componentUrl;
                let index = this.componentUrl.indexOf(".vue");
                if(index > -1){
                    url = this.componentUrl.substring(0,index);
                }
                if(url.indexOf("/") == 0){
                    url = url.substring(1);
                }
                // url = "views/framework/config/usermanage/empowerUser/empowerUserManage";
                this.componentIndex = () => Promise.resolve(require('@/' + url +'.vue').default);
                // this.componentIndex = () => import('@/' + url +'.vue');
            },

            tabClick(){
                this.tableViewVisable = false;
                this.tableViewVisable = true;
                /*this.$nextTick(() => {

                });*/
            }
        }
    }
</script>

<style scoped>
    ::v-deep .el-tabs__content {
        height: 100%;
    }
</style>
