<template>
  <div class="poerrViewTop">
    <ul>
      <li>
        <div>
          <p>月度用电量</p>
          <p>
            <span class="num static">{{ data.monthCount }}</span
            >kWh
          </p>
          <p>
            上月同期 {{ data.lastMonthCount }}
            <span class="text-red" style="margin-left: 5px">
              {{ data.monthRadio + "%" }} ↑</span
            >
          </p>
        </div>
      </li>
      <li>
        <div>
          <p>年度用电量</p>
          <p>
            <span class="num static">{{ data.yearCount }}</span
            >kWh
          </p>
          <p>
            去年同期 {{ data.lastYearCount == null ? 0 : data.lastYearCount }}
            <span class="text-red" style="margin-left: 5px"
              >{{ data.yearRadio }}% ↑</span
            >
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "statisTop",
  props: {
    dayMonthData: Object,
  },
  components: {},
  data() {
    return {
      data: [],
    };
  },
  mounted() {},
  methods: {},
  watch: {
    dayMonthData() {
      this.data = this.dayMonthData;
    },
  },
};
</script>

<style lang="scss">
.poerrViewTop {
  height: 30%;
  // border: 1px solid red;
}
.poerrViewTop ul {
  display: flex;
  text-align: center;
  height: 100%;
  li:first-child {
    margin-right: 0.07rem;
    box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
  }
  li:last-child {
    margin-left: 0.07rem;
    box-shadow: inset 0 0 0.1rem 0.0125rem rgba(251, 183, 86, 0.6);
  }

  li {
    height: 100%;
    flex: 1;

    // padding: 0.125rem 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #081f2f;
    // border: 1px solid rgba(0,244,253,.5);
    p {
      font-size: 0.2rem;
    }
    .num {
      margin: 0.0625rem;
      display: inline-block;
      font-size: 0.3rem;
    }
  }
}
</style>
