<template>
    <div class="structShow">
            <div class="structFields">
                <el-table
                    size="medium"
                    :data="simpleFields"
                    height="300px"
                    style="width: 100%">
                    <el-table-column
                        prop="name"
                        label="Datafields"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="typeName"
                        label="Data Type"
                       >
                    </el-table-column>
                </el-table>
            </div>
            <div class="structRules">
                <!-- tree -->
                <b>Rules:</b>
                <br/>
                <el-tree
                    :data="ruleData"
                >
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <img :src="getRuleIcon(node,data)" class="ruleIcon"/>
                        <span :title="data.methodName">{{ node.label }}</span>
                    </span>
                </el-tree>
            </div>
    </div>
</template>

<script>
export default {
    props:{
        fields:{
            type: Array,
            default:()=>[]
        },
        initList:{
            type: Array,
            default:()=>[]
        },
        ruleList:{
            type: Array,
            default:()=>[]
        },
        checkList:{
            type: Array,
            default:()=>[]
        },
        defaultList:{
            type: Array,
            default:()=>[]
        },
        globalList:{
            type: Array,
            default:()=>[]
        },
        staticList:{
            type: Array,
            default:()=>[]
        },
    },
    data(){
        return {
            
        }
    },
    methods:{
        getRuleIcon(node,data){
            if(node.level == 1){
                if(data.id == "0"){
                    return require("~/assets/model/ruleFunctionGroup.gif")
                }else if(data.id == "1"){
                    return require("~/assets/model/ruleFunctionGroup.gif")
                }else if(data.id == "2"){
                    return require("~/assets/model/ruleDefaultGroup.gif")
                }else if(data.id == "3"){
                    return require("~/assets/model/ruleDefaultGroup.gif")
                }else if(data.id == "4"){
                    return require("~/assets/model/ruleCheckGroup.gif")
                }else if(data.id == "5"){
                    return require("~/assets/model/ruleEventGroup.gif")
                }
            }else{
                if(data.ruleType == "GLOBAL"){
                    return require("~/assets/model/ruleFunction.gif")
                }else if(data.ruleType == "STATIC"){
                    return require("~/assets/model/ruleFunction.gif")
                }else if(data.ruleType == "INIT"){
                    return require("~/assets/model/ruleInit.gif")
                }else if(data.ruleType == "DEFAULT"){
                    return require("~/assets/model/ruleDefault.gif")
                }else if(data.ruleType == "CHECK"){
                    return require("~/assets/model/ruleCheck.gif")
                }else if(data.ruleType == "RULE"){
                    return require("~/assets/model/ruleEvent.gif")
                }
            }
        }
    },
    mounted(){

    },
    computed:{
        simpleFields(){
            return this.fields.filter(item=>item.type === 0 && !item.typeName.endsWith("IPanel"))
        },
        ruleData(){
           const rules = []
           const globalNode = {id:"0",label:"global"} 
           const initNode = {id:"2",label:"init"}
           const defaultNode = {id:"3",label:"default"}
           const staticNode = {id:"1",label:"static"}
           const ruleNode = {id:"5",label:"rule"} 
           const checkNode = {id:"4",label:"check"} 
           rules.push(globalNode)
           rules.push(staticNode)
           rules.push(initNode)
           rules.push(defaultNode)
           rules.push(checkNode)
           rules.push(ruleNode)
           globalNode.children = this.globalList.map((ruleItem,idx)=>{
               return {id:globalNode.id+idx,ruleType:"GLOBAL",label:ruleItem.methodName}
           }); 
           initNode.children = this.initList.map((ruleItem,idx)=>{
               return {id:initNode.id+idx,ruleType:"INIT",label:`\\<order=${ruleItem.order},method=${ruleItem.methodName}>`}
           }); 
           defaultNode.children = this.defaultList.map((ruleItem,idx)=>{
               return {id:defaultNode.id+idx,ruleType:"DEFAULT",label:`${ruleItem.dotPath.replace(/\./g,"\\")}<order=${ruleItem.order},method=${ruleItem.methodName}>`}
           }); 
           checkNode.children = this.checkList.map((ruleItem,idx)=>{
               return {id:checkNode.id+idx,ruleType:"CHECK",label:`${ruleItem.dotPath.replace(/\./g,"\\")}<order=${ruleItem.order},method=${ruleItem.methodName}>`}
           }); 
           ruleNode.children = this.ruleList.map((ruleItem,idx)=>{
               return {id:ruleNode.id+idx,ruleType:"RULE",label:`${ruleItem.dotPath.replace(/\./g,"\\")}<order=${ruleItem.order},method=${ruleItem.methodName}>`}
           }); 
           staticNode.children = this.staticList.map((ruleItem,idx)=>{
               return {id:staticNode.id+idx,ruleType:"STATIC",label:ruleItem.methodName}
           }); 
           return rules
        }
    }
}
</script>

<style>
.structShow{
    display: flex;
    flex-direction: column;
    height:100%;
}
.structShow .structFields{
    flex: 2;
}
.structShow .structRules{
    flex: 3;
    overflow: auto;
}

</style>