<template>
    <div class="main_box">
        <!-- <navbar title="关联关系"></navbar> -->
        <div class="main">
            <!-- <div class="search-input">
                <van-search type="text" :left-icon="null" v-model="searchValue" placeholder="搜索客户号、客户名称" />
                <div class="search_btn">
                    <van-icon name="search"></van-icon>
                </div>
            </div> -->
            <div class="content">
                <div class="content_item" v-for="(item,index) in list" :key="index">
                    <div class="item_left">
                        <div class="left_icon_box">
                            <van-icon name="user"></van-icon>
                        </div>
                        <div class="left_main">
                            <div class="left_main_name">{{ item.name }}</div>
                            <div class="left_main_cstid">
                                <span>身份证号：</span>
                                <span>{{ item.custIdc }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="item_right">
                        <div class="item_right_box">持股比列：{{(item.percent)* 100}}%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getBusinessInfo } from "@/service/api/custome";
import {
    Icon, Button,
    Search,
} from 'vant';//button组件
export default {
    data() {
        return {
            searchValue: '',
            list:[],
        }
    },
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanButton: Button,
        VanSearch: Search,
    },
    created(){
        this.init()
    },
    methods:{
        init() {
            let custId = sessionStorage.getItem('custId')
            getBusinessInfo(custId).then(res => {
                if (res.code == 200) {
                    this.list = res.data.corporateShareholders
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
.main {
    // padding-top: 46px;
    // min-height: 100vh;
    font-size: 14px;
    // padding-bottom: 60px;
}
.search-input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.search_btn {
    background-color: rgb(24, 144, 255);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 20px;
}

/deep/ .van-search {
    width: 100%;
    padding: 5px 8px;
}
.content{
    margin-top: 15px;
 
}
.content_item{
    display: flex;
    justify-content: space-between;
    padding: 15px;
    margin-top: 5px;
    background-color: #fff;
}
.item_left{
    display: flex;
    align-items: center;
}
.left_icon_box{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(246, 249, 255);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(132, 172, 255);
}
.left_main_cstid{
    font-size: 12px;
    color: rgb(140, 140, 140);
    margin-top: 10px;
}
.left_main_name{
    font-size: 16px;
}
.item_right_box{
    background-color: rgb(253, 243, 231);
    color:rgb(238, 140, 21);
    padding: 5px 8px;
    font-size: 14px;
}
</style>