<template>
  <div class="summary-layout">
    <div v-if="info.connectorStatus">
      <div class="summary-view">
        <div class="summary-text">Total Number Of Connectors</div>
        <div class="summary-text">{{info.connectors || "0"}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Available</div>
        <div class="summary-text">{{info.connectorStatus.available}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">In use</div>
        <div class="summary-text">{{info.connectorStatus.inUse}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Reserved</div>
        <div class="summary-text">{{info.connectorStatus.reserved}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Faulted</div>
        <div class="summary-text">{{info.connectorStatus.faulted}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Unavailable</div>
        <div class="summary-text">{{info.connectorStatus.unavailable}}</div>
      </div>
    </div>
    
    <div v-if="info.consumption">
      <div class="summary-view">
        <div class="summary-text">Total Consumption {{year}}</div>
        <div class="summary-text">{{info.consumption.thisYearTotalConsumption}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Today’s Consumption</div>
        <div class="summary-text">{{info.consumption.thisDayTotalConsumption}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Highest Delivered</div>
        <div class="summary-text">{{info.consumption.thisDayHighestDelivered}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Lowest Delivered</div>
        <div class="summary-text">{{info.consumption.thisDayLowestDelivered}}</div>
      </div>
    </div>
    
    <div v-if="info.revenue">
      <div class="summary-view">
        <div class="summary-text">Total Revenue {{year}}</div>
        <div class="summary-text">{{currency}}{{info.revenue.thisYearTotalRevenue}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Transaction Completed</div>
        <div class="summary-text">{{info.revenue.thisDayTransactionsCompleted}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Transactions Ongoing</div>
        <div class="summary-text">{{info.revenue.thisDayTransactionsOngoing}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Highest transaction</div>
        <div class="summary-text">{{currency}}{{info.revenue.thisDayHighestTransaction}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Lowest Transaction</div>
        <div class="summary-text">{{currency}}{{info.revenue.thisDayLowestTransaction}}</div>
      </div>
      <div class="summary-sub-view">
        <div class="summary-text">Average Transaction</div>
        <div class="summary-text">{{currency}}{{info.revenue.thisDayAverageTransaction}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Summary",
    props: {
      info: {
        type: Object,
        default: {}
      },
      currency: {
        type: String,
        default: "S$"
      }
    },
    data() {
      return {
        year: "2023"
      };
    },
    mounted() {
      this.year = ("" + new Date().getFullYear());
    },
    methods: {
      
    }
  }
</script>

<style scoped>
  .summary-layout {
    margin-top: -15px;
    padding-bottom: 10px;
  }
  .summary-view {
    margin-top: 5px;
  }
  .summary-view,
  .summary-sub-view {
    display: flex;
    padding: 10px 0;
    align-items: center;
    justify-content: space-between;
  }
  .summary-sub-view {
    padding: 2px 0;
    padding-left: 40px;
  }
  .summary-sub-view:before {
    width: 4px;
    height: 4px;
    content: " ";
    border-radius: 5px;
    position: absolute;
    background: #333;
    margin-left: -10px;
  }
  .summary-text {
    color: #333;
    font-size: 14px;
  }
</style>