<template>
    <ul>
        <li v-for="node in nodes" :key="node.id" class="node_list">
            <div class="wapper">
                <div v-if="node.children && node.children.length > 0">
                    <div class="list_wapper" @click="toggleNode(node)">
                        <div class="tri_wapper">
                            <div class="tri_up" v-if="expandeNodes.includes(node.id)"></div>
                            <div class="tri_dowm" v-else></div>
                        </div>
                        <div class="ejTopic">
                            {{ node.topic }}
                            ({{ node.children ? node.children.length : '' }})

                        </div>

                    </div>
                </div>
                <div v-else>
                    <div class="">
                        <div class="list_wapper" @click="changeItems(node)">
                            <div class="tri_wapper">
                                <div class="tri_dowm" v-if="!node.id.includes('-2') && !node.isShow"></div>
                                <div class="tri_up" @click="closeItems(node)" v-if="!node.id.includes('-2') && node.isShow">
                                </div>
                            </div>

                            <div class="ejTopic lastTopic">
                                <div class="ejTopic_top">
                                    <div v-if="!node.id.includes('-2')" class="company-item-left bg-11c95f">
                                        <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                    </div>
                                    <span class="title_1">
                                        {{ node.topic ? node.topic.split('【')[0] : node.topic }}
                                        <van-tag color="rgb(231,249,239)" text-color="rgb(17,201,95)"
                                            v-if="!node.id.includes('-2')">{{
                                                node.status ? node.status.split('(')[0] : node.status }}</van-tag>
                                    </span>
                                    <span v-if="node.id.includes('-2')" class="title_1">
                                        ({{ node.children ? node.children.length : '' }})
                                    </span>
                                </div>
                            </div>

                        </div>
                        <ul>
                            <li v-for="item in node.lastNode" :key="item.id" class="">

                                <div class="">
                                    <div v-if="item.children && item.children.length > 0" class="111">
                                        <div class="list_wapper">
                                            <div class="tri_wapper">
                                                <div class="tri_up" v-if="lastExpandeNodes.includes(item.id)"
                                                    @click="toggleLastNode(item)"></div>
                                                <div class="tri_dowm" v-else @click="toggleLastNode(item)"></div>
                                            </div>

                                            <div class="ejTopic lastqyTopic">
                                                <div class="ejTopic_top">
                                                    <div class="company-item-left bg-11c95f">
                                                        <img name="wap-home" src="../../../images/part_one/icon_company.png"
                                                            alt="">
                                                    </div>
                                                    <span class="title_1">{{ item.topic ? item.topic.split('(')[0] :
                                                        item.topic
                                                    }}
                                                        <van-tag color="rgb(231,249,239)" text-color="rgb(17,201,95)">{{
                                                            item.status ? item.status.split('(')[0] : item.status
                                                        }}</van-tag>
                                                    </span>



                                                </div>
                                                <span class="title_2">{{
                                                    item.topic ? (item.topic.split('(')[1]).split(')')[0] : item.topic
                                                }}</span>
                                            </div>

                                        </div>
                                    </div>
                                    <div v-else>
                                        <div class="list_wapper last_list">

                                            <div class="ejTopic lastqyTopic">
                                                <div class="ejTopic_top">
                                                    <div class="company-item-left bg-ee8c15">
                                                        <img name="wap-home" src="../../../images/part_one/icon_company.png"
                                                            alt="">
                                                    </div>
                                                    <span class="title_1">{{ item.topic ? item.topic.split('(')[0] :
                                                        item.topic
                                                    }}
                                                        <van-tag color="rgb(231,249,239)" text-color="rgb(17,201,95)">{{
                                                            item.status ? item.status.split('(')[0] : item.status
                                                        }}</van-tag>
                                                    </span>



                                                </div>
                                                <span class="title_2">{{
                                                    item.topic ? (item.topic.split('(')[1]).split(')')[0] : item.topic
                                                }}</span>
                                            </div>
                                        </div>

                                    </div>
                                    <tree-node v-if="lastExpandeNodes.includes(item.id)" :nodes="item.children"></tree-node>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <tree-node v-if="expandeNodes.includes(node.id)" :nodes="node.children"></tree-node>
        </li>
        <van-popup v-model="dialogShow" :style="{ width: '300px', borderRadius: '8px' }">
            <div style="height: 40px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold">提示</div>
            <div style="padding: 12px 20px 20px;font-size: 14px;color: #666666;border-bottom: solid 1px #dddddd">
                该节点下无数据</div>
            <div @click="dialogShow = false"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
    </ul>
</template>
<script>
import { Icon, Search, Empty, Tag, List, TreeSelect } from 'vant';//button组件
import { getStockInvest } from "@/service/api/home";
export default {
    components: {
        VanIcon: Icon,
        VanTag: Tag,
    },
    name: 'TreeNode',
    props: {
        nodes: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            expandeNodes: [],
            lastNode: [],
            lastExpandeNodes: [],
            dialogShow: false
        }
    },
    methods: {
        toggleNode(node) {
            if (this.expandeNodes.includes(node.id)) {
                this.expandeNodes = this.expandeNodes.filter(id => id !== node.id)
            } else {
                this.expandeNodes.push(node.id)
            }
        },

        changeItems(node) {
            node.isShow = !node.isShow
            if (node.isShow) {

                this.initGetStockInvest(node)
            } else {
                node.lastNode = []
                node.isShow = false
            }
        },
        async initGetStockInvest(node) {
            const params = {
                //companyId: '1ed4720a6f8d63be65d6696f633d26d3'
                 companyId: node.id
            }
            let result = await getStockInvest(params);
            if (result) {
                if (result.length > 0) {
                    this.$set(node, 'lastNode', result)
                } else {
                    this.dialogShow = true
                    node.isShow = false
                }
            }
        },
        closeItems(node) {

        },
        toggleLastNode(item) {
            if (this.lastExpandeNodes.includes(item.id)) {
                this.lastExpandeNodes = this.lastExpandeNodes.filter(id => id !== item.id)
            } else {
                this.lastExpandeNodes.push(item.id)
            }
        },
    }
}
</script>
<style>
.node_list {
    width: 100%;
    padding: 10px 0 0 20px;
}

.list_wapper {
    display: flex;
    align-items: center;
}

.shu {
    width: 3px;

    background-color: #2372EB;
}

.bg-2372eb {
    background: #2372EB;
}

.bg-ee8c15 {
    background: #ee8c15;
}

.company-item-left {

    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-right: 10px;
}

.company-item-left img {
    width: 16px;
}

.ejTopic {
    margin-left: 5px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    line-height: 1.5rem;
    background-color: #fff;
    padding: 10px 10px;
}

.down {

    margin-left: 10px;
    color: #2372EB;
}

.last_list {
    margin-left: 20px;
    padding: 15px 0;
}

.last_shu {
    width: 3px;
    height: 12px;
    background-color: #2372EB;
}

.tri_dowm {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(89, 89, 89);
}

.tri_up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgb(89, 89, 89);
}

.title_1 {
    font-weight: 600;
    font-size: 14px;
}

.title_2 {
    font-size: 12px;
    margin-left: 36px;
}

.lastTopic {
    margin-left: 21px;
}

.lastqyTopic {
    margin-left: 2.8rem;
    width: 100%;
}

.ejTopic_top {
    display: flex;
}

.bg-11c95f {
    background: #11c95f;
}
</style>