<template>
  <section class="needsStatistics">
    <ai-search-bar>
      <template #left>
        <ai-select v-model="search.messageType" placeholder="金融机构" clearable :selectList="$dict.getDict('dlbResourceType')" @change="getTableData()"></ai-select>          
      </template>
    </ai-search-bar>
    <div class="col-row">
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </div>
      <div class="item">
        <p>累计发布需求</p>
        <h2>20</h2>
      </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>108</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>65</div>
            </div>
            <div class="info">
              <p><span class="tips-bg" style="background: #FFB865;"></span>个人融资</p>
              <div>65</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.messageType" placeholder="金融机构" clearable :selectList="$dict.getDict('dlbResourceType')" @change="getTableData()"></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="page.current=1,getList()"/>
          </ai-search>     
        </template>
        <template #right>
          <el-input size="small" placeholder="搜索企业名称" v-model="search.messageType" 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">
          <template slot-scope="{row}">
            <el-button type="text">详情</el-button>
          </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: {messageType: ''},
      page: {current: 1, total: 10},
      circleChart: null,
      lineChart: null,
      columnChart: null,
      tableData: [],
      colConfigs: [
        {label: "产品名称", width: '200', prop: "enterpriseName"},
        {label: "联系人", width: '100', prop: "areaName"},
        {label: "联系方式", width: '140', prop: "loanAmount"},
        {label: "身份证号", width: '180', prop: "createTime"},
        {label: "企业主体", width: '200', prop: "name"},
        {label: "贷款金额(万)", width: '120', prop: "phone"},
        {label: "申请时间", width: '180', prop: "remark"},
        {label: "贷款机构", width: '200', prop: "remark"},
        {label: "机构类型", width: '200', prop: "remark"},
        {slot: "options"}
      ],
    }
  },
  methods: {
    getTableData() {
      this.circleChartInit()
      this.lineChartInit()
      this.columnChartInit()
      this.getList()
    },
    getList() {
      this.instance.post("/appfinancingdemand/list", null, {
        params: {...this.page, ...this.search, status: 0}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records
          this.page.total = res.data.total
        }
      })
    },
    circleChartInit() {
      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: 180},
              { value: 20},
            ]
          }
        ]

      };

      this.circleChart.setOption(option)
    },
    lineChartInit() {
      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: ['2020-07', '2020-08', '2020-09', '2020-10', '2020-11']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '申请笔数',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: { 
              normal: { 
                lineStyle:{ 
                  color:'#2891FF'
                }
              }
            }
          },
          {
            name: '放款笔数',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle: { 
              normal: { 
                lineStyle:{ 
                  color:'#26D52B'
                }
              }
            }
          },
        ]
      };
      this.lineChart.setOption(option)
    },
    columnChartInit() {
      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: ['重庆银行秀山支行', '哈尔滨银行秀山支行', '重庆银行五岳广场支行', '重庆秀山北银村镇银行']
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '申请数量',
          type: 'bar',
          barGap: 0,
          data: [100, 80, 90, 100, 60],
          barWidth: 10,
        },
        {
          name: '放款数量',
          type: 'bar',
          barGap: 0,
          data: [100, 80, 90, 100, 60],
          barWidth: 10,
        }]
      };

      this.columnChart.setOption(option)
    }
  },
  mounted() {
    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;
  }
}
</style>
