<template>
    <div>
        <navbar title="信用详情"></navbar>
        <div class="wrapper">

            <div class="company-middle-item-box">
                <div class='box_top'>
                    <div class="title-top">
                        <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.entName }}</div>
                            </div>
                        </div>
                        <div class="mb-10" v-if="ent9vScoreAll !=null">
                            <van-tag color="#fce9e9" text-color="#db2f2f" v-if="ent9vScoreAll < 20">九维分:{{ ent9vScoreAll
                            }}</van-tag>
                            <van-tag color="rgb(231,249,239)" text-color="rgb(17,201,95)"
                                v-else-if="ent9vScoreAll > 175">九维分:{{ ent9vScoreAll }}</van-tag>
                            <van-tag color="rgb(253,243,231)" text-color="rgb(238,140,21)" v-else>九维分:{{ ent9vScoreAll
                            }}</van-tag>
                            <van-icon name="question-o ml-10" @click="openDialog()" />
                        </div>
                    </div>
                    <div class='title_date'>
                        <span>报告查询时间：</span>
                        <span>{{ baseInfo.entCreditLastsearchTime }}</span>
                    </div>
                </div>

                <van-tabs @change="tabChange()" v-model="activeTab">
                    <van-tab title="授用信情况">
                        <div class="tab-content-box">
                            <van-collapse v-model="activeCollapse">
                                <van-collapse-item name="1" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>当前授用信情况
                                        </div>
                                    </template>
                                    <van-row gutter="10">
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">当前授信金额</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="color:#1989fa;font-size:25px">{{ baseInfo.dcLmtOfCrCurrAmt
                                                        ?
                                                        baseInfo.dcLmtOfCrCurrAmt : '--'
                                                    }}</span>
                                                    <span>万元</span>
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">当前用信余额</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="color:#ee8c15;font-size:25px">{{
                                                        baseInfo.dcTotCurrAmt ? baseInfo.dcTotCurrAmt : '--'
                                                    }}</span>
                                                    <span>万元</span>
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="24" class="">
                                            <div class="card-box">
                                                <div class="mb-4">当前授信额度使用率</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="font-size:25px">{{
                                                        baseInfo.dcCrUseCurrRt ? baseInfo.dcCrUseCurrRt : '--' }}</span>
                                                    <span>%</span>
                                                </div>
                                            </div>
                                        </van-col>
                                    </van-row>
                                </van-collapse-item>
                                <van-collapse-item name="2" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>近3年授、用信情况
                                        </div>
                                    </template>
                                    <van-row>
                                        <van-col span="24" class="mb-10">
                                            <div id="tabFirstOne" style="width: 350px;height: 300px;margin-bottom: 20px">
                                            </div>
                                        </van-col>
                                    </van-row>
                                </van-collapse-item>
                            </van-collapse>
                        </div>
                    </van-tab>
                    <van-tab title="不良信息">
                        <div class="tab-content-box">
                            <van-collapse v-model="activeCollapse">
                                <van-collapse-item name="3" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>关注、不良、逾期
                                        </div>
                                    </template>
                                    <van-row gutter="10">
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">全部负债账户数</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="font-size:25px">{{
                                                        baseInfo.debTotAccCnt ? baseInfo.debTotAccCnt : '--' }}</span>
                                                    <span>个</span>
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">关注类负债账户数</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="font-size:25px">{{
                                                        baseInfo.debAttAccCnt ? baseInfo.debAttAccCnt : '--' }}</span>
                                                    <span>个</span>
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">不良类负债账户数</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="font-size:25px">{{
                                                        baseInfo.debBadAccCnt ? baseInfo.debBadAccCnt : '--' }}</span>
                                                    <span>个</span>
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">逾期账户数</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="font-size:25px">{{
                                                        baseInfo.debBodAccCnt ? baseInfo.debBodAccCnt : '--' }}</span>
                                                    <span>个</span>
                                                </div>
                                            </div>
                                        </van-col>
                                    </van-row>
                                    <van-row gutter="10" class="balance_box">
                                        <van-col span="16" class="mb-10 all_title">全部负债余额</van-col>
                                        <van-col span="8" class="mb-10 all_title all_title_right">{{ baseInfo.debTotAccBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10 balance_top">
                                            <div class='yd' style="color:#1989fa;">•</div>
                                            <div>关注类负债余额{{ baseInfo.debAttAccBalRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.debAttAccBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10  balance_top">
                                            <div class='yd' style="color:#ee8c15;">•</div>
                                            <div>不良负债类余额{{ baseInfo.debBadAccBalRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.debBadAccBal
                                        }}万元</van-col>
                                    </van-row>
                                    <!-- <van-progress :percentage="50" :show-pivot=false stroke-width="10"
                                        color="#ee8c15">
                                    </van-progress> -->
                                    <div class="bzt_box">
                                        <div class="lsbzt_box" :style="{ width: lsbztWidth + '%' }"></div>
                                        <div class="hsbzt_box" :style="{ width: hsbztWidth + '%' }"></div>
                                    </div>
                                    <van-row gutter="10" class="balance_box">
                                        <van-col span="16" class="mb-10 all_title">逾期总额</van-col>
                                        <van-col span="8" class="mb-10 all_title all_title_right">{{ baseInfo.debBodAccBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10 balance_top">
                                            <div class='yd' style="color:#58a55d;">•</div>
                                            <div>逾期本金{{ baseInfo.debBodCorAccRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.debBodCorAccBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-progress
                                        :percentage="baseInfo.debBodCorAccRt * 100 > 100 ? 100 : baseInfo.debBodCorAccRt * 100"
                                        :show-pivot=false stroke-width="10" color="#58a55d"></van-progress>

                                    <van-row gutter="10" class="balance_box">
                                        <van-col span="16" class="mb-10 all_title">担保交易余额</van-col>
                                        <van-col span="8" class="mb-10 all_title all_title_right">{{ baseInfo.loaGuaBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10 balance_top">
                                            <div class='yd' style="color:#1989fa;">•</div>
                                            <div>关注类担保交易余额{{ baseInfo.loaSpcMentGuaRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.loaSpcMentGuaBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10  balance_top">
                                            <div class='yd' style="color:#ee8c15;">•</div>
                                            <div>不良类担保交易余额{{ baseInfo.loaBadGuaRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.loaBadGuaBal
                                        }}万元</van-col>
                                    </van-row>
                                    <div class="bzt_box">
                                        <div class="lsbzt_box" :style="{ width: gzbztWidth + '%' }"></div>
                                        <div class="hsbzt_box" :style="{ width: blbztWidth + '%' }"></div>
                                    </div>
                                </van-collapse-item>
                                <van-collapse-item name="4" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>被追偿及垫款
                                        </div>
                                    </template>
                                    <van-row gutter="10">
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">被追偿金额</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="color:#1989fa;font-size:25px">{{
                                                        baseInfo.loaRcvrBal ? baseInfo.loaRcvrBal : '--'
                                                    }}</span>
                                                    <span>万元</span>
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="12" class="mb-10">
                                            <div class="card-box">
                                                <div class="mb-4">垫款金额</div>
                                                <div class="font-size-20 font-weight-bold">
                                                    <span style="color:#1989fa;font-size:25px">{{
                                                        baseInfo.loaUnclrTobepayBal ? baseInfo.loaUnclrTobepayBal : '--'
                                                    }}</span>
                                                    <span>万元</span>
                                                </div>
                                            </div>
                                        </van-col>
                                    </van-row>
                                </van-collapse-item>
                            </van-collapse>
                        </div>
                    </van-tab>
                    <van-tab title="未结清借贷">
                        <div class="tab-content-box">
                            <van-collapse v-model="activeCollapse">
                                <van-collapse-item name="5" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>未结清借贷交易明细
                                        </div>
                                    </template>
                                    <div>共<span style="color:red">{{ this.borrowList.length }}</span>条借据明细信息</div>
                                    <div>
                                        <div class="dkmxWapper" v-if="borrowList.length > 0">
                                            <div class="card-box mb-16" v-for="(item, index) in borrowList" :key="index"
                                                @click='goBorrowDetail(item)'>
                                                <div class="company-middle-item mb-10">
                                                    <van-tag class="mr-6" color="#17b9d7"
                                                        v-if="item.creditCateg == '贷款'">业务种类：{{
                                                            item.creditCateg }}</van-tag>
                                                    <van-tag class="mr-6" color="rgb(238,140,21)"
                                                        v-if="item.creditCateg == '贸易融资'">业务种类：{{ item.creditCateg
                                                        }}</van-tag>
                                                    <van-tag class="mr-6" color="rgb(88,165,93)"
                                                        v-if="item.creditCateg == '票据融资'">业务种类：{{ item.creditCateg
                                                        }}</van-tag>
                                                    <van-tag class="mr-6" color="#f7ede3" text-color="#ef9121">{{
                                                        item.assureType
                                                    }}</van-tag>
                                                </div>
                                                <div class="company-middle-item mb-4 font-size-16">
                                                    <div class="font-weight-bold">{{ item.loanOrg }}</div>
                                                    <div class="font-weight-bold">{{ item.loanBalance }}万元</div>
                                                </div>
                                                <div class="company-middle-item mb-4">
                                                    <div class="color-999999">
                                                        <span>到期时间：{{ item.endDate }}</span>
                                                        <van-tag :plain='true' type='success'
                                                            v-if="item.loan5cls == '1'||item.loan5cls == '9'">正常</van-tag>
                                                        <van-tag :plain='true' color="rgb(35,114,235)"
                                                            text-color="rgb(35,114,235)"
                                                            v-if="item.loan5cls == '2'||item.loan5cls == '7'||item.loan5cls == '8'">关注</van-tag>
                                                        <van-tag :plain='true' type='danger'
                                                            v-if="item.loan5cls == '3'||item.loan5cls == '6'">次级</van-tag>
                                                        <van-tag :plain='true' type='danger'
                                                            v-if="item.loan5cls == '4'">可疑</van-tag>
                                                        <van-tag :plain='true' type='danger'
                                                            v-if="item.loan5cls == '5'">损失</van-tag>
                                                    </div>
                                                    <div class="color-999999">借贷交易余额</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-top: 10px" v-else>
                                            <van-empty />
                                        </div>
                                    </div>


                                </van-collapse-item>
                                <van-collapse-item name="6" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>借贷交易机构
                                        </div>
                                    </template>
                                    <div class="shu_title">
                                        <div class="shu"></div>
                                        <div class="all_title">按担保方式</div>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行信用借贷交易额{{ baseInfo.loaCreditBorlenObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{
                                                baseInfo.loaCreditBorlenObankBal }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaCreditBorlenObankBalPro * 100 > 100 ? 100 : baseInfo.loaCreditBorlenObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="red"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行保证借贷交易余额{{ baseInfo.loaPromisBorlenObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{
                                                baseInfo.loaPromisBorlenObankBal }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaPromisBorlenObankBalPro * 100 > 100 ? 100 : baseInfo.loaPromisBorlenObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#ee8c15"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行质押借贷交易余额{{ baseInfo.loaPledgeBorlenObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{
                                                baseInfo.loaPledgeBorlenObankBal }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaPledgeBorlenObankBalPro * 100 > 100 ? 100 : baseInfo.loaPledgeBorlenObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#58a55d"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行抵押借贷交易余额{{ baseInfo.loaMortgageBorlenObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{
                                                baseInfo.loaMortgageBorlenObankBal }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaMortgageBorlenObankBalPro * 100 > 100 ? 100 : baseInfo.loaMortgageBorlenObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#5087ec"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行组合借贷交易余额{{ baseInfo.loaCombBorlenObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{
                                                baseInfo.loaCombBorlenObankBal }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaCombBorlenObankBalPro * 100 > 100 ? 100 : baseInfo.loaCombBorlenObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#rgb(23,185,215)"></van-progress>
                                    </div>
                                    <div class="shu_title db_box">
                                        <div class="shu"></div>
                                        <div class="all_title">按业务种类</div>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行贷款余额{{ baseInfo.loaObankObankBal * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.loaObankBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaObankObankBal * 100 > 100 ? 100 : baseInfo.loaObankObankBal * 100"
                                            :show-pivot=false stroke-width="5" color="red"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行贸易融余额{{ baseInfo.loaTraFinanObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.loaTraFinanObankBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaTraFinanObankBalPro * 100 > 100 ? 100 : baseInfo.loaTraFinanObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#ee8c15"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行票据贴现余额{{ baseInfo.loaBilldisObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.loaBilldisObankBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaBilldisObankBalPro * 100 > 100 ? 100 : baseInfo.loaBilldisObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#58a55d"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>他行其他余额{{ baseInfo.loaOborlenObankBalPro * 100 }}%</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ baseInfo.loaOborlenObankBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="baseInfo.loaOborlenObankBalPro * 100 > 100 ? 100 : baseInfo.loaOborlenObankBalPro * 100"
                                            :show-pivot=false stroke-width="5" color="#5087ec"></van-progress>
                                    </div>
                                </van-collapse-item>
                                <van-collapse-item name="7" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>应还推算<van-icon name="question-o ml-10"
                                                @click.self="tsDialog()" />
                                        </div>
                                    </template>
                                    <div class="third_year">未来3年</div>
                                    <div class="shu_title db_box list_font">
                                        <van-row gutter="24" class="">
                                            <van-col span="6">还款年份</van-col>
                                            <van-col span="9">借款到期金额(万元)</van-col>
                                            <van-col span="9">敞口到期金额(万元)</van-col>
                                        </van-row>
                                    </div>
                                    <div class="data_box ">
                                        <van-row gutter="24" class="">
                                            <van-col span="6">{{ nowYear }}年</van-col>
                                            <van-col span="9">{{ baseInfo.loaCuryearBal }}</van-col>
                                            <van-col span="9">{{ baseInfo.exposCuryearBal }}</van-col>
                                        </van-row>
                                    </div>
                                    <div class="data_box ">
                                        <van-row gutter="24" class="">
                                            <van-col span="6">{{ nextYear }}年</van-col>
                                            <van-col span="9">{{ baseInfo.loaNextyearBal }}</van-col>
                                            <van-col span="9">{{ baseInfo.exposNextyearBal }}</van-col>
                                        </van-row>
                                    </div>
                                    <div class="data_box ">
                                        <van-row gutter="24" class="">
                                            <van-col span="6">{{ lastYear }}年</van-col>
                                            <van-col span="9">{{ baseInfo.loaAfternextyearBal }}</van-col>
                                            <van-col span="9">{{ baseInfo.exposAfternextyearBal }}</van-col>
                                        </van-row>
                                    </div>
                                </van-collapse-item>
                            </van-collapse>
                        </div>
                    </van-tab>
                    <van-tab title="对外担保">
                        <div class="tab-content-box">
                            <van-collapse v-model="activeCollapse">
                                <van-collapse-item name="8" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>对外担保概况<van-icon name="question-o ml-10"
                                                @click="colTotDialog()" />
                                        </div>
                                    </template>
                                    <van-row gutter="10" class="balance_box">
                                        <van-col span="16" class="mb-10 all_title">对外担保总额</van-col>
                                        <van-col span="8" class="mb-10 all_title all_title_right">{{
                                            guaranteeInfo.colTotZhyeBal }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10 balance_top">
                                            <div class='yd' style="color:#1989fa;">•</div>
                                            <div>对外担保关注金额{{ guaranteeInfo.colTotZhyeGzOthAmtPsctRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colTotZhyeGzOthBal
                                        }}万元</van-col>
                                    </van-row>
                                    <van-row gutter="10" style="color:#000">
                                        <van-col span="16" class="mb-10  balance_top">
                                            <div class='yd' style="color:#ee8c15;">•</div>
                                            <div>对外担保不良金额{{ guaranteeInfo.colTotZhyeBlOthAmtPsctRt * 100 }}%</div>
                                        </van-col>
                                        <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colTotZhyeBlOthBal
                                        }}万元</van-col>
                                    </van-row>
                                    <div class="bzt_box">
                                        <div class="lsbzt_box" :style="{ width: dbgzbztWidth + '%' }"></div>
                                        <div class="hsbzt_box" :style="{ width: dbblbztWidth + '%' }"></div>
                                    </div>
                                </van-collapse-item>
                                <van-collapse-item name="9" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>对外担保结构
                                        </div>
                                    </template>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>共同债务余额汇总</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{
                                                guaranteeInfo.colJntDbtZhyeBal }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="colJntDbtZhyeBalProgress * 100 > 100 ? 100 : colJntDbtZhyeBalProgress * 100"
                                            :show-pivot=false stroke-width="10" color="#5087ec"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>保证人余额汇总</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colBilZhyeBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="colBilZhyeBalProgress * 100 > 100 ? 100 : colBilZhyeBalProgress * 100"
                                            :show-pivot=false stroke-width="10" color="#5087ec"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>票据承兑人余额汇总</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colBtrZhyeBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="colBtrZhyeBalProgress * 100 > 100 ? 100 : colBtrZhyeBalProgress * 100"
                                            :show-pivot=false stroke-width="10" color="#5087ec"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>应收账款债务人余额汇总</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colDarZhyeBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="colDarZhyeBalProgress * 100 > 100 ? 100 : colDarZhyeBalProgress * 100"
                                            :show-pivot=false stroke-width="10" color="#5087ec"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>供应链中核心企业余额汇总</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colCescZhyeBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="colCescZhyeBalProgress * 100 > 100 ? 100 : colCescZhyeBalProgress * 100"
                                            :show-pivot=false stroke-width="10" color="#5087ec"></van-progress>
                                    </div>
                                    <div class="db_box">
                                        <van-row gutter="10" style="color:#000">
                                            <van-col span="16" class="mb-10 balance_top">
                                                <div>其他余额汇总</div>
                                            </van-col>
                                            <van-col span="8" class="mb-10 all_title_right">{{ guaranteeInfo.colQitaZhyeBal
                                            }}万元</van-col>
                                        </van-row>
                                        <van-progress
                                            :percentage="colQitaZhyeBalProgress * 100 > 100 ? 100 : colQitaZhyeBalProgress * 100"
                                            :show-pivot=false stroke-width="10" color="#5087ec"></van-progress>
                                    </div>
                                </van-collapse-item>
                                <van-collapse-item name="10" class="mb-10">
                                    <template #title>
                                        <div class="title-box">
                                            <div class="title-logo"></div>对外担保明细
                                        </div>
                                    </template>
                                    <div>
                                        <div class="dbmx" v-if="guaranteeList.length > 0">
                                            <div class="card-box mb-16" v-for="(item, index) in guaranteeList" :key="index">
                                                <div class="company-middle-item mb-10">
                                                    <van-tag class="mr-6 w-50" color="rgb(238,140,21)"
                                                        v-if="item.relarepayType == 1">相关还款责任类型：个人信贷交易共同还款人/共同债务人</van-tag>
                                                    <van-tag class="mr-6 w-50" color="rgb(88,165,93)"
                                                        v-if="item.relarepayType == 2">相关还款责任类型：保证人/反担保人</van-tag>
                                                    <van-tag class="mr-6 w-50" color="rgb(238,140,21)"
                                                        v-if="item.relarepayType == 3">相关还款责任类型：票据承兑人</van-tag>
                                                    <van-tag class="mr-6 w-50" color="rgb(88,165,93)"
                                                        v-if="item.relarepayType == 4">相关还款责任类型：应收账款债务人</van-tag>
                                                    <van-tag class="mr-6 w-50" color="#17b9d7"
                                                        v-if="item.relarepayType == 5">相关还款责任类型：供应链中核心企业</van-tag>
                                                    <van-tag class="mr-6 w-50" color="rgb(238,140,21)"
                                                        v-if="item.relarepayType == 9">相关还款责任类型：其他</van-tag>
                                                    <van-tag class="mr-6 w-50" color="#17b9d7"
                                                        v-if="item.relarepayType == 0">相关还款责任类型：合计</van-tag>
                                                </div>
                                                <div class="company-middle-item mb-4 font-size-16">
                                                    <div class="font-weight-bold">{{ item.entName }}</div>
                                                    <div class="font-weight-bold">{{ item.relarepayAmt }}万元</div>
                                                </div>
                                                <div class="company-middle-item mb-4">
                                                    <div class="color-999999">
                                                        <span>到期日期：</span>
                                                        <van-tag :plain='true' type='success'
                                                            v-if="item.credit5cls == '0'">正常</van-tag>
                                                        <van-tag :plain='true' color="rgb(35,114,235)"
                                                            text-color="rgb(35,114,235)"
                                                            v-if="item.credit5cls == '1'">关注</van-tag>
                                                        <van-tag :plain='true' type='danger'
                                                            v-if="item.credit5cls == '2'">次级</van-tag>
                                                        <van-tag :plain='true' type='danger'
                                                            v-if="item.credit5cls == '3'">可疑</van-tag>
                                                        <van-tag :plain='true' type='danger'
                                                            v-if="item.credit5cls == '4'">损失</van-tag>
                                                    </div>
                                                    <div class="color-999999">相关还款责任金额</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div style="margin-top: 10px" v-else>
                                            <van-empty />
                                        </div>
                                    </div>

                                </van-collapse-item>
                            </van-collapse>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <van-popup v-model="colTotShow" :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="colTotShow = false"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
        <van-popup v-model="tsShow" :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">
                在未结清借贷交易明细的基础上根据到期日测算未来3年到期余额。</div>
            <div @click="tsShow = false"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
        <van-popup v-model="nightDialogIsShow" :style="{ width: '300px', borderRadius: '8px' }">
            <div style="height: 40px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold">九维分</div>
            <div class='night_box'>九维分取金综九维评分：</div>
            <div class='night_box'>175分(含)以上为优,占比约20%。</div>
            <div class='night_box'>25(含)-175(不含)为良,占比22%。</div>
            <div class='night_box'>20(含)-25(不含)为中,占比55%。</div>
            <div class='night_box' style="border-bottom: solid 1px #dddddd">20分以下为差,占比约2.5%。</div>
            <div @click="nightDialogIsShow = false"
                style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
        </van-popup>
    </div>
</template>
<script>
import { ref } from 'vue';
import navbar from '../../../components/navbar/navbar.vue';
import { getCreditFeature, getBorrowList, getGuaranteeInfo, getGuaranteeList } from "@/service/api/home";
import * as echarts from 'echarts'
import {
    Icon,
    Search,
    DropdownMenu,
    DropdownItem,
    Area,
    Picker,
    Button,
    Col,
    Row,
    Sidebar,
    SidebarItem,
    Field,
    Tag,
    Empty,
    Toast, Popup,
    Collapse, CollapseItem, Progress,
    ActionSheet, RadioGroup, Radio
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanSearch: Search,
        VanDropdownMenu: DropdownMenu,
        VanDropdownItem: DropdownItem,
        VanArea: Area,
        VanPicker: Picker,
        VanButton: Button,
        VanCol: Col,
        VanRow: Row,
        VanSidebar: Sidebar,
        VanSidebarItem: SidebarItem,
        VanField: Field,
        VanTag: Tag,
        VanEmpty: Empty,
        VanPopup: Popup,
        VanActionSheet: ActionSheet,
        VanRadioGroup: RadioGroup,
        VanRadio: Radio,
        VanCollapse: Collapse,
        VanCollapseItem: CollapseItem,
        VanProgress: Progress,
    },
    data() {
        return {
            activeTab: '0',
            nightDialogIsShow: false,
            activeCollapse: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            dataList: [
                { date: '2024年', credit: '1500', open: '1000' },
                { date: '2025年', credit: '1500', open: '1000' },
                { date: '2026年', credit: '1500', open: '1000' },
            ],
            baseInfo: {
                entName: '',
                entCreditLastsearchTime: '',
                dcLmtOfCrCurrAmt: '',
                dcTotCurrAmt: '',
                dcCrUseCurrRt: '',
                debTotAccCnt: '',
                debAttAccCnt: '',
                debBadAccCnt: '',
                debBodAccCnt: '',
                debTotAccBal: '',
                debAttAccBal: '',
                debAttAccBalRt: '',
                debBadAccBalRt: '',
                debBadAccBal: '',
                debBodAccBal: '',
                debBodCorAccRt: '',
                debBodCorAccBal: '',
                loaGuaBal: '',
                loaSpcMentGuaRt: '',
                loaSpcMentGuaBal: '',
                loaBadGuaRt: '',
                loaBadGuaBal: '',
                loaCreditBorlenObankBalPro: '',
                loaCreditBorlenObankBal: '',
                loaPromisBorlenObankBalPro: '',
                loaPromisBorlenObankBal: '',
                loaPledgeBorlenObankBalPro: '',
                loaPledgeBorlenObankBal: '',
                loaMortgageBorlenObankBalPro: '',
                loaMortgageBorlenObankBal: '',
                loaCombBorlenObankBalPro: '',
                loaCombBorlenObankBal: '',
                loaObankObankBal: '',
                loaObankBal: '',
                loaTraFinanObankBalPro: '',
                loaTraFinanObankBal: '',
                loaBilldisObankBalPro: '',
                loaBilldisObankBal: '',
                loaOborlenObankBalPro: '',
                loaOborlenObankBal: '',
                loaCuryearBal: '',
                exposCuryearBal: '',
                loaNextyearBal: '',
                exposNextyearBal: '',
                loaAfternextyearBal: '',
                exposAfternextyearBal: '',
            },
            borrowList: [],
            nowYear: '',
            nextYear: '',
            lastYear: '',
            guaranteeInfo: {
                colTotZhyeBal: '',
                colTotZhyeGzOthAmtPsctRt: '',
                colTotZhyeGzOthBal: '',
                colTotZhyeBlOthAmtPsctRt: '',
                colTotZhyeBlOthBal: '',
                colJntDbtZhyeBal: '',
                colBilZhyeBal: '',
                colBtrZhyeBal: '',
                colDarZhyeBal: '',
                colCescZhyeBal: '',
                colQitaZhyeBal: '',
            },
            colJntDbtZhyeBalProgress: '',
            colBilZhyeBalProgress: '',
            colBtrZhyeBalProgress: '',
            colDarZhyeBalProgress: '',
            colCescZhyeBalProgress: '',
            colQitaZhyeBalProgress: '',
            guaranteeList: [],
            colTotShow: false,
            tsShow: false,
            lsbztWidth: '0',
            hsbztWidth: '0',
            gzbztWidth: '0',
            blbztWidth: '0',
            dbgzbztWidth: '0',
            dbblbztWidth: '0',
            ent9vScoreAll: '',
            colorNum: ''
        }
    },
    mounted() {
        this.init()
        this.ent9vScoreAll = sessionStorage.getItem('ent9vScoreAll')
        this.colorNum = sessionStorage.getItem('colorNum')

    },
    destroyed(){
        sessionStorage.removeItem('ent9vScoreAll');
    },
    methods: {
        async init() {
            let uniscid = sessionStorage.getItem('creditCode')
            let result = await getCreditFeature(uniscid);
            if (result) {
                this.baseInfo = result
                this.lsbztWidth = result.debAttAccBalRt * 100
                this.hsbztWidth = result.debBadAccBalRt * 100
                this.gzbztWidth = result.loaSpcMentGuaRt * 100
                this.blbztWidth = result.loaBadGuaRt * 100

                let dcLmtList = [result.agrPreyearAmt, result.agrLastyearAmt, result.dcLmtOfCrCurrAmt]
                let dcList = [result.agrUsedPreyearAmt, result.agrUsedLastyearAmt, result.dcTotCurrAmt]
                let useList = [result.agrUsedPreyearRt, result.agrUsedLastyearRt, result.dcCrUseCurrRt]
                this.drawChartFirstOne(dcLmtList, dcList, useList)
            }
        },
        async initBorrowList() {
            let uniscid = sessionStorage.getItem('creditCode')
            let result = await getBorrowList(uniscid);
            if (result) {
                this.borrowList = result
                // console.log(this.borrowList, 'this.borrowList')
            }
        },
        openDialog() {
            this.nightDialogIsShow = true
        },

        async initGuaranteeInfo() {
            let uniscid = sessionStorage.getItem('creditCode')
            let result = await getGuaranteeInfo(uniscid);
            if (result) {
                this.guaranteeInfo = result
                this.dbgzbztWidth = result.colTotZhyeGzOthAmtPsctRt * 100
                this.dbblbztWidth = result.colTotZhyeBlOthAmtPsctRt * 100
                this.colJntDbtZhyeBalProgress = result.colJntDbtZhyeBal / result.colTotZhyeBal
                this.colBilZhyeBalProgress = result.colBilZhyeBal / result.colTotZhyeBal
                this.colBtrZhyeBalProgress = result.colBtrZhyeBal / result.colTotZhyeBal
                this.colDarZhyeBalProgress = result.colDarZhyeBal / result.colTotZhyeBal
                this.colCescZhyeBalProgress = result.colCescZhyeBal / result.colTotZhyeBal
                this.colQitaZhyeBalProgress = result.colQitaZhyeBal / result.colTotZhyeBal
            }
        },

        async initgetGuaranteeList() {
            let uniscid = sessionStorage.getItem('creditCode')
            let result = await getGuaranteeList(uniscid);
            if (result) {
                this.guaranteeList = result
            }
        },
        tabChange() {
            if (this.activeTab == '2') {
                this.initBorrowList()
                let today = new Date()
                this.nowYear = today.getFullYear()
                this.nextYear = today.getFullYear() + 1
                this.lastYear = today.getFullYear() + 2
            } else if (this.activeTab == '3') {
                this.initGuaranteeInfo()
                this.initgetGuaranteeList()
            }
        },
        goBorrowDetail(item) {
            sessionStorage.setItem('detailsParams', JSON.stringify(item));
            this.$router.push('/OneCheckdetail');
        },
        colTotDialog() {
            this.colTotShow = true
        },
        tsDialog() {
            this.tsShow = true
        },
        drawChartFirstOne(dcLmtList, dcList, useList) {
            let myChart = echarts.init(document.getElementById('tabFirstOne'));

            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '12%',
                    containLabel: true
                },
                legend: {
                    top: 'bottom',
                    icon: 'circle',
                    data: ['总信用额度', '借款金额', '使用率']
                },
                xAxis: [
                    { type: 'category', data: ['近36个月', '近24个月', '近12个月'] }
                ],
                yAxis: [{ type: 'value', }, { type: 'value', }],
                series: [
                    { name: '总信用额度', type: 'bar', data: dcLmtList, barWidth: 20, color: '#5087ec' },
                    { name: '借款金额', type: 'bar', data: dcList, barWidth: 20, color: '#ee8c15' },
                    { name: '使用率', type: 'line', smooth: true, data: useList, color: '#58a55d' },
                ]
            };
            myChart.setOption(option);
        },
    }
}
</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;
    flex: 1
}

.flex-space-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

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

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

.title-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}

.title-box-small {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.title-logo {
    width: 3px;
    height: 14px;
    background: #1989fa;
    margin-right: 6px;
}

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

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

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

.mr-6 {
    margin-right: 6px;
}

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

.w-50 {
    width: 55%;
}

.ml-10 {
    margin-left: 10px;
}

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

.title-top {
    display: flex;
    justify-content: space-between
}

.title_date {
    font-size: 12px
}

/deep/ .van-tabs__line {
    background-color: #1989fa;
}

/deep/ .van-tab--active .van-tab__text {
    color: #1989fa;
}

/deep/ .van-tabs--line .van-tabs__wrap {
    margin-bottom: 10px;
}

.title-logo {
    width: 3px;
    height: 14px;
    background: #1989fa;
    margin-right: 6px;
}

.night_box {
    padding: 5px 20px 5px;
    font-size: 14px;
    color: #666666;
}

.card-box {
    padding: 8px;
    background: #f2f3f5;
    border-radius: 6px;
    font-size: 14px;
    color: #333333;
}

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

.balance_box {
    margin-top: 15px;
    color: #000
}

.all_title {
    font-weight: 600;
    color: #000
}

.all_title_right {
    text-align: right
}

/deep/ .van-tabs__wrap {
    background-color: #fff;
    z-index: 9;
    position: sticky;
    top: 108px;
    padding-bottom: 10px;
    width: 100%;
}

.yd {
    font-weight: 900;
    margin-right: 5px
}

.balance_top {
    display: flex
}

.shu {
    width: 3px;
    height: 20px;
    background: #1989fa;
    margin-right: 6px;
}

.shu_title {
    display: flex;
    margin-bottom: 20px
}

.db_box {
    margin-top: 25px
}

.list_font {
    font-size: 12px;
    background-color: #f2f3f5;
    margin: 0;
    color: #000;
}

.third_year {
    font-size: 12px;
    background-color: #f2f3f5;
    font-weight: 800;
    color: #000;
    text-align: center;
    padding: 10px 0
}

.data_box {
    margin: 10px 0
}

.bzt_box {
    width: 100%;
    height: 10px;
    background-color: #ebedf0;
    display: flex;

}

.lsbzt_box {
    background-color: #1989fa;
    height: 10px;
    border-radius: 10px 0 0 10px;

}

.hsbzt_box {
    background-color: #ee8c15;
    height: 10px;
    border-radius: 0 10px 10px 0;
}
</style>