<template>
  <div class="investment-financing-assets">
    <div class="assets-top">
      <div class="top-left">
        <div class="statistics">
          <img src="@/assets/img/publicTitle/title-债权.png" alt="">
          <div class="statistics-content">
            <div class="title">总账面价值(万元)</div>
            <div class="num">818.67</div>
            <div class="line"></div>
            <div class="totality">总共盘点资产<span>21232 个</span></div>
          </div>
        </div>
        <div class="left-content">
          <div class="content-col">
            <div class="item">
              <div>
                <div class="amount">64.26</div>
                <div class="label" style="color:#7A8899">提前还款金额(万元)</div>
              </div>

            </div>
            <div class="item">
              <div>
                <div class="amount">1</div>
                <div class="label" style="color:#7A8899">提前还款笔数(笔)</div>
              </div>
            </div>
          </div>
          <div class="content-col" style="color:#E54552 ">
            <div class="item">
              <div>
                <div class="amount">64.26</div>
                <div class="label">逾期金额(万元)</div>
              </div>
            </div>
            <div class="item">
              <div>
                <div class="amount">1</div>
                <div class="label">逾期笔数(笔)</div>
              </div>
            </div>
          </div>
          <div class="content-col" style="color:#E57E17 ">
            <div class="item">
              <div>
                <div class="amount">64.26</div>
                <div class="label">到期金额(万元)</div>
              </div>
            </div>
            <div class="item">
              <div>
                <div class="amount">1</div>
                <div class="label">到期笔数(笔)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right">
        <PublicTitle :iconUrl="require('@/assets/img/publicTitle/icon-固定资产.png')" title="利息归还趋势" />
        <div id="interest-chart"></div>
      </div>

    </div>
    <div class="assets-bottom">
      <PublicTitle :iconUrl="require('@/assets/img/publicTitle/icon-固定资产.png')" title="债权异常订单提醒" />
      <el-table :data="tableData" stripe style="width: 100%;" height="calc(100% - 30px)" class="abnormal-table"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                :row-class-name="tableRowClassName">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="借款对象" width="180">
        </el-table-column>
        <el-table-column prop="way" label="交易方式" width="180">
        </el-table-column>
        <el-table-column prop="contract" label="合同金额">
        </el-table-column>
        <el-table-column prop="interest" label="还本付息方式">
        </el-table-column>
        <el-table-column prop="repayment" label="应还款金额">
        </el-table-column>
        <el-table-column prop="expire" label="到期还款时间">
        </el-table-column>
        <el-table-column prop="remaining" label="剩余还款时间">
          <template v-slot="scope">
            <span style="color:#E54552">{{ scope.row.remaining }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import utils from '@/utils/utils.js'
import PublicTitle from '@/components/PublicTitle/index'

export default {
  name: 'InvestmentFinancingAssets',
  props: {},
  components: {
    PublicTitle
  },
  data() {
    return {
      tableData: [
        {
          name: 'XXXXXXX公司',
          way: '现金',
          contract: '223.25 万元',
          interest: '到期还本按季计息',
          repayment: '223.25 万元',
          expire: '2023-12-30',
          remaining: '已逾期10天'
        }, {
          name: 'XXXXXXX公司',
          way: '现金',
          contract: '223.25 万元',
          interest: '到期还本按季计息',
          repayment: '223.25 万元',
          expire: '2023-12-30',
          remaining: '已逾期10天'
        }, {
          name: 'XXXXXXX公司',
          way: '现金',
          contract: '223.25 万元',
          interest: '到期还本按季计息',
          repayment: '223.25 万元',
          expire: '2023-12-30',
          remaining: '已逾期10天'
        }, {
          name: 'XXXXXXX公司',
          way: '现金',
          contract: '223.25 万元',
          interest: '到期还本按季计息',
          repayment: '223.25 万元',
          expire: '2023-12-30',
          remaining: '已逾期10天'
        }, {
          name: 'XXXXXXX公司',
          way: '现金',
          contract: '223.25 万元',
          interest: '到期还本按季计息',
          repayment: '223.25 万元',
          expire: '2023-12-30',
          remaining: '已逾期10天'
        }, {
          name: 'XXXXXXX公司',
          way: '现金',
          contract: '223.25 万元',
          interest: '到期还本按季计息',
          repayment: '223.25 万元',
          expire: '2023-12-30',
          remaining: '已逾期10天'
        }
      ]
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.interestChart()
    })
  },
  methods: {
    interestChart() {
      let xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let bookData = [22, 44, 22, 11, 20, 44, 23, 56, 77, 44, 42, 31]

      let chartDom = echarts.init(
        document.getElementById('interest-chart')
      )
      let option = {
        tooltip: {
          trigger: 'axis' // 设置触发类型为坐标轴轴线触发
        },
        grid: {
          top: '10%',
          bottom: '5%',
          right: '3%',
          left: '3%'
        },
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#A1A9B2' // 浅灰色
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：万元',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#A1A9B2' // 浅灰色
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: 'line',
            data: bookData,
            type: 'line',
            smooth: true,
            // symbol: 'none', // 取消小圆点的显示
            showSymbol: false, // 取消小圆点的显示
            lineStyle: {
              color: '#198CFF' // 设置线条的颜色为红色
            }
          }
        ]
      }
      chartDom.setOption(option)
      window.addEventListener('resize', () => {
        chartDom.resize()
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'even-row'
      } else {
        return 'odd-row'
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.investment-financing-assets {
  padding: 16px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .assets-top {
    width: 100%;
    height: calc(50% - 8px);
    display: flex;
    justify-content: space-between;

    .top-left {
      width: 30%;
      height: 100%;
      padding: 16px;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 4px 4px 10px 0 rgba(53, 152, 220, 0.1);
      border-radius: 16px 16px 16px 16px;
      opacity: 1;

      .statistics {
        height: 152PX;
        background: #198CFF;
        border-radius: 8px 8px 8px 8px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        img {
          width: 164px;
          height: 152px;
        }

        .statistics-content {
          height: 100%;
          padding: 24px 0;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .title {
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 21px;
          }

          .num {
            font-size: 26px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 700;
            color: #FFFFFF;
            line-height: 26px;
          }

          .line {
            width: 233px;
            height: 0;
            opacity: 1;
            border: 1px solid #E6F1FF;
          }

          .totality {
            font-size: 14px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 18px;

            span {
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 700;
              color: #FFFFFF;
              line-height: 21px;
            }
          }
        }
      }

      .left-content {
        width: 100%;
        height: calc(100% - 168PX);
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid #E6F1FF;
        margin-top: 16px;

        .content-col {
          height: 33.3%;
          box-sizing: border-box;
          border-bottom: 1px solid #E6F1FF;
          display: flex;

          .item {
            width: 50%;
            height: 100%;
            box-sizing: border-box;
            border-right: 1px solid #E6F1FF;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

            .amount {
              font-size: 26px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 700;
              // color: #0F2A4D;
              line-height: 34px;
            }

            .label {
              font-size: 16px;
              font-family: Microsoft YaHei, Microsoft YaHei;
              font-weight: 400;
              // color: #7A8899;
              line-height: 21px;
            }
          }

          :nth-of-type(2) {
            border: none;
          }
        }

        :nth-of-type(3) {
          border: none;

        }
      }
    }

    .top-right {
      width: calc(70% - 16px);
      height: 100%;
      padding: 16px;
      box-sizing: border-box;
      background: #FFFFFF;
      box-shadow: 4px 4px 10px 0 rgba(53, 152, 220, 0.1);
      border-radius: 16px 16px 16px 16px;
      opacity: 1;

      #interest-chart {
        width: 100%;
        height: calc(100% - 30px);
      }
    }
  }

  .assets-bottom {
    width: 100%;
    height: calc(50% - 8px);
    padding: 16px;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 4px 4px 10px 0 rgba(53, 152, 220, 0.1);
    border-radius: 16px 16px 16px 16px;
    opacity: 1;
  }


}

::v-deep .el-table .even-row td {
  background-color: #FFFFFF !important;
}

::v-deep .el-table .odd-row td {
  background-color: #FAFAFA !important;
}
</style>
<style lang="scss">
.abnormal-table .el-table thead tr,
.el-table thead tr th {
  background: #EEF8FF !important;
}
</style>
