<template>
  <section class="loanSta mar-t16">
    <ai-search-bar>
      <template #left>
        <ai-area-get :instance="instance" v-model="search.areaId" @change="getStaData"
                     :root="user.info.areaId" :clearable="false"/>
        <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
                   :action='"/appfinancialorganization/list?id="+financeOrgId'
                   @change="getStaData" :instance="instance"/>
      </template>
    </ai-search-bar>
    <div class="col-row">
      <div class="item" v-for="(v,label) in overviews" :key="label">
        <p v-text="label"/>
        <h2 v-text="formatValue(v)"/>
      </div>
    </div>
    <div class="chart-flex">
      <ai-card title="申请信用贷款主体占比" class="circle-chart">
        <template #content>
          <div class="cir-flex">
            <div id="circleChart">
              <div class="total-num">
                <h2 v-text="overviews['累计申请笔数(笔)']"/>
                <p>总数</p>
              </div>
              <ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:applyInfo['企业融资']}, {name:'个人融资',value:applyInfo['个人贷款']}]"/>
            </div>
            <div class="cir-text">
              <el-row type="flex" justify="space-between" align="middle" class="info">
                <span class="tips-bg" style="background: #2891FF;"/>
                <p class="fill">企业融资</p>
                <div v-text="applyInfo['企业融资']"/>
              </el-row>
              <el-row type="flex" justify="space-between" align="middle" class="info">
                <span class="tips-bg" style="background: #FFB865;"/>
                <p class="fill">个人融资</p>
                <div v-text="applyInfo['个人贷款']"/>
              </el-row>
            </div>
          </div>
        </template>
      </ai-card>
      <ai-card title="交易趋势" class="line-chart">
        <template #content>
          <p class="header-title">
            <span class="tips-bg" style="background: #2891FF;"/>申请笔数
            <span class="tips-bg" style="background: #26D52B;"/>放款笔数
          </p>
          <ai-echart :ops="lineEchart" id="lineChart" :data="tradeTrend"/>
        </template>
      </ai-card>
    </div>
    <ai-card title="热门产品TOP10" class="chart-column">
      <template #content>
        <p class="header-title"><span class="tips-bg" style="background: #2891FF;"/>申请笔数</p>
        <ai-echart :ops="columnEchart" id="columnChart" :data="productTop10"/>
      </template>
    </ai-card>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "loanSta",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    financeOrgId() {
      return this.user.financeUser?.organizationId || ""
    },
    circleEchart() {
      return {
        legend: false,
        color: ['#2891FF', '#FFB865'],
        tooltip: {
          confine: true
        },
        series: [
          {
            type: 'pie',
            name: '申请信用贷款主体',
            radius: ['80%', '90%'],
            avoidLabelOverlap: false,
            legend: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '12',
              }
            },
          }
        ]
      }
    },
    lineEchart() {
      return {
        legend: false,
        color: ['#2891FF', '#26D52B'],
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '3%',
          left: '3%',
          right: 0,
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {type: 'dashed'}
          }
        },
        series: [
          {name: '申请笔数', type: 'line', showSymbol: false},
          {name: '放款笔数', type: 'line', showSymbol: false},
        ]
      }
    },
    columnEchart() {
      return {
        legend: false,
        color: ['#2891FF', '#26D52B'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisTick: {
            show: false
          },
        }],
        yAxis: [{
          type: 'value',
          splitLine: {
            lineStyle: {type: 'dashed'}
          }
        }],
        series: [{
          name: '申请数量',
          type: 'bar',
          barGap: 0,
          barWidth: 10,
        }]
      }
    }
  },
  data() {
    return {
      search: {},
      overviews: {},
      productTop10: [],
      tradeTrend: [],
      applyInfo: {}
    }
  },
  methods: {
    getStaData() {
      this.getOverviews()
      this.getProductTop10()
      this.getTradeTrend()
      this.getApply()
    },
    getApply() {
      this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByMainbody", null, {
        params: {...this.search}
      }).then(res => {
        if (res?.data) {
          this.applyInfo = res.data
        }
      })
    },
    getOverviews() {
      this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, {
        params: {...this.search}
      }).then(res => {
        if (res?.data) {
          this.overviews = res.data
        }
      })
    },
    getProductTop10() {
      this.instance.post("/appfinancialloanapply/queryHotFinancialProduct", null, {
        params: {...this.search}
      }).then(res => {
        if (res?.data) {
          this.productTop10 = res.data.map(e => [e.productName, e.applyNumber])
        }
      })
    },
    getTradeTrend() {
      this.instance.post("/appfinancialloanapply/queryFinancialLoanApplyByMonth", null, {
        params: {...this.search}
      }).then(res => {
        if (res?.data) {
          this.tradeTrend = res.data.map(e => [e.month, e.applyNumber, e.auditNumber])
        }
      })
    },
    formatValue(v) {
      return v?.toFixed(1) || v
    }
  },
  created() {
    this.getStaData()
  }
}
</script>

<style lang="scss" scoped>
.loanSta {

  .col-row {
    overflow: hidden;

    .item {
      display: inline-block;
      padding: 16px 24px;
      width: calc(25% - 15px);
      float: left;
      margin: 0 20px 20px 0;
      background: #FFF;
      box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
      border-radius: 4px;
      box-sizing: border-box;

      p {
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: #888;
        line-height: 24px;
        margin-bottom: 8px;
      }

      h2 {
        font-size: 24px;
        font-family: Arial-BoldMT, Arial;
        font-weight: normal;
        color: #26F;
        line-height: 32px;
      }
    }

    .item:nth-of-type(4n) {
      margin-right: 0;
    }
  }

  ::v-deep.ai-card__body {
    height: max-content;
  }

  ::v-deep .AiAreaGet {
    width: 300px;
  }

  .chart-flex {
    display: flex;
    height: 280px;
    margin-bottom: 20px;

    .circle-chart {
      width: 440px;
      margin-right: 20px;
      height: 100%;

      .cir-flex {
        height: 100%;
        display: flex;
        box-sizing: border-box;

        #circleChart {
          width: calc(100% - 150px);
          height: 174px;
          position: relative;

          .total-num {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            text-align: center;

            & > p {
              text-align: center;
            }
          }
        }

        .cir-text {
          width: 150px;
          margin: 56px 0 0 40px;

          .info {
            width: 100%;
            margin-bottom: 8px;

            p {
              width: 100px;
              font-size: 14px;
              font-family: MicrosoftYaHei;
              color: #666;
              line-height: 22px;
            }

            div {
              width: 50px;
              text-align: right;
            }
          }
        }
      }
    }

    .line-chart {
      height: 100%;
      flex: 1;
      min-width: 0;
      min-height: 0;

      #lineChart {
        height: 154px;
        box-sizing: border-box;
      }
    }
  }

  .chart-column {
    margin-bottom: 20px;
    height: 320px;

    #columnChart {
      width: 100%;
      height: 194px;
    }
  }

  .tips-bg {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
  }

  .header-title {
    width: 100%;
    text-align: center;
    height: 20px;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    color: #333;
    line-height: 20px;

    .tips-bg:nth-of-type(2n) {
      margin-left: 24px;
    }
  }
}
</style>
