<template>
    <div class="project-build-node-drawer" v-if="isOpen">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="60%" style="padding-left: 20px;">
            <template slot="title">
                <div>{{ title + ' 【计划节点】' }}</div>
                <right-toolbar @queryTable="loadData" :search="false">
                </right-toolbar>
            </template>
            <el-tabs  v-model="activeName" >
                    <el-tab-pane :label="''+it.nodeText" :name="''+it.id" :key="idx" v-for="(it,idx) in nodes" >
                        <node-item :item="it" :showLabel="false" style="border-bottom: solid 1px #ccc;"></node-item>
                        <div v-for="(it2,idx) in it.children" :key="idx" class="lvl-2">
                            <node-item :item="it2"></node-item>
                            <div v-for="(it3,idx) in it2.children" :key="idx"  v-if="it2.children.length>0" style="padding-left: 40px;" class="lvl-3">
                                <node-item :item="it3"></node-item>
                            </div>
                        </div>
                    </el-tab-pane>
            </el-tabs>
        </el-drawer>
    </div>
</template>

<script>
import {listByProject} from '@/api/project/build_node_data.js'
import NodeItem from './nodeItem.vue'
export default {
    name: 'RuoyiUiBuildNodeDrawer',
    components:{
        NodeItem
    },
    data() {
        return {
            isOpen:false,
            prj: null,
            nodes:[],
            activeName:''
        };
    },

    mounted() {

    },

    methods: {

        loadData(init){
            listByProject(this.prj.id).then(d=>{
               let tmps=(d.data||[]).map(it=>{
                it.lvl=it.baseBuildNode.nodeLvl;
                it.parentLvl=it.lvl.substring(0,it.lvl.length-2);
                it.nodeText=it.baseBuildNode.nodeText;
                it.file=this.$tryToJson(it.files,[]);
                return it;
               });
               let objs=tmps.filter(d=>d.parentLvl.length==0);
               objs.forEach(it=>{
                it.children=tmps.filter(item=>item.parentLvl==it.lvl)
                it.children.forEach(item=>{
                    item.children=tmps.filter(item3=>item3.parentLvl==item.lvl);
                });
               })
               this.nodes=objs;
               if(init){
                this.activeName=objs.length>0?objs[0].id+'':'';
               }
            });
        },
        show(prj) {
            this.prj = prj;
            this.title = prj.projectName;
            this.isOpen = true;
            this.loadData(true);
        }
    },
};
</script>

<style lang="scss" scoped>
.project-build-node-drawer{
    ::v-deep .el-drawer{
        min-width: 1600px;
    }
    ::v-deep .el-drawer__header{
        margin-bottom: 0px;
    }
    ::v-deep .el-drawer__body{
        padding:0px 24px;
        .el-form {
            overflow: hidden;
            .el-form-item{
                margin-bottom: 15px !important;
            }
        }
        .lvl-3{
            .lbl-title{
                font-size: 12px;
            }
        }
    }
}
</style>
