<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">预算总体执行情况</span>
      <DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;float: right;"
                  type="year" @on-change="changeYear"></DatePicker>
    </div>
    <div class="progress-card">
      <div class="progress-card-item">
        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
        <div class="progress-card-item__label">年初预算合计金额</div>
      </div>
      <div class="progress-card-item">
        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
        <div class="progress-card-item__label">调整后预算合计金额</div>
      </div>
      <div class="progress-card-item">
        <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
        <div class="progress-card-item__label">已支付金额</div>
      </div>
      <div class="progress-card-item">
        <div class="progress-card-item__num">
          {{toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0)}}%
        </div>
        <div class="progress-card-item__label">执行率</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { moneyFormatter } from "@/utils"
import { statistic } from '@/api/dashboard/notice'
export default {
  name:"card1",
  layout:{
    x:0,
    y:0,
    w:4,
    h:5,
    i:"1",
    name:"预算统计",
  },
  data() {
    return {
      select: {
        year: new Date().getFullYear().toString()
      },
      statistic: {
        progress: {}
      }
    }
  },
  methods: {
    moneyFormatter,
    toper(m1, m2, m3) {
      if (m2 != 0) {
        return ((m3 / m2) * 100).toFixed(2);
      } else if (m1 != 0) {
        return ((m3 / m1) * 100).toFixed(2);
      } else
        return 0
    },
    changeYear(e) {
      this.select.year = e;
      this.getStatistic()
    },
    async getStatistic() {
      if(/^\/system/.test(this.$route.path)) return

      const res = await statistic(this.select,true)
      this.statistic = res
      this.$emit('send-data',res)
    },
  },
  computed: {},
  created() {
    this.getStatistic();
  }
}
</script>

<style scoped lang="scss">
.progress-card {
  display: flex;

  &-item {
    text-align: center;
    flex: 1;

    &__label {
      font-size: 14px;
    }

    &__num {
      font-size: 20px;
      font-weight: 600;

      padding: 6px 0;
    }
  }
}
</style>
