<template>
    <MyDialog v-if="show" v-model="show" width="1600px" height="850px" :class="'font-size-' + fontSize"
        class="build-node-dlg">
        <template slot="title">
            <div :key="elKey">
                {{ prj.projectName }} - 项目节点
            </div>
        </template>

        <div class="font-size-tools">
                <i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize == 2 ? 'active' : ''">
                    <svg class="icon  svg-icon"
                        style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                        <path
                            d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                            fill="#fff" p-id="3687"></path>
                    </svg>
                </i>
                <i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize == 1 ? 'active' : ''">
                    <svg class="icon  svg-icon"
                        style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                        <path
                            d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                            fill="#fff" p-id="3687"></path>
                    </svg>
                </i>
                <i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize == 0 ? 'active' : ''">
                    <svg class="icon  svg-icon"
                        style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
                        <path
                            d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
                            fill="#fff" p-id="3687"></path>
                    </svg>
                </i>
            </div>
            <div class="modify-btn btn-left">
                <svg class="my-svg-icon-aaa" @click="modifyLeftBtn"
                    style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4967">
                    <path
                        d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
                        p-id="4968"></path>
                </svg>
            </div>
            <div class="modify-btn btn-right">
                <svg class="my-svg-icon-aaa" @click="modifyRightBtn"
                    style="cursor:pointer; width: 3em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4997">
                    <path
                        d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                        p-id="4998"></path>
                </svg>
            </div>

        <div class="main-content">
            

            <div class="head-title-tab">
                <div class="head-nav" :class="nav == it.lvl ? 'active' : ''" @click="doNavClick(it)"
                    v-for="(it, idx) in tableData" :key="idx">{{ it.nodeText }}</div>
            </div>
            <div class="node-list scroll" style="max-height: 675px;overflow-y: auto;" :class="'node-type'+(curNode.baseBuildNode?.nodeType||0)">
                <NodeItem :item="curNode" :showLabel="false" class="node-item-lvl1 node-item"></NodeItem>
                <div v-for="(it, idx) in curNodes" :key="idx" class="node-item2"
                    :class="'children' + (curNodes.length > 1 ? 'more' : 'one')">
                    <NodeItem :item="it" class="node-item-lvl2  node-item" :class="'children' + it.children.length"
                        @header-click="doLvl2HeaderClick(it)"></NodeItem>
                    <div v-for="(itt, idxx) in it.children" :key="idx + '_' + idxx" class="node-item3" v-show="it.expend">
                        <NodeItem :item="itt" class="node-item-lvl3  node-item"></NodeItem>
                    </div>
                </div>
            </div>
        </div>

    </MyDialog>
</template>

<script>
import NodeItem from './nodeItem.vue'
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog,
        NodeItem
    },
    data() {
        return {
            elKey: 0,
            fontSize: 0,
            index: 0,
            nav: '01',
            show: false,
            prj: null,
            prjs: [],
            tableData: [],
            curNodes: [],
            curNode: {}
        };
    },

    mounted() {

    },

    methods: {
        doLvl2HeaderClick(it) {
            if (it.children.length > 0) {
                it.expend = !it.expend;
            }
        },
        doNavClick(it) {
            this.nav = it.lvl;
            this.curNodes = it.children;
            this.curNode = it;
        },
        findItem() {
            let tmps = this.prjs.filter(d => d.id == this.prj.id);
            if (tmps.length > 0) {
                return tmps[0];
            }
            return null;
        },
        showDialog(prjs, prj) {
            this.show = true
            let id = prj.id;
            if (id == 0) {
                id = prjs[1].id;
                this.prj = prjs[1];
            } else {
                this.prj = prj;
            }
            this.prjs = prjs.filter(d => d.id > 0);
            let find = this.findItem();
            if (find) {
                this.index = this.prjs.indexOf(find);
            } else {
                this.index = 0;
            }
            this.loadData();
        },
        loadData() {
            this.prj = this.prjs[this.index];
            this.$api.buildNode.listByProject(this.prjs[this.index].id).then(d => {
                this.tableData = d || [];
                this.elKey++;
                this.curNode = this.tableData.length > 0 ? this.tableData[0] : {}
                this.curNodes = this.tableData.length > 0 ? this.tableData[0].children : []
                this.nav = "01";
            })
        },
        modifyLeftBtn() {
            let n = this.index;
            n--;
            if (n < 0) {
                n = this.prjs.length - 1;
            }
            this.index = n;
            this.loadData();
        },
        modifyRightBtn() {
            let n = this.index;
            n++;
            if (n > this.prjs.length - 1) {
                n = 0;
            }
            this.index = n;
            this.loadData();
        }
    },
};
</script>

<style lang="less">
.build-node-dlg {
    
    .popup-project-introduction-min {
        transform: translateY(100px);        

        &:hover {
            .modify-btn {
                display: flex;
            }
        }
    }

    &.font-size-2 {
        .popup-project-introduction-details {
                .main-content{
                    font-size: 32px;
            line-height: 64px;    
                
            .head-title-tab {
                .head-nav {
                    padding: 12px 36px;
                }
            }

            .node-list {
                .node-item {
                    .date-info {
                        line-height: 72px;

                        .sp-label {
                            width: 90px !important;
                            display: inline-block;
                            vertical-align: middle;
                            line-height: 28px;
                            font-size: 24px;
                        }
                    }
                }
            }

            .node-item-lvl2 {
                margin-top: 16px;
                .lbl-title {
                    width: 150px;
                    font-size: 32px;
                    width: 240px !important;
                }
            }
            .node-item3 {
                margin-left: 50px;
                .lbl-title {
                    font-size: 24px;
                    width:190px
                }
            }
        }
    }
    }

    &.font-size-1 {
        .popup-project-introduction-details {
                .main-content{
                    font-size: 24px;
            line-height: 28px;    
                
            .head-title-tab {
                .head-nav {
                    padding: 12px 36px;
                }
            }

            .node-list {
                .node-item {
                    .date-info {
                        line-height: 64px;
                        .sp-label {
                            width: 76px !important;
                            display: inline-block;
                            vertical-align: middle;
                            line-height: 28px;
                            font-size: 20px;
                        }
                    }
                }
            }

            .node-item-lvl2 {
                margin-top: 16px;
                .lbl-title {
                    width: 150px;
                    font-size: 24px;
                    width: 240px !important;
                }
            }
            .node-item3 {
                margin-left: 50px;
                .lbl-title {
                    font-size: 20px;
                    width:190px
                }
            }
        }
    }
    }

    .popup-project-introduction-details {
        padding: 0px !important;       
        position: relative;

        .quality-table {
            padding: 0px !important;
        }

        .font-size-tools {
            position: absolute;
            top: -40px;
            right: 100px;
        }

        .modify-btn {
            display: none;
            position: absolute;
            top: 400px;
            z-index: 100;
            cursor: pointer;
            padding: 0px;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);

                svg {
                    * {
                        fill: #fff;
                    }
                }
            }

            &.btn-right {
                right: 20px;
            }

            &.btn-left {
                left: 20px;
            }
        }


    }

    .head-title-tab {
        padding-top: 12px;
        display: block;
        width: 100%;

        .head-nav {
            background-size: 100% 100%;
            display: inline-block;
            width: auto;
            padding: 0px 24px;
        }
    }

    .node-list {
        padding: 12px;
        &.node-type0{
            .node-item-lvl2 {
                .lbl-title {
                    font-weight: bold;
                    font-size: 20px;
                    width: 200px !important;
                    color: #7fffd4;
                }
            }
        }
        .node-item {
            .date-info {
                box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
                line-height: 32px;
                padding: 0px 12px;
                overflow: hidden;
            }
        }


        .node-item-lvl1 {
            border-bottom: solid 1px #fff;
        }

        .node-item-lvl2 {
            &.children0 {
                .lbl-title {
                    .el-icon-caret {
                        display: none;
                    }
                }
            }
           
        }

        .node-item-lvl3,
        .node-item-lvl2 {
            margin-top: 8px;
            display: flex;

            .lbl-title {
                width: 150px;
                display: block;
            }

            .date-info {
                flex-grow: 1;
                display: flex;
                align-items: center;
            }
        }

        .node-item-lvl3 {
            .lbl-title {
                .el-icon-caret {
                    display: none;
                }
            }
        }

        .node-item3 {
            margin-left: 50px;
        }

        .lbl-title {
            line-height: 32px;
        }
    }

}</style>