<template>
  <div style="display: flex; margin-top: 16px">
    <div style="display: flex">
      <img class="imgs" src="../../../assets/vehicle/icon (1).png" alt="" />
      <div class="zyh">
        <div class="zyh-num">
          <div>
            <span style="color: #e4c312; font-size: 26px; margin-right: 6px">{{ statisticsInfo?.totalLitres?statisticsInfo.totalLitres:0 }}</span>
            <span style="color: rgba(255, 255, 255, 0.6)">L</span>
          </div>
          <div>总油耗</div>
        </div>
        <div style="display: flex; justify-content: space-between; margin-top: 6px">
          <div>
            <span>92#汽油：</span>
            <span>{{ list[3]?.value }}L</span>
          </div>
          <div>
            <span>95#汽油：</span>
            <span>{{ list[2]?.value }}L</span>
          </div>
          <div>
            <span>98#汽油：</span>
            <span>0L</span>
          </div>
          <div>
            <span>柴油：</span>
            <span>{{ list[1]?.value }}L</span>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; margin: 0 29px">
      <img class="imgs" src="../../../assets/vehicle/icon (2).png" alt="" />
      <div class="zje-num">
        <span style="color: #e4c312; font-size: 26px">{{
          statisticsInfo?.totalAmount ? statisticsInfo.totalAmount : 0
        }}</span>
        <span style="color: rgba(255, 255, 255, 0.6); margin-left: 5px">元</span>
        <div>油耗总金额</div>
      </div>
    </div>
    <div style="display: flex">
      <img class="imgs" src="../../../assets/vehicle/icon (3).png" alt="" />
      <div class="zje-num" style="margin-left: 6px">
        <span style="color: #e4c312; font-size: 26px">{{ statisticsInfo?.totalCar ? statisticsInfo.totalCar : 0 }}</span>
        <span style="color: rgba(255, 255, 255, 0.6); margin-left: 80px">辆</span>
        <div>车辆总数</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSelectCarFuelStatistics } from '@/api/vehicle.js'
export default {
  props: { itemsTime: String, selt: Number },
  data() {
    return {
      type: 'CURRENT_YEAR',
      list: [],
      categoryId: 3,
      statisticsInfo: null,
    }
  },
  watch: {
    itemsTime: {
      handler(val) {
        this.type = val
        this.funSelectCarFuelStatistics()
      },
      immediate: true,
      deep: true,
    },
    selt: {
      handler(val) {
        this.categoryId = val
        this.funSelectCarFuelStatistics()
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //车辆总油量
    funSelectCarFuelStatistics() {
      getSelectCarFuelStatistics({ type: this.type, categoryId: this.categoryId }).then((res) => {
        this.list = res.data.totalLitresItems
        this.statisticsInfo = res.data
      })
    },
  },
}
</script>

<style lang="less" scoped>
.zyh {
  width: 389px;
  height: 63px;
  background: linear-gradient(180deg, rgba(4, 36, 74, 0) 0%, rgba(36, 104, 184, 0.2) 100%);
  color: #fff;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 200% */
  padding: 0 10px;
  .zyh-num {
    display: flex;
    justify-content: space-between;
  }
}
.zje-num {
  width: 156px;
  height: 63px;
  background: linear-gradient(180deg, rgba(4, 36, 74, 0) 0%, rgba(36, 104, 184, 0.2) 100%);
  margin-left: 6px;
  color: #fff;
}
.imgs {
  display: inline-block;
  width: 52px;
  height: 63px;
}
</style>
