<template>
  <div class="">
    <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">{{ condiction.entName }}</div>
            </div>
          </div>
          <div class="">
            <van-tag class="mr-6" color="#fce9e9" text-color="#db2f2f" v-if="blackFlg == 1">本行黑名单</van-tag>
            <van-tag class="mr-6" color="#fce9e9" text-color="#db2f2f" v-if="greyFlg == 1">本行灰名单</van-tag>
            <van-tag class="mr-6" color="#fce9e9" text-color="#db2f2f" v-if="overdueFlg == 1">行内逾期</van-tag>
            <van-tag class="mr-6" color="#fce9e9" text-color="#db2f2f" v-if="rnabhxFlg == 1">有行内核销贷款</van-tag>
          </div>
        </div>
      </div>

      <van-tabs @change="tabChange()" v-model="activeTab" class="content">
        <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>
                      <span class="font-size-20 font-weight-bold">{{
                        condiction.recentlySxAmt ? condiction.recentlySxAmt : '--'
                      }}</span>
                      <span>万元</span>
                    </div>
                  </van-col>
                  <van-col span="12" class="mb-10">
                    <div class="card-box">
                      <div class="mb-4">当前贸易融资授信金额</div>
                      <span class="font-size-20 font-weight-bold">{{ condiction.tradAmt ? condiction.tradAmt : '--'
                      }}</span>
                      <span>万元</span>
                    </div>
                  </van-col>
                  <van-col span="12" class="">
                    <div class="card-box">
                      <div class="mb-4">授信开始日</div>
                      <div class="font-size-18 font-weight-bold">{{
                        condiction.recentlySxSdate ? condiction.recentlySxSdate : '--' }}</div>
                    </div>
                  </van-col>
                  <van-col span="12" class="">
                    <div class="card-box">
                      <div class="mb-4">授信到期日</div>
                      <div class="font-size-18 font-weight-bold">{{
                        condiction.recentlySxEdate ? condiction.recentlySxEdate : '--' }}</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>用信结构
                  </div>
                </template>
                <van-row gutter="10">
                  <van-col span="24" class="mb-16">
                    <div class="company-middle-item mb-4">
                      <div>贷款</div>
                      <div>{{ baseInfo.debtLoanBal }}万元</div>
                    </div>
                    <van-progress :percentage="debtLoanBalProgress * 100 > 100 ? 100 : debtLoanBalProgress * 100"
                      :show-pivot=false stroke-width="6" color="#ee0a24"></van-progress>
                  </van-col>
                  <van-col span="24" class="mb-16">
                    <div class="company-middle-item mb-4">
                      <div>贴现</div>
                      <div>{{ baseInfo.billFinanAmt }}万元</div>
                    </div>
                    <van-progress :percentage="billFinanAmtProgress * 100 > 100 ? 100 : billFinanAmtProgress * 100"
                      :show-pivot=false stroke-width="6" color="#f2826a"></van-progress>
                  </van-col>

                  <van-col span="24" class="mb-16">
                    <div class="company-middle-item mb-4">
                      <div>承兑</div>
                      <div>{{ baseInfo.acptFinanAmt }}万元</div>
                    </div>
                    <van-progress :percentage="acptFinanAmtProgress * 100 > 100 ? 100 : acptFinanAmtProgress * 100"
                      :show-pivot=false stroke-width="6" color="#ee0a24"></van-progress>
                  </van-col>

                  <van-col span="24" class="mb-16">
                    <div class="company-middle-item mb-4">
                      <div>保函</div>
                      <div>{{ baseInfo.assuraneAmt }}万元</div>
                    </div>
                    <van-progress :percentage="assuraneAmtProgress * 100 > 100 ? 100 : assuraneAmtProgress * 100"
                      :show-pivot=false stroke-width="6" color="#01b301"></van-progress>
                  </van-col>
                </van-row>
              </van-collapse-item>


              <van-collapse-item name="3" class="mb-10">
                <template #title>
                  <div class="title-box">
                    <div class="title-logo"></div>贷款情况
                  </div>
                </template>
                <van-row>
                  <van-col span="24" class="mb-10">
                    <div class="title-box-small" style="color: #333333">近三年贷款、利息情况</div>
                    <div id="tabFirstOne" style="width: 350px;height: 300px;margin-bottom: 20px"></div>

                    <van-row gutter="10" class="mb-16">
                      <van-col span="12" class="">
                        <div class="card-box">
                          <div class="mb-4">最近一笔合同到期时间</div>
                          <div class="font-size-18 font-weight-bold">{{
                            condiction.recentlyConfEdate ? condiction.recentlyConfEdate : '--' }}</div>
                        </div>
                      </van-col>
                      <van-col span="12" class="">
                        <div class="card-box">
                          <div class="mb-4">最近一笔合同到期金额</div>
                          <div class="font-size-18 font-weight-bold">{{
                            condiction.recentlyConfAmt ? condiction.recentlyConfAmt : '--' }}</div>
                        </div>
                      </van-col>
                    </van-row>

                    <div class="title-box-small mb-4" style="color: #333333">贷款明细</div>

                    <div class="search-btn-box">
                      <div>共<span class="color-2372eb">{{ this.loanList.length }}</span>条借据明细信息</div>
                      <div class="search-right-btn-box">
                        <div @click="timeSort()">到期日期<van-icon name="descending" /></div>
                      </div>
                    </div>
                    <div>
                      <div class="mxWapper" v-if="loanList.length > 0">
                        <div class="card-box mb-16" v-for="(item, index) in loanList" :key="index"
                          @click="goDkDetail(item)">
                          <div class="company-middle-item mb-10">
                            <van-tag class="mr-6" color="#dadce0" text-color="#333333">借据序号：{{ item.bsn03 }}</van-tag>
                            <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 == '6'||item.loan5cls == '3'">次级</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="company-middle-item mb-10 font-size-16">
                            <div class="font-weight-bold">{{ item.nfaacono }}</div>
                            <div class="font-weight-bold">{{ item.blncamt }}万元</div>
                          </div>
                          <div class="company-middle-item">
                            <div class="color-999999">到期日期：{{ item.loanEdate }}</div>
                            <div class="color-999999">贷款余额</div>
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: 10px" v-else>
                        <van-empty />
                      </div>
                    </div>


                  </van-col>
                </van-row>
              </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>
                  <van-col span="24" class="mb-10">
                    <van-row gutter="10">
                      <van-col span="24" class="mb-10">
                        <div class="title-box-small" style="color: #333333">担保方式分类</div>
                      </van-col>
                      <van-col span="24" class="mb-16">
                        <div class="company-middle-item mb-4">
                          <div>信用</div>
                          <div>{{ baseInfo.guarCreditAmt }}万元</div>
                        </div>
                        <van-progress :percentage="guarCreditAmtProgress * 100 > 100 ? 100 : guarCreditAmtProgress * 100"
                          :show-pivot=false stroke-width="10" color="#4682ff"></van-progress>
                      </van-col>
                      <van-col span="24" class="mb-16">
                        <div class="company-middle-item mb-4">
                          <div>抵押</div>
                          <div>{{ baseInfo.guarMortAmt }}万元</div>
                        </div>
                        <van-progress :percentage="guarMortAmtProgress * 100 > 100 ? 100 : guarMortAmtProgress * 100"
                          :show-pivot=false stroke-width="10" color="#4682ff"></van-progress>
                      </van-col>
                      <van-col span="24" class="mb-16">
                        <div class="company-middle-item mb-4">
                          <div>质押</div>
                          <div>{{ baseInfo.guarPledAmt }}万元</div>
                        </div>
                        <van-progress :percentage="guarPledAmtProgress * 100 > 100 ? 100 : guarPledAmtProgress * 100"
                          :show-pivot=false stroke-width="10" color="#4682ff"></van-progress>
                      </van-col>
                      <van-col span="24" class="mb-16">
                        <div class="company-middle-item mb-4">
                          <div>保证</div>
                          <div>{{ baseInfo.guarAssurAmt }}万元</div>
                        </div>
                        <van-progress :percentage="guarAssurAmtProgress * 100 > 100 ? 100 : guarAssurAmtProgress * 100"
                          :show-pivot=false stroke-width="10" color="#4682ff"></van-progress>
                      </van-col>
                      <van-col span="24" class="mb-16">
                        <div class="company-middle-item mb-4">
                          <div>组合</div>
                          <div>{{ baseInfo.guarCombAmt }}万元</div>
                        </div>
                        <van-progress :percentage="guarCombAmtProgress * 100 > 100 ? 100 : guarCombAmtProgress * 100"
                          :show-pivot=false stroke-width="10" color="#4682ff"></van-progress>
                      </van-col>
                    </van-row>


                    <div class="title-box-small mb-10" style="color: #333333">行内抵质押物情况</div>
                    <div>
                      <div class="dbWapper" v-if="pledgeList.length > 0 && guaranteeList.length > 0 && zyList.length > 0">
                        <div class="card-box mb-16" v-for="(item, index) in pledgeList" :key="index">
                          <div class="company-middle-item mb-10">
                            <van-tag class="mr-6" color="#17b9d7">不动产</van-tag>
                            <van-tag class="mr-6" color="#f7ede3" text-color="#ef9121">抵押</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.buildingAppraise }}万元</div>
                          </div>
                          <div class="company-middle-item mb-4">
                            <div class="color-999999">建筑面积：{{ item.buildingArea }}</div>
                            <div class="color-999999">评估价值</div>
                          </div>
                          <div class="company-middle-item mb-4">
                            <div class="color-999999">土地面积：{{ item.landArea }}</div>
                          </div>
                          <div class="company-middle-item">
                            <div class="color-999999">地址：{{ item.buildingLocation }}</div>
                          </div>
                        </div>

                        <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" color="#ef9121">担保</van-tag>
                            <van-tag class="mr-6" color="#f7ede3" text-color="#ef9121">保证</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.ttlAst }}万元</div>
                          </div>
                          <div class="company-middle-item mb-4">
                            <div class="color-999999">年收入：{{ item.yearIncome }}万元</div>
                            <div class="color-999999">总资产</div>
                          </div>
                          <div class="company-middle-item mb-4">
                            <div class="color-999999">信息：{{ item.custIndustry }}</div>
                          </div>
                          <div class="company-middle-item">
                            <div class="color-999999">地址：{{ item.address }}</div>
                          </div>
                        </div>

                        <div class="card-box mb-16" v-for="(item, index) in zyList" :key="index">
                          <div class="company-middle-item mb-10">
                            <van-tag class="mr-6" color="#58a55d">动产抵押</van-tag>
                            <van-tag class="mr-6" color="#f7ede3" text-color="#ef9121">质押</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.impawnSurfaceAmount }}万元</div>
                          </div>
                          <div class="company-middle-item mb-4">
                            <div class="color-999999">存单开始日期：{{ item.impawnStartDate }}</div>
                            <div class="color-999999">存单价值</div>
                          </div>
                          <div class="company-middle-item">
                            <div class="color-999999">存单结束日期：{{ item.impawnEndDate }}</div>
                          </div>
                        </div>
                      </div>
                      <div style="margin-top: 10px" v-else>
                        <van-empty />
                      </div>
                    </div>



                  </van-col>
                </van-row>
              </van-collapse-item>

            </van-collapse>
          </div>
        </van-tab>
        <van-tab title="负债业务">
          <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 id="tabSecondOne" style="width: 350px;height: 300px;"></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 id="tabSecondTwo" style="width: 350px;height: 300px;"></div>
            </van-collapse-item>


            <van-collapse-item name="7" class="mb-10">
              <template #title>
                <div class="title-box">
                  <div class="title-logo"></div>存款到期
                </div>
              </template>
              <van-row>
                <van-col span="24" class="mb-10">
                  <van-row gutter="10" class="">
                    <van-col span="12" class="mb-10">
                      <div class="card-box">
                        <div class="mb-4">最近一笔定期存款到期时间</div>
                        <div class="font-size-18 font-weight-bold">{{
                          condiction.recentlyDqckEdate ? condiction.recentlyDqckEdate : '--' }}</div>
                      </div>
                    </van-col>
                    <van-col span="12" class="mb-10">
                      <div class="card-box">
                        <div class="mb-4">最近一笔定期存款到期金额</div>
                        <div class="font-size-18 font-weight-bold">{{
                          condiction.recentlyDqckAmt ? condiction.recentlyDqckAmt : '--' }}</div>
                      </div>
                    </van-col>
                    <van-col span="12" class="">
                      <div class="card-box">
                        <div class="mb-4">最近一笔存单到期时间</div>
                        <div class="font-size-18 font-weight-bold">{{
                          condiction.recentlyDqcdEdate ? condiction.recentlyDqcdEdate : '--' }}</div>
                      </div>
                    </van-col>
                    <van-col span="12" class="">
                      <div class="card-box">
                        <div class="mb-4">最近一笔存单到期金额</div>
                        <div class="font-size-18 font-weight-bold">{{
                          condiction.recentlyDqcdAmt ? condiction.recentlyDqcdAmt : '--' }}</div>
                      </div>
                    </van-col>
                  </van-row>

                </van-col>
              </van-row>
            </van-collapse-item>

          </van-collapse>
        </van-tab>
        <van-tab title="中间业务">
          <van-collapse v-model="activeCollapse">
            <van-collapse-item name="8" class="mb-10">
              <template #title>
                <div class="title-box">
                  <div class="title-logo"></div>开户情况
                </div>
              </template>
              <div class="title-box-small mb-10" style="color: #333333">
                开户情况：
                <van-tag class="mr-6" color="#f2f3f5" text-color="#666666" v-if="baseAcctFlg =='0'">我行未开通基本户</van-tag>
                <van-tag class="mr-6" color="#e8f1fd" text-color="#4185ee" v-if="baseAcctFlg =='1'">我行开通基本户</van-tag>
                <van-tag class="mr-6" color="#f2f3f5" text-color="#666666" v-if="enbankFlg =='0'">企业网银未开通</van-tag>
                <van-tag class="mr-6" color="#e8f1fd" text-color="#4185ee" v-if="enbankFlg =='1'">企业网银已经开通</van-tag>
              </div>
              <div class="flex-space-between-center card-box">
                <div style="text-align: center">
                  <div class="mb-4">一般户数量</div>
                  <div class="font-size-20 font-weight-bold">{{ condiction.generalAcctCnt }}</div>
                </div>
                <div class="card-line"></div>
                <div style="text-align: center">
                  <div class="mb-4">临时户数量</div>
                  <div class="font-size-20 font-weight-bold">{{ condiction.temporAcctCnt }}</div>
                </div>
                <div class="card-line"></div>
                <div style="text-align: center">
                  <div class="mb-4">专业账户数量</div>
                  <div class="font-size-20 font-weight-bold">{{ condiction.professAcctCnt }}</div>
                </div>
              </div>
            </van-collapse-item>
            <van-collapse-item name="9" class="mb-10">
              <template #title>
                <div class="title-box">
                  <div class="title-logo"></div>近3年国际结算情况
                </div>
              </template>
              <div id="tabThirdOne" style="width: 350px;height: 300px;"></div>
            </van-collapse-item>

            <van-collapse-item name="10" class="mb-10">
              <template #title>
                <div class="title-box">
                  <div class="title-logo"></div>近3年累计代发工资情况
                </div>
              </template>
              <div>
                <div id="tabThirdTwo" style="width: 350px;height: 300px;" ></div>
                <!-- v-if="!salAgenFlag" -->
                <!-- <div style="margin-top: 10px" v-else>
                  <van-empty />
                </div> -->
              </div>
            </van-collapse-item>
            <van-collapse-item name="11" class="mb-10">
              <template #title>
                <div class="title-box">
                  <div class="title-logo"></div>近3年代扣水费、电费、税费情况
                </div>
              </template>
              <div id="tabThirdThree" style="width: 350px;height: 300px;"></div>
            </van-collapse-item>

          </van-collapse>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
import { ref } from 'vue';
import * as echarts from 'echarts'
import navbar from '../../../components/navbar/navbar.vue';
import {
  Icon,
  Tag,
  Tab, Tabs, Collapse, CollapseItem, Col, Row, Progress, Empty
} from 'vant';
import { getAssetBusiness, getBaseInfo, getLoanList, getDebtBusiness, getMiddleBusiness, getMortgageList, queryGuaranteeList, getImpawnList } from "@/service/api/home";
import { postCancelGuanzhu } from "@/service/api/category";
//button组件

export default {
  name: "searchRefult",
  data() {
    return {
      condiction: {
        entName: '',//企业名称
        attentionFlag: '',
        baseAcctFlg: '',
        blackFlg: '',
        enbankFlg: '',
        greyFlg: '',
        rnabhxFlg: '',
        recentlySxAmt: '', //当前授信金额
        tradAmt: '',//当前贸易融资_余额
        recentlySxSdate: '',//开始日
        recentlySxEdate: '',//到期日
        recentlyConfEdate: '',//最近一笔合同到期日
        recentlyConfAmt: '',//最近一笔合同到期金额
        recentlyDqckEdate: '',//最近一批定期存款到期时间
        recentlyDqckAmt: '',//最近一批定期存款到期金额
        recentlyDqcdEdate: '',//最近一批存单到期日
        recentlyDqcdAmt: '',//最近一批存单到期金额
        generalAcctCnt: '',//一般户数量
        condiction: '',//临时户数量
        professAcctCnt: '',//专业账户数量
      },
      baseInfo: {
        debtLoanBal: '',//贷款余额
        billFinanAmt: '', // 贴现
        acptFinanAmt: '', //承诺
        assuraneAmt: '',//保函
        guarCreditAmt: '',//信用
        guarMortAmt: '',//抵押
        guarPledAmt: '',//质押
        guarAssurAmt: '',//保证
        guarCombAmt: '',//组合
      },
      debtLoanBalProgress: 0,
      billFinanAmtProgress: 0,
      acptFinanAmtProgress: 0,
      assuraneAmtProgress: 0,
      guarCreditAmtProgress: 0,
      guarMortAmtProgress: 0,
      guarPledAmtProgress: 0,
      guarAssurAmtProgress: 0,
      guarCombAmtProgress: 0,
      loanList: [],
      date: '',
      activeTab: '0',
      activeCollapse: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'],
      pledgeList: [],
      guaranteeList: [],
      zyList: [],
      colorNum: '',
      blackFlg: '',
      greyFlg: '',
      rnabhxFlg: '',
      overdueFlg: '',
      salAgenFlag: false,
      baseAcctFlg:'',
      enbankFlg:''
    }
  },
  mounted() {
    let today = new Date()
    let year = today.getFullYear()
    let month = today.getMonth() + 1
    let day = today.getDate()
    this.date = `${year}-${month}-${day}`
    this.colorNum = sessionStorage.getItem('colorNum')
    this.blackFlg = sessionStorage.getItem('blackFlg')
    this.greyFlg = sessionStorage.getItem('greyFlg')
    this.rnabhxFlg = sessionStorage.getItem('rnabhxFlg')
    this.overdueFlg = sessionStorage.getItem('overdueFlg')
    this.baseAcctFlg = sessionStorage.getItem('baseAcctFlg')
    this.enbankFlg = sessionStorage.getItem('enbankFlg')
    this.initBaseInfo()
    this.initGetMortgageList()
    this.initGetGuaranteeList()
    this.initGetImpawnList()
  },
  methods: {
    async initBaseInfo() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getBaseInfo(uniscid);
      if (result) {
        this.condiction = result
        this.initAssets()
        this.initLoanList()
      }
    },
    async initAssets() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getAssetBusiness(uniscid);
      if (result) {
        this.baseInfo = result
        this.debtLoanBalProgress = this.baseInfo.debtLoanBal / (this.condiction.recentlySxAmt)
        this.billFinanAmtProgress = this.baseInfo.billFinanAmt / (this.condiction.recentlySxAmt)
        this.acptFinanAmtProgress = this.baseInfo.acptFinanAmt / (this.condiction.recentlySxAmt)
        this.assuraneAmtProgress = this.baseInfo.assuraneAmt / (this.condiction.recentlySxAmt)
        this.guarCreditAmtProgress = this.baseInfo.guarCreditAmt / this.baseInfo.debtLoanBal
        this.guarMortAmtProgress = this.baseInfo.guarMortAmt / this.baseInfo.debtLoanBal
        this.guarPledAmtProgress = this.baseInfo.guarPledAmt / this.baseInfo.debtLoanBal
        this.guarAssurAmtProgress = this.baseInfo.guarAssurAmt / this.baseInfo.debtLoanBal
        this.guarCombAmtProgress = this.baseInfo.guarCombAmt / this.baseInfo.debtLoanBal
        let nowDate = result.eltDate ? result.eltDate : this.date
        let previousDate = Number(nowDate.substring(0, 4)) - 1
        let lastTwoDate = Number(nowDate.substring(0, 4)) - 2
        let dateList = [lastTwoDate, previousDate, nowDate]
        let loanList = [result.preyearendLoanAmt, result.lastyearendLoanAmt, result.debtLoanBal]
        let interestList = [result.preyearendLoanPayAmt, result.lastyearendLoanPayAmt, result.curryearendLoanPayAmt]
        this.drawChartFirstOne(dateList, loanList, interestList)
      }
    },
    async initLoanList() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getLoanList(uniscid);
      if (result) {
        this.loanList = result
      }
    },
    timeSort() {

    },
    async initDebtBusiness() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getDebtBusiness(uniscid);
      if (result) {
        let nowDate = result.eltDate ? result.eltDate : this.date
        let previousDate = Number(nowDate.substring(0, 4)) - 1
        let lastTwoDate = Number(nowDate.substring(0, 4)) - 2
        let dateList = [lastTwoDate, previousDate, nowDate]
        let saveAccountList = [result.depositPreyearDailyaverage, result.depositLastyearDailyaverage, result.depositCurryearDailyaverage]
        let currentDepositList = [result.depositHqPreyearDailyaverage, result.depositHqLastyearDailyaverage, result.depositHqCurryearDailyaverage]
        let timeDepositList = [result.depositDqPreyearDailyaverage, result.depositDqLastyearDailyaverage, result.depositDqCurryearDailyaverage]
        this.drawChartSecondOne(dateList, saveAccountList, currentDepositList, timeDepositList)
        let depositList = [result.depositPreyearBal, result.depositLastyearBal, result.depositCurryearBal]
        let currentAmountList = [result.depositHqPreyearBal, result.depositHqLastyearBal, result.depositHqCurryearBal]
        let termAmountList = [result.depositDqPreyearBal, result.depositDqLastyearBal, result.depositDqCurryearBal]
        let receiptList = [result.depositCdPreyearBal, result.depositCdLastyearBal, result.depositCdCurryearBal]
        let foreignList = [result.depositWhCurryearBal]
        this.drawChartSecondTwo(dateList, depositList, currentAmountList, termAmountList, receiptList, foreignList)
      }
    },
    async initMiddleBusiness() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getMiddleBusiness(uniscid);
      if (result) {
        // this.salAgenFlag = result.salAgenFlag
        let nowDate = result.eltDate ? result.eltDate : this.date
        console.log(nowDate, 'nowDatenowDate')
        let previousDate = Number(nowDate.substring(0, 4)) - 1
        let lastTwoDate = Number(nowDate.substring(0, 4)) - 2
        let dateList = [lastTwoDate, previousDate, nowDate]
        let settleList = [result.internalSettlPreyearAmt, result.internalSettlLastyearAmt, result.internalSettlCurryearAmt]
        this.drawChartThirdOne(dateList, settleList)
        let wageList = [result.salAgenPreyearAmt, result.salAgenLastyearAmt, result.salAgenPreyearAmt]
        this.drawChartThirdTwo(dateList, wageList)
        let waterList = [result.waterAgenPreyearAmt, result.waterAgenLastyearAmt, result.waterAgenCurryearAmt]
        let electricList = [result.elecAgenPreyearAmt, result.elecAgenLastyearAmt, result.elecAgenCurryearAmt]
        let commissionList = [result.taxAgenPreyearAmt, result.taxAgenLastyearAmt, result.taxAgenCurryearAmt]
        this.drawChartThirdThree(dateList, waterList, electricList, commissionList)
      }
    },
    async initGetMortgageList() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getMortgageList(uniscid);
      if (result) {
        this.pledgeList = result
      }

    },
    async initGetGuaranteeList() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await queryGuaranteeList(uniscid);
      if (result) {
        this.guaranteeList = result
      }

    },
    async initGetImpawnList() {
      let uniscid = sessionStorage.getItem('creditCode')
      let result = await getImpawnList(uniscid);
      if (result) {
        this.zyList = result
      }

    },
    // 资产业务》贷款情况》echarts图表
    drawChartFirstOne(dateList, loanList, interestList) {
      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: dateList }
        ],
        yAxis: [{ type: 'value', }, { type: 'value', }],
        series: [
          { name: '贷款金额', type: 'bar', data: loanList, barWidth: 50, color: '#5087ec' },
          { name: '已付利息', type: 'line', yAxisIndex: 1, smooth: true, data: interestList, color: '#ee8c15' },
        ]
      };
      myChart.setOption(option);
    },

    // 负债业务》存款日均》折线图
    drawChartSecondOne(dateList, saveAccountList, currentDepositList, timeDepositList) {
      let myChart = echarts.init(document.getElementById('tabSecondOne'));
      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: dateList },
        yAxis: { type: 'value', },
        series: [
          { name: '存款日均', type: 'line', data: saveAccountList, smooth: true, color: '#5087ec' },
          { name: '活期存款日均', type: 'line', data: currentDepositList, smooth: true, color: 'rgb(238,140,21)' },
          { name: '定期存款日均', type: 'line', data: timeDepositList, smooth: true, color: 'rgb(242,189,66)' },
        ]
      };
      myChart.setOption(option);
    },

    // 负债业务》存款余额》折线图
    drawChartSecondTwo(dateList, depositList, currentAmountList, termAmountList, receiptList, foreignList) {
      let myChart = echarts.init(document.getElementById('tabSecondTwo'));
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '20%',
          containLabel: true
        },
        legend: {
          top: 'bottom',
          icon: 'circle',
          data: ['存款金额', '活期金额', '定期金额', '存单金额', '外汇金额',]
        },
        xAxis: { type: 'category', data: dateList },
        yAxis: { type: 'value', },
        series: [
          { name: '存款金额', type: 'line', data: depositList, smooth: true, color: '#5087ec' },
          { name: '活期金额', type: 'line', data: currentAmountList, smooth: true, color: '#fd7317' },
          { name: '定期金额', type: 'line', data: termAmountList, smooth: true, color: '#f8d41e' },
          { name: '存单金额', type: 'line', data: receiptList, smooth: true, color: '#58a55d' },
          { name: '外汇金额', type: 'line', data: foreignList, smooth: true, color: '#db2c2c' },
        ]
      };
      myChart.setOption(option);
    },

    // 近3年国际结算情况
    drawChartThirdOne(dateList, settleList) {
      let myChart = echarts.init(document.getElementById('tabThirdOne'));
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: { type: 'category', data: dateList },
        yAxis: { type: 'value', },
        series: [
          { name: '结算情况', type: 'line', data: settleList, smooth: true, areaStyle: { color: '#cddffc' }, color: '#5087ec' },
        ]
      };
      myChart.setOption(option);
    },

    // 近3年累计代发工资情况
    drawChartThirdTwo(dateList, wageList) {
      let myChart = echarts.init(document.getElementById('tabThirdTwo'));
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          { type: 'category', data: dateList }
        ],
        yAxis: [{ type: 'value', }, { type: 'value', }],
        series: [
          { name: '金额', type: 'bar', data: wageList, barWidth: 50, color: '#5087ec' },

        ]
      };
      myChart.setOption(option);
    },

    // 近3年代扣水费、电费、税费情况
    drawChartThirdThree(dateList, waterList, electricList, commissionList) {
      let myChart = echarts.init(document.getElementById('tabThirdThree'));
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '20%',
          containLabel: true
        },
        legend: {
          top: 'bottom',
          icon: 'circle',
          data: ['水费', '电费', '税费',]
        },
        xAxis: { type: 'category', data: dateList },
        yAxis: { type: 'value', },
        series: [
          { name: '水费', type: 'line', data: waterList, smooth: true, color: '#5087ec' },
          { name: '电费', type: 'line', data: electricList, smooth: true, color: '#ee8c15' },
          { name: '税费', type: 'line', data: commissionList, smooth: true, color: '#58a55d' },
        ]
      };
      myChart.setOption(option);
    },

    goDkDetail(item) {
      console.log(item)
      sessionStorage.setItem('rate', item.rate);
      sessionStorage.setItem('orgName', item.orgName)
      sessionStorage.setItem('managerNo', item.managerNo)
      sessionStorage.setItem('nfaacono', item.nfaacono)
      sessionStorage.setItem('bsn03', item.bsn03)
      sessionStorage.setItem('blncamt', item.blncamt)
      sessionStorage.setItem('asureType', item.asureType)
      sessionStorage.setItem('productNo', item.productNo)
      sessionStorage.setItem('loanSdate', item.loanSdate)
      sessionStorage.setItem('loanEdate', item.loanEdate)
      sessionStorage.setItem('loan5cls', item.loan5cls)
      // sessionStorage.setItem('ent9vScoreAll', item.ent9vScoreAll);
      // sessionStorage.setItem('colorNum', item.colorNum);
      this.$router.push('/SearchBusinessTypeInfo');
    },
    tabChange() {
      console.log(1122, this.activeTab)
      if (this.activeTab == '1') {
        setTimeout(() => {
          this.initDebtBusiness()
        }, 100)
      } else if (this.activeTab == '2') {
        setTimeout(() => {
          this.initMiddleBusiness()
          this.drawChartThirdThree();
        }, 100)
      }
    },



  },
  components: {
    navbar: navbar,
    VanIcon: Icon,
    VanTag: Tag,
    VanTab: Tab,
    VanTabs: Tabs,
    VanCol: Col,
    VanRow: Row,
    VanCollapse: Collapse,
    VanCollapseItem: CollapseItem,
    VanProgress: Progress,
    VanEmpty: Empty
  },
}
</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%;
  height: 88px;
}

/deep/ .van-tabs__wrap {
  background-color: #fff;
  z-index: 9;
  position: sticky;
  top: 124px;
  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-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;
}

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

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

.card-line {
  width: 2px;
  height: 40px;
  background: #dddddd;
}

.font-size-20 {
  font-size: 20px;
}

.font-size-18 {
  font-size: 18px;
}

.font-size-16 {
  font-size: 16px;
}

.font-weight-bold {
  font-weight: bold !important;
}

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

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

.search-btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #666666;
  margin-bottom: 16px;
}

.search-right-btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  color: #666666;
}

.color-999999 {
  color: #999999;
}

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