<template>
  <section class="loanSta mar-t16">
    <ai-search-bar>
      <template #left>
        <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
                   action="/appfinancialorganization/list" @change="page.current=1,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="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:overviews['累计申请笔数']}]"/>
            </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="overviews['累计申请笔数']"/>
              </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>
    <ai-card title="交易记录">
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.messageType" placeholder="机构类型" clearable
                       :selectList="dict.getDict('financialOrganizationType')" @change="page.current=1,getTableData()"/>
            <ai-search label="申请时间">
              <el-date-picker size="small" placeholder="请选择" type="daterange"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期" v-model="search.applyTime"
                              :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd"
                              @change="handleSearchTime"/>
            </ai-search>
          </template>
          <template #right>
            <el-input size="small" placeholder="搜索产品名称、身份证、企业、贷款机构" v-model="search.messageType" clearable
                      @change="page.current=1,getTableData()"/>
            <ai-download :instance="instance" url="/app/appcommunityhouseresident/listExport" :params="search"
                         fileName="人口信息">
              <el-button icon="iconfont iconExported">导出</el-button>
            </ai-download>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                  @getTableData="getTableData" :col-configs="colConfigs" :dict="dict"/>
      </template>
    </ai-card>
  </section>
</template>

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

export default {
  name: "loanSta",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    circleEchart() {
      return {
        legend: false,
        color: ['#2891FF', '#FFB865'],
        series: [
          {
            type: 'pie',
            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: {status: 1},
      page: {current: 1, total: 10},
      tableData: [],
      overviews: [],
      productTop10: [],
      tradeTrend: [],
      colConfigs: [
        {label: "产品名称", width: '200', prop: "productName"},
        {label: "联系人", width: '100', prop: "name"},
        {label: "联系方式", width: '140', prop: "phone"},
        {label: "身份证号", render: (h, {row}) => h('p', this.idCardNoUtil.hideId(row.idNumber)), width: 160},
        {label: "企业主体", width: '200', prop: "enterpriseName"},
        {label: "贷款金额(万)", width: '120', prop: "loanAmount"},
        {label: "申请时间", prop: "createTime", width: 160},
        {label: "贷款机构", prop: "organizationName"},
        {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
      ]
    }
  },
  methods: {
    getStaData() {
      this.getTableData()
      this.getOverviews()
      this.getProductTop10()
      this.getTradeTrend()
    },
    getTableData() {
      this.instance.post("/appfinancialloanapply/list", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    getOverviews() {
      let {organizationId} = this.search
      this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, {
        params: {organizationId}
      }).then(res => {
        if (res?.data) {
          this.overviews = res.data
        }
      })
    },
    getProductTop10() {
      let {organizationId} = this.search
      this.instance.post("/appfinancialloanapply/queryHotFinancialProduct", null, {
        params: {organizationId}
      }).then(res => {
        if (res?.data) {
          this.productTop10 = res.data.map(e => [e.productName, e.applyNumber])
        }
      })
    },
    getTradeTrend() {
      let {organizationId} = this.search
      this.instance.post("/appfinancialloanapply/queryFinancialLoanApplyByMonth", null, {
        params: {organizationId}
      }).then(res => {
        if (res?.data) {
          this.tradeTrend = res.data.map(e => [e.month, e.applyNumber, e.auditNumber])
        }
      })
    },
    handleSearchTime(v) {
      this.page.current = 1
      this.search.applyStartDate = v?.[0].substring(0, 10)
      this.search.applyEndDate = v?.[1].substring(0, 10)
      this.getTableData()
    }
  },
  created() {
    this.getStaData()
  }
}
</script>

<style lang="scss" scoped>
.loanSta {
  height: 100%;
  overflow-y: auto;

  .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: 0px 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;
  }

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

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