<template>
  <div class="customer-management-information-content">
    <div class="text-content-title">
      <sub-title>统一授信视图及提用表</sub-title>
    </div>
    <div style="display: flex;width: 100%">
      <div id="echart" class="charts" style="width: 50%; height: auto; z-index: 999"></div>
      <div class="charts-content">
        <div style="padding-bottom: 7px;border-bottom: 1px solid #eeeeee">
          <div class="echart-data-name">
            <div style="width: 14px;height: 14px;background-color: #FABE00;border-radius: 6px"></div>
            <div>剩余可提用额度(万元)</div>
          </div>
          <div class="echart-data">{{ Number(itemDataYL.syktyLmt || '0').toFixed(2) }}</div>
        </div>
        <div style="padding-top: 7px">
          <div class="echart-data-name">
            <div style="width: 12px;height: 12px;background-color: #46A6FF;border-radius: 6px"></div>
            <div>授信提用额度(万元)</div>
          </div>
          <div class="echart-data">{{ Number(itemDataYL.ytyLmt || '0').toFixed(2) }}</div>
        </div>
      </div>
    </div>
    <table class="customer-management-information-form">
      <tr>
        <td style="width: 9%">产品名称</td>
        <td style="width: 11%">贷款金额</td>
        <td style="width: 11%">贷款余额</td>
        <td>风险等级</td>
        <td>逾期本金</td>
        <td>欠息金额</td>
        <td>贷款形式</td>
        <td>担保方式</td>
        <td>展期次数</td>
        <td>起始日</td>
        <td>到期日</td>
        <td style="font-size: 12px">单位：万元</td>
      </tr>
      <tr v-if="itemData.length == 0">
        <td style="text-align: center" colspan="12">暂无数据！</td>
      </tr>
      <tr v-else v-for="(item, index) in itemData" :key="index">
        <td>{{ item.prd_name }}}</td>
        <td>{{ item.amt }}}</td>
        <td>{{ item.balance }}}</td>
        <td>{{ item.cla_cnName }}}</td>
        <td>{{ item.overdue_amt }}}</td>
        <td>{{ item.delay_int_cumu1 }}}</td>
        <td>{{ item.loan_form_cnName }}}</td>
        <td>{{ item.assure_means_main_cnName }}}</td>
        <td>{{ item.extension_times }}}</td>
        <td>{{ item.start_date }}}</td>
        <td>{{ item.end_date }}}</td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { NativeUI } from "@/public/ts/NativeUI";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import systemApi from "@/constants/api/ms-system/system.api";
import IF from "@/public/factory/InterFaceFactory";
import Public from "@/public/ts/Public";

/**
 * @Description 统一授信视图及提用表
 * @Author JiangTao
 * @Date 2021-11-10 下午 04:21
 */
@Component({
  name: "UnifiedCustomerCreditViewTable"
  // components: { echarts },
})
export default class UnifiedCustomerCreditViewTable extends Vue {
  itemData: any[] = [];
  myChart = {};
  task_no = "";
  // no_data = true; //暂无数据
  itemDataYL: any = {};

  mounted() {
    this.selectSXYL().then(() => {
      this.initEchart();
    });
    ;
    this.selectDHJC().then(() => {
      this.selectDHXQ();
    });
  }

  initEchart() {
    // dom.style.height = "200px";
    // this.myChart = this.$echarts.init(dom);
    let dom:any = document.getElementById("echart");
    dom.style.height = "300px";
    dom.style.width = "300px";
    let myChart = this.$echarts.init(dom);
    let option = {
      color: ["#FABE00", "#46A6FF"],
      series: [
        {
          type: "pie",
          radius: ["58%", "80%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2
          },
          label: {
            show: false,
            position: "center"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "12",
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: false
          },
          center: ["50%", "50%"],
          data: [
            { value: this.itemDataYL.syktyLmt !== undefined ? this.itemDataYL.syktyLmt : 0, name: "剩余可提用额度" },
            { value: this.itemDataYL.ytyLmt !== undefined ? this.itemDataYL.ytyLmt : 0, name: "已经提用额度" }
          ]
        }
      ]
    };
    myChart.setOption(option);
  }

  /**
   *@description: 授信额度及使用一览
   *@author: wanghang
   *@date: 2022/3/3
   */
  selectSXYL() {
    let param = {
      cus_id: this.$store.getters.getCusInfo.cus_id,
      tc: nettyApi.TRADE_CODE.selectSXYL
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc === "1") {
        if (res !== undefined) {
          this.itemDataYL = res;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  selectDHJC(pageNo = 1) {
    let param = {
      targetPage: pageNo,
      maxLine: 10,
      cus_name: this.$store.getters.getCusInfo.cus_name || "", //用于模糊查询
      tc: nettyApi.TRADE_CODE.selectCompanylonaList
    };
    NativeUI.showWaiting();
    return this.$IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (res.PspCreditCheckTaskList && res.PspCreditCheckTaskList.length > 0) {
          this.task_no = res.PspCreditCheckTaskList[0].task_no;
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  /**
   * @Description 借款人信用状况调查
   * @Author JiangTao
   * @Date 2021-12-01 下午 04:47
   */
  selectDHXQ() {
    let param = {
      task_no: this.task_no,
      cus_id: this.$route.params.cus_id,
      tc: nettyApi.TRADE_CODE.selectCompanylonaDetail
    };
    NativeUI.showWaiting("正在查询...");
    return this.$IF.transferDataInter(nettyApi.commonRq, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.rc == "1") {
        if (res.credit_list && res.credit_list.length > 0) {
          this.itemData = res.credit_list;
        }
      } else {
        if (res.ret_code != "999999") {
          NativeUI.toast(res.msg);
        }
      }
    });
  }
}
</script>

<style scoped>
.charts {
  width: 60%;
  height: 400px;
}

.no-data-class {
  width: 40%;
  margin: auto;
  display: flex;
  margin-top: 10%;
}
.echart-data-name > div:nth-child(2) {
  font-size: 14px;
  color: #666666;
  margin-left: 20px;
}
.echart-data-name {
  display: flex;
  align-items: center;
}
.echart-data {
  margin: 4px 0 0 20px;
  font-size: 30px;
  font-weight: bold;
  color: #fabe00;
}
.charts-content{
  margin-top: 80px;
  margin-left: 50px;
}
.text-content-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2%;
}
</style>