<template>
    <ul class="card-list" :style="{ marginTop: '10px' }">
      <li class="art-custom-card" v-for="(item, index) in dataList" :key="index">
        <span class="des subtitle">{{ item.des }}</span>
        <el-tooltip
          v-if="item.num"
          effect="dark"
          :content="item.num"
          placement="top"
        >
          <div class="number box-title">{{item.num}}{{item.unit}}{{item.suffix}}</div>
          <!-- <CountTo class="number box-title" :endVal="item.num" :duration="1000" separator="" :suffix="item.unit + item.suffix"></CountTo> -->
        </el-tooltip>
        <el-icon class="iconfont-sys"> <component :is="item.icon"/></el-icon>
      </li>
    </ul>
  </template>
  
  <script setup>
    import { CountTo } from 'vue3-count-to'
  import { getLoanKanBanTotal } from '@/api/dataScreen';
  import Decimal from 'decimal.js';
    import { reactive, ref } from 'vue';
    import { PictureRounded, Money, User, Star } from '@element-plus/icons-vue';
    const props = defineProps({
      tenant: [String, Number],
    });
    const numberFormat = (number) => {
        if (!number || isNaN(Number(number))) {
        return '0';
        }
        const num = Number(number);
        return num + '';
    };
    const dataList = reactive([
      {
        des: '案件总数',
        icon: 'PictureRounded',
        startVal: 0,
        duration: 1000,
        unit: '',
        suffix: '',
        num: 0
      },
      {
        des: '案件人数',
        icon: 'User',
        startVal: 0,
        duration: 1000,
        suffix: '',
        unit: '',
        num: 0
      },
      {
        des: '案件总额',
        icon: 'Money',
        startVal: 0,
        suffix: '',
        duration: 1000,
        unit: '',
        num: 0
      },
      {
        des: '回款金额',
        icon: 'Money',
        startVal: 0,
        suffix: '',
        duration: 1000,
        unit: '',
        num: 0
      },
      {
        des: '回款率',
        icon: 'Star',
        startVal: 0,
        suffix: '%',
        duration: 1000,
        unit: '',
        num: 0
      }
    ])
    const query = () => {
        const params = {}
        if (props.tenant) {
          params['tenant'] = props.tenant
        }
        getLoanKanBanTotal(params).then((res) => {
            if (res.success) {
                const num0 = numberFormat(res.result.caseNum)
                dataList[0].num = num0.replace(/[亿万千]/, '')
                dataList[0].unit = num0.replace(/\d*\.?\d*/, '')

                const num1 = numberFormat(res.result.borrowerNum)
                dataList[1].num = num1.replace(/[亿万千]/, '')
                dataList[1].unit = num1.replace(/\d*\.?\d*/, '')

                const num2 = numberFormat(res.result.amount)
                dataList[2].num = num2.replace(/[亿万千]/, '')
                dataList[2].unit = num2.replace(/\d*\.?\d*/, '')

                const num3 = numberFormat(res.result.sumRepayTotal)
                dataList[3].num = num3.replace(/[亿万千]/, '')
                dataList[3].unit = num3.replace(/\d*\.?\d*/, '')

                dataList[4].num = res.result.rate
            }
        });
    }
    query();
    
  </script>
  
  <style lang="scss" scoped>
    .card-list {
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      width: calc(100% + 20px);
      margin-top: 0 !important;
      margin-left: calc(0px - 20px);
      background-color: transparent !important;
  
      li {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(20% - 20px);
        height: 140px;
        border: 1px solid rgba(219, 223, 233, .6) !important;
        padding: 0 18px;
        margin: 0 0 0 20px;
        background: #ffffff;
  
        $icon-size: 52px;
  
        .iconfont-sys {
          position: absolute;
          top: 0;
          right: 20px;
          bottom: 0;
          width: $icon-size;
          height: $icon-size;
          margin: auto;
          overflow: hidden;
          font-size: 22px;
          line-height: $icon-size;
          color: var(--el-color-primary) !important;
          text-align: center;
          background-color: var(--el-color-primary-light-9);
          border-radius: 12px;
        }
  
        .des {
          display: block;
          height: 14px;
          font-size: 14px;
          line-height: 14px;
        }
  
        .number {
          display: block;
          margin-top: 10px;
          font-weight: 400;
          font-size: 23px;
          width: calc(100% - 52px);
          text-overflow: ellipsis;
          overflow: hidden;
        }
  
      }
    }
  
    .dark {
      .card-list {
        li {
          .iconfont-sys {
            background-color: #232323 !important;
          }
        }
      }
    }
  </style>
  