<template>
  <div style="margin-top: 10px;" v-loading="changeLoading">
    <div class="card-group">
      <div class="card-item-view">
        <div class="card-title">Available</div>
        <div class="card-value avaliable">{{ statistics.available || 0 }}</div>
      </div>
      <div class="card-item-view">
        <div class="card-title">In Use</div>
        <div class="card-value in-use">{{ statistics.inUse || 0 }}</div>
      </div>
      <div class="card-item-view">
        <div class="card-title">Reserved</div>
        <div class="card-value reserved">{{ statistics.reserved || 0 }}</div>
      </div>
      <div class="card-item-view">
        <div class="card-title">Faulted</div>
        <div class="card-value faulted">{{ statistics.faulted || 0 }}</div>
      </div>
      <div class="card-item-view">
        <div class="card-title">Unavailable</div>
        <div class="card-value unavailable">{{ statistics.unavailable || 0 }}</div>
      </div>
    </div>
    <div class="card-group">
      <div class="card-item-view">
        <div class="title-underline">
          <span>STATION</span>
          <span>CONNECTOR</span>
        </div>
        <el-skeleton
          :rows="15"
          animated
          style="width: 100%; flex: 1"/>
      </div>
      <div class="card-item-view">
        <div class="title-underline">
          <span>STATION</span>
          <span>CONNECTOR</span>
        </div>
        <el-skeleton
          :rows="15"
          animated
          style="width: 100%; flex: 1"/>
      </div>
      <div class="card-item-view">
        <div class="title-underline">
          <span>STATION</span>
          <span>CONNECTOR</span>
        </div>
        <el-skeleton
          :rows="15"
          animated
          style="width: 100%; flex: 1"/>
      </div>
      <div class="card-item-view">
        <div class="title-underline">
          <span>STATION</span>
          <span>CONNECTOR</span>
        </div>
        <el-skeleton
          :rows="15"
          animated
          style="width: 100%; flex: 1"/>
      </div>
      <div class="card-item-view">
        <div class="title-underline">
          <span>STATION</span>
          <span>CONNECTOR</span>
        </div>
        <el-skeleton
          :rows="15"
          animated
          style="width: 100%; flex: 1"/>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Stations",
    props: {
      provider: {
        type: String|Number,
        default: ""
      }
    },
    data() {
      return {
        statistics: {},
        changeLoading: false
      };
    },
    watch: {
      provider(n, o) {
        this.getData();
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        
      }
    }
  }
</script>

<style scoped lang="scss">
  .card-group {
    display: flex;
    flex-wrap: wrap;
    flex-flow: wrap;
    align-items: flex-start;
  }

  .card-item-view {
    flex: 1;
    display: flex;
    min-width: 250px;
    max-width: 320px;
    flex-direction: column;
    background-color: white;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 6px;
  }
  
  .card-item-view:last-child {
    margin-right: 0px;
  }
  
  .card-title {
    color: #333333;
    font-size: 16px;
    line-height: 24px;
    font-family: sans-serif;
    font-weight: bold;
    white-space: nowrap;
  }
  
  .card-value {
    font-family: sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 42px;
    &.avaliable {
      color: #1ABD00;
    }
    &.in-use {
      color: #236EDE;
    }
    &.reserved {
      color: #FDA802;
    }
    &.faulted {
      color: #EF3340;
    }
    &.unavaliable {
      color: #000000;
    }
  }
  
  .title-underline {
    width: 100%;
    color: #333333;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    font-weight: bold;
    white-space: nowrap;
    padding-bottom: 20px;
    font-family: sans-serif;
    text-decoration: underline;
    justify-content: space-between;
  }
</style>