<template>
  <section class="needsStatistics">
    <ai-search-bar>
      <template #left>
        <ai-area-get :instance="instance" v-model="search.areaId" @change="page.current=1,getTableData()"
                     :root="user.info.areaId" :clearable="false"/>
        <ai-select v-model="search.organizationId" placeholder="金融机构" clearable :prop="{label:'organizationName'}"
                   :action='"/appfinancialorganization/list?id="+userOrgId'
                   @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.status" placeholder="状态" clearable
                     :selectList="dict.getDict('financingDemandStatus')" @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="appfinancingdemand/export" :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('financingDemandStatus', 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,
  },
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      search: {organizationId: '', name: '', createTimeStart: '', createTimeEnd: '', status: '', areaId: ""},
      page: {current: 1, total: 10},
      circleChart: null,
      lineChart: null,
      columnChart: null,
      tableData: [],
      colConfigs: [
        // {label: "产品名称", width: '200', prop: "enterpriseName"},
        {label: "联系人", width: '150', prop: "name"},
        {label: "联系方式", width: '150', prop: "phone"},
        // {label: "身份证号", width: '180', prop: "idNumber"},
        {label: "企业主体", width: '200', prop: "enterpriseName"},
        {label: "意向金额(万)", width: '150', prop: "loanAmount"},
        {label: "申请时间", width: '180', prop: "createTime"},
        {label: "客户经理", width: '200', prop: "auditUserName"},
        {label: "贷款银行", width: '200', prop: "organizationName"},
        {label: "放款金额(万)", width: '200', prop: "auditAmount"},
        // {label: "机构类型", width: '200', prop: "organizationType", dict:'financialOrganizationType'},
        {slot: "options"}
      ],
      cloList: [],
      applyInfo: {},
      demandInfo: {},
      staticInfo: {},
      stuTime: [],
      userOrgId: ''
    }
  },
  methods: {
    getTableData() {
      this.instance.post(`/appfinancingdemand/staticFinancialDemandByOrganization?areaId=${this.search.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.search.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.search.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.search.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() {
      let status = this.search.status || 999
      this.instance.post("/appfinancingdemand/list", null, {
        params: {...this.page, ...this.search, status}
      }).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 && this.stuTime.length) {
        this.search.createTimeStart = this.stuTime[0]
        this.search.createTimeEnd = this.stuTime[1]
      }
      this.page.current = 1
      this.getList()
    }
  },
  created() {
    this.search.areaId = this.user.info.areaId
    if (this.user.financeUser && this.user.financeUser.id) {  //机构
      this.search.organizationId = this.user.financeUser.organizationId
      this.userOrgId = this.user.financeUser.organizationId
    }
    this.dict.load('financialOrganizationType', 'financialLoanApplyStatus', 'financingDemandStatus').then(() => {
      this.getTableData()
    })
  },
  mounted() {


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

  .AiAreaGet {
    width: 300px;
  }

  .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;
          p{
            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>
