<template>
    <div class="wapper">
        <navbar title="查关系"></navbar>
        <div class="wrapper">
            <div class="box_top">
                <div class="company-middle-item-box">
                    <div class="company-middle-item mb-10">
                        <div class="company-item-left bg-2372eb" v-if="colorNum == 1">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-ee8c15" v-else-if="colorNum == 2">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-11c95f" v-else-if="colorNum == 3">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-e21183" v-else-if="colorNum == 4">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-fde809" v-else-if="colorNum == 5">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-17b9d7" v-else-if="colorNum == 6">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-db2c2c" v-else-if="colorNum == 7">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-9232db" v-else-if="colorNum == 8">
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-left bg-8c8c8c" v-else>
                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                        </div>
                        <div class="company-item-right">
                            <div class="company-item-right-title">{{ baseInfo.topic }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <van-tabs @change="tabChange()" v-model="activeTab" class="content">
                <van-tab v-for="(titleItem, index) in titleList" :title="titleItem" :key="index">
                    <div v-for="item in thirdList" :key="item.id" class="thirdList">
                        <div class="thirdList_wapper">
                            <div>
                                <div class="tri_dowm" v-if="!item.isShow"></div>
                                <div class="tri_up" v-if="item.isShow" @click="closeItems(item)"></div>
                            </div>
                            <div class="thirdList_top" @click="changeItems(item, titleItem)">
                                <div class="shu"></div>
                                <div>
                                    <div class="thirdList_top_item">
                                        <div class="company-item-left bg-2372eb">
                                            <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                        </div>
                                        <div class="topic">{{ item.topic.includes('(') ? item.topic.split('(')[0] : item.topic
                                        }}</div>
                                        <van-tag v-if="item.status != null" color="rgb(231,249,239)"
                                            text-color="rgb(17,201,95)">{{
                                                item.status ? item.status.split('(')[0] : item.status }}</van-tag>
                                    </div>
                                    <div class="title_first" v-if="item.topic.includes('(')">{{
                                        item.topic.includes('(') ? item.topic.split('(')[1] : item.topic }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="thirdList_bottom">
                            <tree-node :nodes="item.children"></tree-node>
                        </div>
                    </div>
                </van-tab>

            </van-tabs>
        </div>
        <van-popup v-model="dialogIsShow" :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="dialogIsShow = false"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
    </div>
</template>
<script>
import { Icon, Search, Empty, Tag, List, TreeSelect, Loading } from 'vant';//button组件
import navbar from '../../../components/navbar/navbar.vue';
import { getRelationshipDetail, getStockRelation, getStockInvest } from "@/service/api/home";
import TreeNode from './TreeNode.vue'
export default {
    components: {
        VanIcon: Icon,
        VanSearch: Search,
        navbar: navbar,
        VanTag: Tag,
        VanEmpty: Empty,
        VanList: List,
        VanTreeSelect: TreeSelect,
        TreeNode: TreeNode,
        VanLoading: Loading
    },
    data() {
        return {
            activeTab: '0',
            titleList: [],
            colorNum: 1,
            companyId: '',
            baseInfo: {},
            thirdArr: [],
            thirdList: [],
            mainActiveIndex: 0,
            activeId: [],
            treeData: [],
            legalCode: '',
            tabName: '',
            dialogIsShow: false,

        }
    },
    mounted() {
        // 初始化

        this.companyId = sessionStorage.getItem('getDetailsId');
        this.initData()
    },
    methods: {

        async initData() {
            let params = {
               // companyId: '1ed4720a6f8d63be65d6696f633d26d3',
                companyId:this.companyId,
                branchFlag: '1',
                investinFlag: '1',
                managerFlag: '1',
                operNameFlag: '1',
                partnerFlag: '1'
            }
            let result = await getRelationshipDetail(params);
            if (result) {
                this.baseInfo = result
                this.legalCode = result.id
                this.titleList = result.children.map(item => {
                    return item.topic
                })
                this.thirdArr = result.children.map(item => {
                    return item.children
                })
                this.thirdList = this.thirdArr[0]
            }
        },
        tabChange(title, event) {
            if (this.activeTab == 0) {
                this.thirdList = this.thirdArr[0]
            } else if (this.activeTab == 1) {
                this.thirdList = this.thirdArr[1]
            } else if (this.activeTab == 2) {
                this.thirdList = this.thirdArr[2]
            } else if (this.activeTab == 3) {
                this.thirdList = this.thirdArr[3]
            } else if (this.activeTab == 4) {
                this.thirdList = this.thirdArr[4]
            } else if (this.activeTab == 5) {
                this.thirdList = this.thirdArr[5]
            }
        },

        changeItems(items, titleItem) {
            items.isShow = !items.isShow
            if (items.isShow) {
                if (titleItem == '法人(家庭)及其关联企业') {
                    this.initStockRelation(items)
                } else if (titleItem == '股东及其关联企业') {
                    let idArr = items.id.split(':')
                    let idTwo = idArr[1]
                    if (idTwo == '自然人股东') {
                        this.initStockRelation(items)
                    } else {
                        this.initGetStockInvest(items)
                    }
                } else {
                    this.initGetStockInvest(items)
                }
            } else {
                this.thirdList.forEach(item => {
                    if (item.topic == items.topic) {
                        item.children = []
                        item.isShow = false
                    }
                })
            }

        },
        closeItems(items) {


        },
        async initStockRelation(items) {
            let id = ''
            if (items.id.includes(':')) {
                let idArr = items.id.split(':')
                id = idArr[0]
            } else {
                id = items.id
            }
            const params = {
                 creditCode: this.legalCode,
                 pKeyNo: id,
                // creditCode: '91330500MA2B7224XP',
                // pKeyNo: '115473697df79b2aeaad18669e8fbb1e'
            }
            let result = await getStockRelation(params);
            if (result) {
                this.treeData = result
                this.thirdList.forEach(item => {
                    if (item.topic == items.topic) {

                        if (result.length > 0) {
                            item.children = result
                            // item.isShow = !item.isShow
                        } else {
                            this.dialogIsShow = true
                            item.isShow = false
                        }
                    }
                })
            }
        },
        async initGetStockInvest(items) {
            let id = ''
            if (items.id.includes(':')) {
                let idArr = items.id.split(':')
                id = idArr[0]
            } else {
                id = items.id
            }
            const params = {
                companyId: id
            }
            let result = await getStockInvest(params);
            if (result) {
                this.treeData = result
                this.thirdList.forEach(item => {
                    if (item.topic == items.topic) {
                        if (result.length > 0) {
                            item.children = result
                            // item.isShow = !item.isShow
                        } else {
                            this.dialogIsShow = true
                            item.isShow = false
                        }

                    }
                })
            }
        },
    }
}
</script>
<style scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    background: #f7f7f7;
}

.box_top {
    background-color: #fff;
    z-index: 9;
    position: sticky;
    top: 46px;
    padding-bottom: 10px;
    width: 100%;
}

.company-middle-item-box {
    background: #ffffff;
    padding: 10px 16px;
    border-bottom: solid 1px #e0e0e0;
}

.company-middle-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.company-item-left {
    width: 26px;
    height: 26px;
    background: #2372eb;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-left: 10px;
}

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

.mb-10 {
    margin-bottom: 10px;
}

.company-item-right {
    width: calc(100% - 36px);
    font-size: 0.8rem;
}

.company-item-right-title {
    font-size: 1.2rem;
    font-weight: bold;
}

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

.bg-ee8c15 {
    background: #ee8c15;
}

.bg-11c95f {
    background: #11c95f;
}

.bg-e21183 {
    background: #e21183;
}

.bg-fde809 {
    background: #fde809;
}

.bg-17b9d7 {
    background: #17b9d7;
}

.bg-db2c2c {
    background: #db2c2c;
}

.bg-9232db {
    background: #9232db;
}

.bg-8c8c8c {
    background: #8c8c8c;
}

.thirdList {
    width: 100%;
    padding: 20px 10px 10px 10px;

}

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

.thirdList_top {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 0.5rem 0;
    background-color: #fff;
    flex: 1;
    margin-left: 10px;
}

.shu {
    width: 3px;

    background-color: #2372EB;
}

.title_first {
    margin-left: 44px;
    font-size: 12px;
}

.topic {
    font-size: 16px;
    font-weight: 600;
    line-height: 2rem;
}

.down {
    line-height: 3rem;

    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);
}

.thirdList_top_item {
    display: flex;
}</style>