<template>
  <div class="app-container part-container">
    <div class="financial-header">
      <div class="common-title">财务简析</div>
      <div class="flex-box header-box">
        <div class="header-item">总资产<div class="header-item-amount"><span>9332.6</span>亿元</div><img src="@/assets/images/detail/financial/financial_header01_ico.png"></div>
        <div class="header-item">净资产<div class="header-item-amount"><span>459.4</span>亿元</div><img src="@/assets/images/detail/financial/financial_header02_ico.png"></div>
        <div class="header-item">营业收入<div class="header-item-amount"><span>150.0</span>亿元</div><img src="@/assets/images/detail/financial/financial_header03_ico.png"></div>
        <div class="header-item">授信余额<div class="header-item-amount"><span>192.11</span>亿元</div><img src="@/assets/images/detail/financial/financial_header04_ico.png"></div>
      </div>
    </div>
    <div class="financial-zcqk">
      <div class="common-title">资产情况</div>
      <ul class="zcqk-list">
        <li v-for="(item, index) in zcqkList" :key="index" :style="zcqkList.length==1?'border-right: 0;':''">
          <div class="zcqk-list-box" :style="(parity(zcqkList) && index==zcqkList.length-2) || (index == zcqkList.length-1)?'border-bottom: 0':''">
            <div class="flex-box zcqk-list-line"><span class="flex-box"><img :src="item.ico">{{item.name}}</span><span><i>{{item.amount}}</i>亿元</span></div>
            <div class="zcqk-list-intro">{{item.intro}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="financial-zwqk">
      <div class="common-title">负债情况及偿债能力</div>
      <div class="flex-box zwqk-box">
        <div class="zwqk-info">
          <div class="zwqk-title">总负债</div>
          <div class="zwqk-amount"><span>468.65</span>亿元</div>
          <div class="zwqk-pro">资产负债率 50%</div>
          <img src="@/assets/images/detail/financial/zwqk_bg_ico.png">
        </div>
        <div id="myEcharts" style="width: 444px;height:250px; margin: 0 auto;"></div>
      </div>
      <div class="flex-box zwqk-list">
        <div class="list-item" v-for="(item, index) in zwqkList" :key="index">
          <div class="flex-box list-item-all">{{item.name}}<img :src="item.ico"></div>
          <div class="list-item-amount"><span>{{item.amount}}</span>{{item.unit}}</div>
          <div class="list-item-pro">{{item.intro}}<span>{{item.introPro}}</span></div>
        </div>
      </div>
    </div>
    <div class="financial-zcqk">
      <div class="common-title">资金情况</div>
      <ul class="zcqk-list">
        <li v-for="(item, index) in zjqkList" :key="index" :style="zjqkList.length==1?'border-right: 0;':''">
          <div class="zcqk-list-box" :style="(parity(zjqkList) && index==zjqkList.length-2) || (index == zjqkList.length-1)?'border-bottom: 0':''">
            <div class="flex-box zcqk-list-line"><span class="flex-box"><img :src="item.ico">{{item.name}}</span><span><i>{{item.amount}}</i>{{item.unit}}</span></div>
            <div class="zcqk-list-intro">{{item.intro}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Financial',
  props: ['companyId'],
  data() {
    return {
      // 资产情况
      zcqkList: [
        { name: '总资产', ico: require('@/assets/images/detail/financial/zcqk_ico1.png'), intro: '总资产越大，表示企业规模越大', amount: '99213', unit: '亿元'},
        { name: '净资产', ico: require('@/assets/images/detail/financial/zcqk_ico2.png'), intro: '该指标越大说明企业实力越强', amount: '99213', unit: '亿元'},
        { name: '货币资金', ico: require('@/assets/images/detail/financial/zcqk_ico3.png'), intro: '该指标越大说明企业越有活力、越有保障', amount: '99213', unit: '亿元'},
        { name: '应收账款', ico: require('@/assets/images/detail/financial/zcqk_ico4.png'), intro: '该指标越大说明企业实力越强', amount: '99213', unit: '亿元'},
        { name: '土地资产', ico: require('@/assets/images/detail/financial/zcqk_ico5.png'), intro: '该指标越大说明企业越有实力，但需要关注抵押情况', amount: '99213', unit: '亿元'},
        { name: '其它应收款', ico: require('@/assets/images/detail/financial/zcqk_ico6.png'), intro: '该指标越大说明企业实力越强', amount: '99213', unit: '亿元'},
        { name: '受限资产', ico: require('@/assets/images/detail/financial/zcqk_ico7.png'), intro: '该指标越大，资产流动性越差', amount: '99213', unit: '亿元'},
        { name: '应收类款项来自政府占比', ico: require('@/assets/images/detail/financial/zcqk_ico8.png'), intro: '该指标越大，说明企业资质及信用越好', amount: '99213', unit: '亿元'},
        { name: '政府补助', ico: require('@/assets/images/detail/financial/zcqk_ico9.png'), intro: '该指标越大，说明企业越被政府看好与扶持', amount: '99213', unit: '亿元'}
      ],
      // 负债情况及偿债能力
      zwqkList: [
        { name: '借款总额', ico: require('@/assets/images/detail/financial/zwqk_ico1.png'), intro: '借款/有息债务', introPro: '95.19%', amount: '1699.7', unit: '亿元'},
        { name: '债券余额', ico: require('@/assets/images/detail/financial/zwqk_ico2.png'), intro: '债券余额/有息债务', introPro: '95.19%', amount: '1699.7', unit: '亿元'},
        { name: '非标余额', ico: require('@/assets/images/detail/financial/zwqk_ico3.png'), intro: '非标余额/有息债务', introPro: '95.19%', amount: '1699.7', unit: '亿元'},
        { name: '对外担保金额', ico: require('@/assets/images/detail/financial/zwqk_ico4.png'), intro: '对外担保比例', introPro: '95.19%', amount: '1699.7', unit: '亿元'}
      ],
      echartsData: [
        { value: 1048, name: '有息债务' },
        { value: 735, name: '有息债务/总债务' },
        { value: 580, name: '综合融资成本' },
        { value: 484, name: 'EBITDA保障倍数' }
      ],
      // 资金情况
      zjqkList: [
        { name: '经营现金流', ico: require('@/assets/images/detail/financial/zjqk_ico1.png'), intro: '该指标越高，说明经营活动的造血能力越强', amount: '99213', unit: '亿元'},
        { name: '现金比率', ico: require('@/assets/images/detail/financial/zjqk_ico2.png'), intro: '该指标越高，风险越低', amount: '0.8', unit: '%'},
        { name: '筹资现金流', ico: require('@/assets/images/detail/financial/zjqk_ico3.png'), intro: '该指标越高，说明负债越高', amount: '99213', unit: '亿元'},
        { name: '现金流量比率', ico: require('@/assets/images/detail/financial/zjqk_ico4.png'), intro: '该指标越高，风险越低', amount: '0.8', unit: '%'},
        { name: '投资现金流', ico: require('@/assets/images/detail/financial/zjqk_ico5.png'), intro: '该指标越高，说明投资带来的收益越高', amount: '99213', unit: '亿元'},
        { name: '现金到期债务比', ico: require('@/assets/images/detail/financial/zjqk_ico6.png'), intro: '该指标越高，风险越低', amount: '0.8', unit: '%'}
      ]
    }
  },
  computed: {
    //判断奇偶
    parity() {
      return function(val) {
        let flag = true
        if(val.length % 2 == 0){
          flag = true
        }else{
          flag = false
        }
        return flag
      }
    },
  },
  created() {
  },
  mounted() {
    this.getEcharts()
  },
  methods: {
    getEcharts(){
      let myChart = echarts.init(document.getElementById("myEcharts"));
      //配置图表
      let option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left:"0",
          top:"0",
          right:'0',
          bottom:"0",
          containLabel:true
        },
        color: ['#5B9CF7','#8DCF96','#FFDC6B','#FE9C77','#8A82F3'],
        legend: {
          x: 'center',
          y: 'bottom',
          itemHeight: 9,
          textStyle: {
            padding: [0, 0, -2, 0],
            color: '#000000',
            backgroundColor: "transparent",
            fontSize: 11,
            rich: {
              a: {
              },
            },
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              formatter: '{title|{d}%}\n{b}',
              rich: {
                title: {
                  fontSize: 18,
                  align: 'center',
                  padding: [0, 0, 6, 0]
                }
              },
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 11,
                color: '#3D3D3D'
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartsData
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear() //清空
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .part-container{
    margin: 0;
    padding: 0;
    .financial-header{
      background: #FFFFFF;
      padding: 24px 16px;
      border-radius: 4px;
      .header-box {
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 -8px;
        .header-item{
          width: calc(25% - 16px);
          height: 120px;
          margin: 20px 8px 0;
          padding: 24px 24px;
          font-size: 18px;
          position: relative;
          overflow: hidden;
          img{
            position: absolute;
            right: 0;
            bottom: 0;
          }
          &:nth-child(1){
            color: #182980;
            background: url("~@/assets/images/detail/financial/financial_header01.png") no-repeat;
            background-size: 100% 100%;
            img{
              width: 115px;
              height: 115px;
              right: -9px;
              bottom: -16px;
            }
          }
          &:nth-child(2){
            color: #2B1880;
            background: url("~@/assets/images/detail/financial/financial_header02.png") no-repeat;
            background-size: 100% 100%;
            img{
              width: 107px;
              height: 116px;
              right: -9px;
              bottom: -17px;
            }
          }
          &:nth-child(3){
            color: #184280;
            background: url("~@/assets/images/detail/financial/financial_header03.png") no-repeat;
            background-size: 100% 100%;
            img{
              width: 109px;
              height: 99px;
              right: -12px;
              bottom: -2px;
            }
          }
          &:nth-child(4){
            color: #184A80;
            background: url("~@/assets/images/detail/financial/financial_header04.png") no-repeat;
            background-size: 100% 100%;
            img{
              width: 84px;
              height: 115px;
              right: -10px;
              bottom: -18px;
            }
          }
          .header-item-amount{
            font-size: 12px;
            margin-top: 16px;
            span{
              font-size: 24px;
              margin-right: 7px;
            }
          }
        }
      }
    }
    .financial-zcqk{
      background: #FFFFFF;
      padding: 24px 16px;
      margin-top: 12px;
      border-radius: 4px;
      .zcqk-list{
        margin-top: 4px;
        overflow: hidden;
        li{
          width: 50%;
          height: 80px;
          padding-top: 20px;
          float: left;
          color: #232323;
          &:nth-child(2n-1){
            border-right: 1px solid #EEEEEE;
            >div{
              margin-right: 16px;
            }
          }
          &:nth-child(2n){
            >div{
              margin-left: 16px;
            }
          }
          .zcqk-list-box{
            height: 100%;
            border-bottom: 1px solid #EEEEEE;
            .zcqk-list-line{
              font-size: 14px;
              justify-content: space-between;
              img{
                width: 20px;
                height: 20px;
                margin-right: 7px;
              }
              span{
                display: block;
                &:first-child{
                  font-size: 16px;
                }
                i{
                  font-style: normal;
                  font-size: 18px;
                  margin-right: 4px;
                }
              }
            }
            .zcqk-list-intro{
              font-size: 12px;
              position: relative;
              padding: 6px 0 0 36px;
              &:before {
                content: "";
                position: absolute;
                width: 1px;
                height: 1px;
                top: 13px;
                left: 28px;
                border-radius: 50%;
                border: 2px solid #4F4F4F;
              }
            }
          }
        }
      }
    }
    .financial-zwqk{
      background: #FFFFFF;
      padding: 24px 16px;
      margin-top: 12px;
      border-radius: 4px;
      .zwqk-box{
        padding-top: 20px;
        justify-content: normal;
        .zwqk-info{
          width: 50%;
          height: 248px;
          padding: 54px 24px 10px 24px;
          color: #4D4C4B;
          background: url("~@/assets/images/detail/financial/zwqk_bg.png") no-repeat;
          background-size: 100% 100%;
          position: relative;
          overflow: hidden;
          img{
            width: 239px;
            height: 239px;
            position: absolute;
            right: -54px;
            bottom: -31px;
          }
          .zwqk-title{
            font-size: 22px;
            font-weight: 400;
            line-height: 0.9;
            position: relative;
            padding: 0 0 0 16px;
            &:before{
              position: absolute;
              left: 0;
              top: 0;
              width: 3px;
              height: 18px;
              background: rgba(77,76,75,0.5);
              content:"";
            }
          }
          .zwqk-amount{
            font-size: 16px;
            margin-top: 32px;
            span{
              font-size: 40px;
              font-weight: bold;
              margin-right: 8px;
            }
          }
          .zwqk-pro{
            font-size: 16px;
            margin-top: 33px;
          }
        }
      }
      .zwqk-list{
        justify-content: space-between;
        flex-wrap: wrap;
        .list-item{
          width: calc(25% - 16px);
          height: 144px;
          padding: 23px;
          margin-top: 24px;
          color: #3D3D3D;
          border: 1px solid #E2E7EE;
          .list-item-all{
            align-items: normal;
            justify-content: space-between;
          }
          .list-item-amount{
            padding-top: 11px;
            span{
              font-size: 24px;
              font-weight: bold;
              margin-right: 4px;
            }
          }
          .list-item-pro{
            font-size: 12px;
            padding-top: 11px;
            span{
              color: #FF3C3C;
              margin-left: 2px;
            }
          }
        }
      }
    }
  }
</style>
