<template>
  <div class="app-container part-container">
    <div class="financial-header">
      <div class="common-title">财务简析</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

      <div class="flex-box header-box" v-else>
        <div class="header-item">总资产<div class="header-item-amount"><template v-if="financialDetail.totalAssets"><span>{{saveFixed(financialDetail.totalAssets)}}</span>亿元</template><template v-else>--</template></div><img src="@/assets/images/detail/financial/financial_header01_ico.png"></div>
        <div class="header-item">净资产<div class="header-item-amount"><template v-if="financialDetail.belongNetAssets"><span>{{saveFixed(financialDetail.belongNetAssets)}}</span>亿元</template><template v-else>--</template></div><img src="@/assets/images/detail/financial/financial_header02_ico.png"></div>
        <div class="header-item">营业收入<div class="header-item-amount"><template v-if="financialDetail.operatingIncome"><span>{{saveFixed(financialDetail.operatingIncome)}}</span>亿元</template><template v-else>--</template></div><img src="@/assets/images/detail/financial/financial_header03_ico.png"></div>
        <div class="header-item">授信余额<div class="header-item-amount"><template v-if="financialDetail.creditBalance"><span>{{saveFixed(financialDetail.creditBalance)}}</span>亿元</template><template v-else>--</template></div><img src="@/assets/images/detail/financial/financial_header04_ico.png"></div>
      </div>
    </div>
    <div class="financial-zcqk">
      <div class="common-title">资产情况</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

      <ul class="zcqk-list" v-else>
        <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 v-if="item.amount"><i>{{saveFixed(item.amount)}}</i>{{item.unit}}</span><span v-else>--</span></div>
            <div class="zcqk-list-intro">{{item.intro}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="financial-ylnl">
      <div class="common-title">盈利能力</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

      <ul class="flex-box ylnl-list" v-else>
        <li v-for="(item, index) in ylnlList" :key="index" :style="index===0?'border-left: 0;':''">
          <div class="ylnl-amount"><template v-if="item.amount"><span>{{saveFixed(item.amount)}}</span>{{item.unit}}</template><template v-else>--</template></div>
          <div class="ylnl-title">{{item.name}}</div>
        </li>
      </ul>
    </div>
    <div class="financial-zwqk">
      <div class="common-title">负债情况及偿债能力</div>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

      <div class="flex-box zwqk-box" v-else>
        <div class="zwqk-info">
          <div class="zwqk-title">总负债</div>
          <div class="zwqk-amount"><template v-if="financialDetail.totalLiabilities"><span>{{saveFixed(financialDetail.totalLiabilities)}}</span>亿元</template><template v-else><span>--</span></template></div>
          <div class="zwqk-pro">资产负债率 {{financialDetail.tdr?saveFixed(financialDetail.tdr)+'%':'--'}}</div>
          <img src="@/assets/images/detail/financial/zwqk_bg_ico.png">
        </div>
        <div id="myEcharts" style="width: 444px;height:250px; margin: 0 auto;" v-if="echartsData.length>0"></div>
        <div class="fin-no-data" v-else>
          <no-data />
        </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"><template v-if="item.amount"><span>{{saveFixed(item.amount)}}</span>{{item.unit}}</template><template v-else>--</template></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>
      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

      <ul class="zcqk-list" v-else>
        <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 v-if="item.amount"><i>{{saveFixed(item.amount)}}</i>{{item.unit}}</span></div>
            <div class="zcqk-list-intro">{{item.intro}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {saveFixed} from "@/assets/js/common"
import { financial } from '@/api/detail/party-a/financial'
import * as echarts from 'echarts'
import skeleton from '@/views/project/projectList/component/skeleton'
import NoData from '../component/noData'
export default {
  name: 'Financial',
  props: ['companyId'],
  components: {
    NoData,skeleton
  },
  data() {
    return {
      isSkeleton:true,
      saveFixed,
      financialDetail: {},
      // 资产情况
      zcqkList: [
        { name: '总资产', ico: require('@/assets/images/detail/financial/zcqk_ico1.png'), intro: '总资产越大，表示企业规模越大', amount: '', unit: '亿元'},
        { name: '净资产', ico: require('@/assets/images/detail/financial/zcqk_ico2.png'), intro: '该指标越大说明企业实力越强', amount: '', unit: '亿元'},
        { name: '货币资金', ico: require('@/assets/images/detail/financial/zcqk_ico3.png'), intro: '该指标越大说明企业越有活力、越有保障', amount: '', unit: '亿元'},
        { name: '应收账款', ico: require('@/assets/images/detail/financial/zcqk_ico4.png'), intro: '该指标越大说明企业实力越强', amount: '', unit: '亿元'},
        { name: '土地资产', ico: require('@/assets/images/detail/financial/zcqk_ico5.png'), intro: '该指标越大说明企业越有实力，但需要关注抵押情况', amount: '', unit: '亿元'},
        { name: '其它应收款', ico: require('@/assets/images/detail/financial/zcqk_ico6.png'), intro: '该指标越大说明企业实力越强', amount: '', unit: '亿元'},
        { name: '受限资产', ico: require('@/assets/images/detail/financial/zcqk_ico7.png'), intro: '该指标越大，资产流动性越差', amount: '', unit: '亿元'},
        { name: '应收类款项来自政府占比', ico: require('@/assets/images/detail/financial/zcqk_ico8.png'), intro: '该指标越大，说明企业资质及信用越好', amount: '', unit: '%'},
        { name: '政府补助', ico: require('@/assets/images/detail/financial/zcqk_ico9.png'), intro: '该指标越大，说明企业越被政府看好与扶持', amount: '', unit: '亿元'}
      ],
      // 负债情况及偿债能力
      zwqkList: [
        { name: '借款总额', ico: require('@/assets/images/detail/financial/zwqk_ico1.png'), intro: '借款/有息债务', introPro: '', amount: '', unit: '亿元'},
        { name: '债券余额', ico: require('@/assets/images/detail/financial/zwqk_ico2.png'), intro: '债券余额/有息债务', introPro: '', amount: '', unit: '亿元'},
        { name: '非标余额', ico: require('@/assets/images/detail/financial/zwqk_ico3.png'), intro: '非标余额/有息债务', introPro: '', amount: '', unit: '亿元'},
        { name: '对外担保金额', ico: require('@/assets/images/detail/financial/zwqk_ico4.png'), intro: '对外担保比例', introPro: '', amount: '', unit: '亿元'}
      ],
      echartsData: [],
      ylnlList: [
        { name: '营业收入', amount: '', unit: '亿元'},
        { name: '净资产收益率', amount: '', unit: '%'},
        { name: '归母净利润', amount: '', unit: '亿元'},
        { name: '公益性&准公益性主营占比', amount: '', unit: '%'},
      ],
      // 资金情况
      zjqkList: [
        { name: '经营现金流', ico: require('@/assets/images/detail/financial/zjqk_ico1.png'), intro: '该指标越高，说明经营活动的造血能力越强', amount: '', unit: '亿元'},
        { name: '现金比率', ico: require('@/assets/images/detail/financial/zjqk_ico2.png'), intro: '该指标越高，风险越低', amount: '', unit: '%'},
        { name: '筹资现金流', ico: require('@/assets/images/detail/financial/zjqk_ico3.png'), intro: '该指标越高，说明负债越高', amount: '', unit: '亿元'},
        { name: '现金流量比率', ico: require('@/assets/images/detail/financial/zjqk_ico4.png'), intro: '该指标越高，风险越低', amount: '', unit: '%'},
        { name: '投资现金流', ico: require('@/assets/images/detail/financial/zjqk_ico5.png'), intro: '该指标越高，说明投资带来的收益越高', amount: '', unit: '亿元'},
        { name: '现金到期债务比', ico: require('@/assets/images/detail/financial/zjqk_ico6.png'), intro: '该指标越高，风险越低', amount: '', unit: '%'}
      ]
    }
  },
  computed: {
    //判断奇偶
    parity() {
      return function(val) {
        let flag = true
        if(val.length % 2 == 0){
          flag = true
        }else{
          flag = false
        }
        return flag
      }
    },
  },
  created() {
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    async handleQuery() {
      this.isSkeleton = true;
      this.tableLoading = true
      let res = await financial({cid:this.companyId})
      this.tableLoading = false
      if(res.code==200 && res.data){
        this.isSkeleton = false;
        this.financialDetail = res.data
        //资产情况
        let { totalAssets, belongNetAssets, monetaryFunds, accountsReceivable, landAssets, otherReceivable, restrictedAssets, receivableFromGovRatio, govSubsidy } = this.financialDetail
        let zcqkObj = { totalAssets, belongNetAssets, monetaryFunds, accountsReceivable, landAssets, otherReceivable, restrictedAssets, receivableFromGovRatio, govSubsidy }
        this.zcqkList.forEach((item, index) => {
          item.amount = zcqkObj[Object.keys(zcqkObj)[index]]
        })
        //负债情况及偿债能力
        let { loan, econData_006, bondBalance, econData_005, nonStandardBalance, nonStandardRatio, guaranteeAmount, guaranteeRatio } = this.financialDetail
        let zwAmountObj = { loan, bondBalance, nonStandardBalance, guaranteeAmount }
        let zwPercentObj = { econData_006, econData_005, nonStandardRatio, guaranteeRatio }
        this.zwqkList.forEach((item, index) => {
          item.amount = zwAmountObj[Object.keys(zwAmountObj)[index]]
          item.introPro = zwPercentObj[Object.keys(zwPercentObj)[index]]?saveFixed(zwPercentObj[Object.keys(zwPercentObj)[index]])+'%':''
        })
        //盈利能力
        let { operatingIncome, roe, belongNetProfit, econData_001 } = this.financialDetail
        let ylnlObj = { operatingIncome, roe, belongNetProfit, econData_001 }
        this.ylnlList.forEach((item, index) => {
          item.amount = ylnlObj[Object.keys(ylnlObj)[index]]
        })
        //资金情况
        let { netOperatingCashFlow, cashRatio, netFinancingCashFlow, cashFlowRatio, netInvestmentCashFlow, cashDebtRatio } = this.financialDetail
        let zjqkObj = { netOperatingCashFlow, cashRatio, netFinancingCashFlow, cashFlowRatio, netInvestmentCashFlow, cashDebtRatio }
        this.zjqkList.forEach((item, index) => {
          item.amount = zjqkObj[Object.keys(zjqkObj)[index]]
        })
        this.echartsData = [
          { value: res.data.econData_002, name: '有息债务/总债务' },
          { value: res.data.ofcb, name: '综合融资成本' },
          { value: res.data.ebitdaIcr, name: 'EBITDA保障倍数' }
        ]
        this.$nextTick(() => {
          this.getEcharts()
        })
      }
    },
    getEcharts(){
      let myChart = echarts.init(document.getElementById("myEcharts"));
      //配置图表
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function (a, b) {
            let radius = "<span style='display: inline-block; background: "+a.color+"; width:12px; height:12px; border-radius: 50%; margin-right: 6px;'></span>"
            return radius+a.name +' '+ (a.percent).toFixed(2) + '%'
          }
        },
        grid: {
          left:"0",
          top:"0",
          right:'0',
          bottom:"0",
          containLabel:true
        },
        color: ['#5B9CF7','#8DCF96','#FFDC6B','#FE9C77','#8A82F3'],
        legend: {
          selectedMode: false,
          x: 'center',
          y: 'bottom',
          itemHeight: 9,
          itemWidth:12,
          itemHeight:8,
          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)
      // 默认高亮
        let index = 0; // 高亮索引
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: index,
          dataIndex: index
        });
        myChart.on("mouseover", function(e) {
          if (e.dataIndex != index) {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index
            });
          }
        });
        myChart.on("mouseout", function(e) {
          index = e.dataIndex;
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
        });
    }
  }
}
</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: -4px;
              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-ylnl{
      background: #FFFFFF;
      padding: 24px 16px;
      margin-top: 12px;
      border-radius: 4px;
      .ylnl-list{
        justify-content: space-between;
        li{
          color: #232323;
          width: 25%;
          height: 72px;
          padding-top: 18px;
          font-size: 16px;
          text-align: center;
          border-left: 1px solid #EEEEEE;
          .ylnl-amount{
            font-size: 14px;
            font-weight: bold;
            padding-bottom: 4px;
            span{
              font-size: 18px;
              margin-right: 4px;
            }
          }
        }
      }
    }
    .financial-zwqk{
      background: #FFFFFF;
      padding: 24px 16px;
      margin-top: 12px;
      border-radius: 4px;
      .zwqk-box{
        padding-top: 20px;
        justify-content: normal;
        .zwqk-info{
          width: calc(50% - 11px);
          margin-right: 11px;
          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;
          }
        }
        .fin-no-data{
          width: calc(50% - 11px);
          height: 250px;
          margin-left: 11px;
        }
      }
      .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;
            img{
              width: 30px;
              height: 30px;
            }
          }
          .list-item-amount{
            height: 39px;
            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>
