<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-ContractStatistics">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">合同结算统计</span>
        </div>
      </div>
      <div class="content-info">
        <!--  -->
        <div class="accumulated-content">
          <div class="icon-content">
            <img :src="require('@/views/groupPage/images/模块图标/统计分析/累计图标.png')" />
          </div>
          <div class="amount-content">
            <span>{{ totalSettleAmount }}万元</span>
            <span>累计结算金额</span>
          </div>
        </div>
        <!--  -->
        <div class="investment-content">
          <div class="ic-top">
            <span>年度投资计划：</span>
            <span>{{ investYearMoney }}亿元</span>
          </div>
          <div class="ic-splitLine"></div>
          <div class="ic-bottom">
            <div class="icb-left">
              <span>{{ settleYearMoney }}万元</span>
              <span>年度累积结算</span>
            </div>
            <div class="icb-arrow"></div>
            <div class="icb-right">
              <ComLiquidFillChart :percent="percent" />
            </div>
          </div>
        </div>
        <!--  -->
        <div class="transitstatus-content">
          <span>在途结算金额：</span>
          <span>{{ transitstatusMoney }}万元</span>
        </div>
        <!--  -->
        <div class="chart-content">
          <ComSettlementChart :chartData="chartData" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComLiquidFillChart from '../../../components/OthersChart/ComLiquidFillChart.vue'
import ComSettlementChart from '../../../components/BarChart/ComSettlementChart.vue'
import { getRequestResult, getDangerCheckCountData } from '../../../apis'
import { roundFun } from '@/views/groupPage/util'
const legendNameList = [
  { key: 'lx_cost', name: '建设期利息' },
  { key: 'one_cost', name: '一类费用' },
  { key: 'two_cost', name: '二类费用' },
  { key: 'rest_cost', name: '存量' },
  { key: 'yunwei_cost', name: '运维' },
  { key: 'unique_cost', name: '专项费用' },
  { key: 'ready_cost', name: '预备费用' }
]
//合同结算统计
@Component({
  name: 'ContractStatistics',
  components: { ComLiquidFillChart, ComSettlementChart }
})
export default class ContractStatistics extends Vue {
  @Prop({ type: Array, default: () => {} }) dataInfo!: any
  totalSettleAmount = 0 //累计结算金额
  investYearMoney = 0 //年度投资计划
  settleYearMoney = 0 //年度累计结算
  transitstatusMoney = 0 //在途结算金额
  percent = 0 //累计结算百分比
  chartData = null
  @Watch('dataInfo')
  onChangMehod() {
    this.getData()
  }
  getData() {
    const investInfo = this.dataInfo[0]
    const { invest_year_money, on_load_cost } = investInfo || {}
    this.investYearMoney = roundFun(invest_year_money, 2)
    this.transitstatusMoney = roundFun(on_load_cost, 2)
    let amount = 0,
      totalAmount = 0,
      amountArr = [],
      totalAmountArr = []
    this.chartData = null
    Object.keys(investInfo).forEach((key) => {
      if (key.includes('_year') && key != 'invest_year_money') {
        amount += +investInfo[key]
        amountArr.push({ type: key.substring(0, key.lastIndexOf('_')), value: roundFun(investInfo[key], 2) })
      }
      if (key.includes('_all')) {
        totalAmount += +investInfo[key]
        totalAmountArr.push({ type: key.substring(0, key.lastIndexOf('_')), value: roundFun(investInfo[key], 2) })
      }
    })
    this.settleYearMoney = roundFun(amount, 2)
    this.totalSettleAmount = roundFun(totalAmount, 2)
    this.percent = roundFun(this.settleYearMoney / 10000 / this.investYearMoney, 2)
    //
    let legendData = [],
      totalSta = [],
      annualSta = []
    amountArr.forEach((item) => {
      legendData.push(this.getLegnedName(item.type))
      annualSta.push(item.value)
      totalSta.push(totalAmountArr.find((i) => i.type == item.type).value || 0)
    })
    this.chartData = {
      legendData,
      totalSta,
      annualSta
    }
  }
  getLegnedName(key) {
    return legendNameList.find((i) => i.key == key).name || '暂无名称'
  }
}
</script>

<style lang="scss" scoped>
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ContractStatistics {
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-left: $size20 /* 20/192 */;
  position: absolute;
  //size
  height: calc(100% - 0.557292rem /* 107/192 */);
  width: 2.083333rem /* 400/192 */;
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
    font-family: Source Han Sans CN-HEAVY;
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      font-weight: 400;
      align-items: center;
      .icon {
        height: 0.166667rem /* 32/192 */;
        width: 0.34375rem /* 66/192 */;
        background: url('~@/views/groupPage/images/模块图标/统计分析/合同.png') no-repeat center center;
        background-size: 100% 100%;
      }
      span {
        flex: 1;
        font-weight: bold;
        font-size: 0.083333rem /* 16/192 */;
        color: #ffffff;
        padding: 0.041667rem /* 8/192 */;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.166667rem);
    display: inline-block;
    font-family: Source Han Sans CN;
    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
    padding: 0.052083rem /* 10/192 */;
    @mixin center() {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .accumulated-content {
      width: 100%;
      height: 0.59375rem /* 114/192 */;
      background: rgba(6, 34, 57, 0.9);
      display: flex;
      .icon-content {
        height: 100%;
        width: 50%;
        @include center();
        img {
          height: 0.427083rem /* 82/192 */;
          width: 0.338542rem /* 65/192 */;
        }
      }
      .amount-content {
        height: 100%;
        width: 50%;
        @include center();
        flex-flow: column;
        margin-left: -0.15625rem /* 30/192 */;
        & > span:first-child {
          font-size: 0.125rem /* 24/192 */;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          font-style: italic;
          color: #ffffff;
          background: linear-gradient(0deg, #1483ff 0%, #ebd674 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 0.067708rem /* 13/192 */;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span {
          display: inline-block;
          width: 100%;
          font-size: 0.09375rem /* 18/192 */;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
    .investment-content {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: 0.697917rem /* 134/192 */;
      background: rgba(6, 34, 57, 0.9);
      display: flex;
      flex-flow: column;
      padding: 0.078125rem /* 15/192 */;
      .ic-top {
        @include center();
        width: 100%;
        position: relative;
        justify-content: space-evenly;
        span {
          font-size: 0.09375rem /* 18/192 */;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
        & > span:last-child {
          font-size: 0.125rem /* 24/192 */;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          font-style: italic;
          color: #ffffff;
          background: linear-gradient(0deg, #146cff 0%, #01eaff 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .ic-splitLine {
        margin: 0.078125rem /* 15/192 */ 0;
        width: 100%;
        height: 0.005208rem /* 1/192 */;
        background-image: radial-gradient(rgba(1, 231, 255, 0.9), rgba(1, 231, 255, 0.1), rgba(1, 231, 255, 0));
      }
      .ic-bottom {
        height: calc(100% - 0.286458rem /* 55/192 */);
        width: 100%;
        @include center();
        .icb-left {
          display: flex;
          flex-flow: column;
          height: 100%;
          justify-content: space-between;
          & > span:first-child {
            font-size: 0.125rem /* 24/192 */;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            font-style: italic;
            color: #ffffff;
            background: linear-gradient(0deg, #1483ff 0%, #01f0ff 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          span {
            font-size: 0.09375rem /* 18/192 */;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }
        .icb-arrow {
          height: 0.072917rem /* 14/192 */;
          width: 0.234375rem /* 45/192 */;
          background: url('~@/views/groupPage/images/模块图标/统计分析/指向.png') no-repeat center center;
          background-size: 100% 100%;
          margin: 0 0.104167rem /* 20/192 */;
        }
        .icb-right {
          width: 0.302083rem /* 58/192 */;
          height: 100%;
        }
      }
    }
    .transitstatus-content {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: 0.333333rem /* 64/192 */;
      background: rgba(6, 34, 57, 0.9);
      padding: 0.07813rem;
      @include center();
      justify-content: space-evenly;
      & > span:first-child {
        font-size: 0.09375rem /* 18/192 */;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
      & > span:last-child {
        height: 22px;
        display: inline-block;
        font-size: 24px;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-style: italic;
        color: #ffffff;

        background: linear-gradient(0deg, #146cff 0%, #01eaff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .chart-content {
      margin-top: 0.052083rem /* 10/192 */;
      height: calc(100% - 1.78125rem /* 342/192 */);
      width: 100%;
    }
  }
}
</style>