<template>
  <div class="left-bottom-warp">
    <item title="节能减排">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="top-all-box">
        <div class="top-con-box">
          <div class="top-item-box">
            <div class="data">{{ info.treePlanting }}<span class="unit">棵</span></div>
            <div class="title">等效植树量</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>
          <div class="top-item-box">
            <div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div>
            <div class="title">等效CO2减排</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>

        </div>
        <div class="top-con-box">
          <div class="top-item-box">
            <div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div>
            <div class="title">等效节约煤</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>
          <div class="top-item-box">
            <div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div>
            <div class="title">等效经济收入</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>
        </div>

      </div>
    </item>
  </div>
</template>

<script>
import item from './item-warp.vue'
import screenItemBg from '@/assets/new-screen/screen-item-bg.png'
import { GetEnergySaving } from '@/api/screen/zzScreen'
export default {
  components: { item },
  data() {
    return {
      screenItemBg,
      loading: true,
      info: {
        treePlanting: null,
        reductionCO2: null,
        equivalentCoal: null,
        income: null
      }

    }
  },
  created() {
  },
  mounted() {
  },

  methods: {

    async getData(deptId) {
      try {
        this.loading = true
        const { data } = await GetEnergySaving({
          deptId: deptId
        })
        this.info = data
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.left-bottom-warp {
  width: 100%;
  height: 100%;

  .top-all-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    .top-con-box {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 100%;

      .top-item-box {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 110px;

        .data {
          color: #F5FAFF;
          font-family: DIN;
          font-size: 24px;
          font-weight: 500;
          line-height: normal;
        }

        .unit {
          color: #F5FAFF;
          font-family: DIN;
          font-size: 12px;
          line-height: normal;
        }

        .title {
          color: #B7C1C9;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

        .item-bg-img {
          width: 90px;
          height: auto;
          position: absolute;
          top: 38px;
        }
      }
    }
  }
}</style>
