<template>
  <section class="needsStatistics">
    <ai-search-bar>
      <template #left>   
         <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
                   action="/appfinancialorganization/list" @change="page.current=1,getTableData()" :instance="instance"/>    
      </template>
    </ai-search-bar>
    <div class="col-row">
      <div class="item" v-for="(v,label) in cloList" :key="label">
        <p v-text="label"/>
        <h2 v-text="v"/>
      </div>
    </div>
    <div class="chart-flex">
      <div class="circle-chart chart-content">
        <div class="title">融资需求发布主体占比</div>
        <div class="cir-flex">
          <div class="total-num">
            <h2>{{applyInfo['总数'] || 0}}</h2>
            <p>总数</p>
          </div>
          <div id="circleChart"></div>
          <div class="cir-text">
            <div class="info">
              <p><span class="tips-bg" style="background: #2891FF;"></span>企业融资</p>
              <div>{{applyInfo['企业融资'] || 0}}</div>
            </div>
            <div class="info">
              <p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
              <div>{{applyInfo['个人融资'] || 0}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="line-chart chart-content">
        <div class="title">交易趋势</div>
        <p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg" style="background: #26D52B;"></span>放款笔数</p>
        <div id="lineChart"></div>
      </div>
    </div>
    <div class="chart-column chart-content">
      <div class="title">机构融资对接量TOP10</div>
      <p class="header-title"><span class="tips-bg" style="background: #2891FF;"></span>申请笔数<span class="tips-bg" style="background: #26D52B;"></span>放款笔数</p>
      <div id="columnChart"></div>
    </div>
    <div class="table-content chart-content">
      <div class="title">交易记录</div>
      <ai-search-bar style="padding:20px 20px 0 20px;">
        <template #left>
          <ai-select v-model="search.organizationType" placeholder="机构类型" clearable :selectList="$dict.getDict('financialOrganizationType')" @change="getList()"></ai-select>   
         <ai-search label="申请时间">
            <el-date-picker size="small" placeholder="请选择" type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 258px;"
              value-format="yyyy-MM-dd"
              v-model="stuTime"
              @change="changeTime"/>
          </ai-search>     
        </template>
        <template #right>
          <el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.name" clearable @change="getList()"/> 
          <!-- <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"
                @getList="getList" :col-configs="colConfigs" :dict="dict" style="padding:0 20px 20px 20px;">
        <el-table-column slot="options" label="状态" fixed="right" width="100" align="center">
          <template slot-scope="{row}">
            <span :class="`status${row.status}`">{{$dict.getLabel('financialLoanApplyStatus', row.status)}}</span>
          </template>
        </el-table-column>
      </ai-table>
    </div>
  </section>
</template>

<script>
import {mapState} from "vuex";
import * as echarts from 'echarts'

export default {
  name: "needsStatistics",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    areaId: String
  },
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', organizationType: ''},
      page: {current: 1, total: 10},
      circleChart: null,
      lineChart: null,
      columnChart: null,
      tableData: [],
      colConfigs: [
        // {label: "产品名称", width: '200', prop: "enterpriseName"},
        {label: "联系人", width: '100', prop: "name"},
        {label: "联系方式", width: '140', prop: "phone"},
        {label: "身份证号", width: '180', prop: "idNumber"},
        {label: "企业主体", width: '200', prop: "enterpriseName"},
        {label: "贷款金额(万)", width: '120', prop: "loanAmount"},
        {label: "申请时间", width: '180', prop: "createTime"},
        {label: "贷款机构", width: '200', prop: "organizationName"},
        {label: "机构类型", width: '200', prop: "organizationType", dict:'financialOrganizationType'},
        {slot: "options"}
      ],
      cloList: [],
      applyInfo: {},
      demandInfo: {},
      staticInfo: {},
      stuTime: []
    }
  },
  methods: {
    getTableData() {
      this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
        if (res?.data) {
          if(res.data['对接成功率']) {
            res.data['对接成功率'] = Number( res.data['对接成功率'] * 100) + '%'
          }
          this.cloList = res.data
        }
      })
      this.instance.post(`/appfinancingdemand/staticFinancialDemandByApplyType?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
        if (res?.data) {
          this.applyInfo = res.data
          this.circleChartInit(this.applyInfo)
        }
      })
      this.instance.post(`/appfinancingdemand/staticFinancialDemandByHot?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
        if (res?.data) {
          var nameList = [], applyList = [], auditList = []
          res.data.map((item) => {
            nameList.push(item.organizationName)
            applyList.push(item.applyNumber)
            auditList.push(item.auditNumber)
          })
          this.columnChartInit(nameList, applyList, auditList)
        }
      })
      this.instance.post(`/appfinancingdemand/staticFinancialDemandByMonth?areaId=${this.areaId}&organizationId=${this.search.organizationId}`).then(res => {
        if (res?.data) {
          var monthList = [], applyList = [], auditList = []
          res.data.map((item) => {
            monthList.push(item.month)
            applyList.push(item.applyNumber)
            auditList.push(item.auditNumber)
          })
          this.lineChartInit(monthList, applyList, auditList)
        }
      })
      this.getList()
    },
    getList() {
      this.instance.post("/appfinancingdemand/list", null, {
        params: {...this.page, ...this.search}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    circleChartInit(data) {
      this.circleChart = echarts.init(document.getElementById('circleChart'))
      if (!this.circleChart) {
        return this.circleChart.dispose();
      }
      var option = {
        color: ['#2891FF', '#FFB865'],
        series: [
          {
            type: 'pie',
            radius: ['80%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '12',
              }
            },
            data: [
              { value: data['企业融资']},
              { value: data['个人融资']},
            ]
          }
        ]

      };

      this.circleChart.setOption(option)
    },
    lineChartInit(monthList, applyList, auditList) {
      this.lineChart = echarts.init(document.getElementById('lineChart'))
      if (!this.lineChart) {
        return this.lineChart.dispose();
      }
      var option = option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: monthList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '申请笔数',
            type: 'line',
            data: applyList,
            itemStyle: { 
              normal: { 
                lineStyle:{ 
                  color:'#2891FF'
                }
              }
            }
          },
          {
            name: '放款笔数',
            type: 'line',
            stack: 'Total',
            data: auditList,
            itemStyle: { 
              normal: { 
                lineStyle:{ 
                  color:'#26D52B'
                }
              }
            }
          },
        ]
      };
      this.lineChart.setOption(option)
    },
    columnChartInit(nameList, applyList, auditList) {
      this.columnChart = echarts.init(document.getElementById('columnChart'))
      if (!this.columnChart) {
        return this.columnChart.dispose();
      }
      var option = {
        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
          },
          data: nameList
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '申请数量',
          type: 'bar',
          barGap: 0,
          data: applyList,
          barWidth: 10,
        },
        {
          name: '放款数量',
          type: 'bar',
          barGap: 0,
          data: auditList,
          barWidth: 10,
        }]
      };

      this.columnChart.setOption(option)
    },
    changeTime() {
      this.search.createTimeStart = ''
      this.search.createTimeEnd = ''
      if(this.stuTime.length) {
        this.search.createTimeStart = this.stuTime[0]
        this.search.createTimeEnd = this.stuTime[1]
      }
      this.page.current = 1
      this.getList()
    }
  },
  created() {
    this.dict.load('financialOrganizationType', 'financialLoanApplyStatus')
  },
  mounted() {
    if(this.user.financeUser && this.user.financeUser.id) {  //机构
      this.search.organizationId = this.user.financeUser.organizationId
    }
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .ai-list .ai-list__content--right-wrapper{
    background: none!important;
    box-shadow: none!important;
  }
.needsStatistics {
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
  .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;
    }
  }
  .chart-flex{
    display: flex;
    height: 280px;
    margin-bottom: 20px;
    .circle-chart{
      width: 440px;
      margin-right: 20px;
      height: 100%;
      .cir-flex{
        height: calc(100% - 56px);
        display: flex;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        .total-num{
          position: absolute;
          top: 90px;
          left: 70px;
          width: 100px;
          text-align: center;
        }
        #circleChart{
          width: calc(100% - 150px);
          height: 100%;
        }
        .cir-text{
          width: 150px;
          margin: 56px 0 0 40px;
          .info{
            width: 100%;
            display: flex;
            justify-content: space-between;
            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%;
      width: calc(100% - 460px);
      #lineChart{
        height: calc(100% - 100px);
        padding-right: 20px;
        box-sizing: border-box;
      }
    }
  }
  .chart-column{
    margin-bottom: 20px;
    height: 320px;
    #columnChart{
      width: 100%;
      height: 220px;
    }
  }
  .table-content{
    width: 100%;
    .title{
      border-bottom: 1px solid #ddd;
    }
  }
  .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;
    }
  }
  .chart-content{
    background: #FFF;
    box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
    border-radius: 4px;
  }
  .title{
    line-height: 56px;
    font-size: 16px;
    font-family: MicrosoftYaHeiSemibold;
    color: #222;
    padding-left: 16px;
  }
  .status0{
    color: #f82;
  }
  .status1{
    color: #2EA222;
  }
  .status2{
    color: #f46;
  }
}
</style>
