<template>
  <div v-loading="changeLoading">
    <div class="summary-view flexr">
      <div class="summary-view flexl flex1">
        <div class="summary-card">
          <div class="summary-title">Total Sites</div>
          <div class="summary-max-value">{{summaryData.siteCount}}</div>
        </div>
        <div class="summary-card">
          <div class="summary-title">Total Stations</div>
          <div class="summary-max-value">{{summaryData.boxCount}}</div>
        </div>
      </div>
      
      <div class="summary-card flex1">
        <div class="summary-title">Current Connector Status</div>
        <div class="connector-status-layout" v-if="summaryData.connectorStatus">
          <div>Available   <span>{{summaryData.connectorStatus.available}}</span></div>
          <div>In use      <span>{{summaryData.connectorStatus.inUse}}</span></div>
          <div>Faulted     <span>{{summaryData.connectorStatus.faulted}}</span></div>
          <div>Reserved    <span>{{summaryData.connectorStatus.reserved}}</span></div>
          <div>Finishing   <span>{{summaryData.connectorStatus.finishing}}</span></div>
          <div>Unavailable <span>{{summaryData.connectorStatus.unavailable}}</span></div>
        </div>
      </div>
      
      <div class="summary-card flex1">
        <div class="summary-title">Connector Utilization Rate Today</div>
        <CircleChart
          v-if="summaryData.connectorUtilization"
          :chartData="summaryData.connectorUtilization"/>
      </div>
      
      <div class="summary-view flexl flex2">
        <div class="summary-view flexr flex1">
          <div class="summary-card flex1">
            <div class="summary-title">Today’s Revenue</div>
            <div class="total-transaction-layout" v-if="summaryData.todaySummary && summaryData.todaySummary.length">
              <div v-for="(item,index) in summaryData.todaySummary">
                <div>{{item.country}}</div>
                <span>{{item.todayRevenue}}</span>
              </div>
            </div>
            <div class="no-data" v-else>No Data</div>
          </div>
          <div class="summary-card flex1">
            <div class="summary-title">Today’s Transactions</div>
            <div class="total-transaction-layout"  v-if="summaryData.todaySummary && summaryData.todaySummary.length">
              <div v-for="(item,index) in summaryData.todaySummary">
                <div>{{item.country}}</div>
                <span>{{item.todayTransaction}}</span>
              </div>
            </div>
            <div class="no-data" v-else>No Data</div>
          </div>
        </div>
        <div class="summary-view flexr flex1">
          <div class="summary-card flex1">
            <div class="summary-title">Total No. of Transactions</div>
            <div class="summary-max-value">{{summaryData.totalTrans || "0"}}</div>
          </div>
          <div class="summary-card flex1">
            <div class="summary-title">Ongoing Transactions</div>
            <div class="summary-max-value">{{summaryData.ongoingTrans || "0"}}</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="charts-card">
      <div class="chart-title">Hourly Utilization(kWH)</div>
      <LineChart :chartData="hourlyData"></LineChart>
    </div>
    <div class="charts-card">
      <div class="radio-group">
        <el-radio-group
          v-model="dateTabIndex"
          size="small"
          @change="changeTab">
          <el-radio-button
            v-for="(item,index) in dateRangeTab"
            :key="index"
            :label="item.value">
            {{item.name}}
          </el-radio-button>
        </el-radio-group>
      </div>
      <el-row
        class="barGroup"
        v-loading="barLoading"
        v-for="(bc, index) in barChartData"
        :key="index">
        <el-col :span="24">
          <div class="bar-chart-country">
            <div>Country:</div>
            <span>{{bc.country}}</span>
          </div>
        </el-col>
        <el-col
          class="barView"
          :sm="12"
          :md="8"
          v-if="bc.utilization">
          <BarChart 
            :index="index + '-0'"
            :chartData="bc.utilization"
            unit="%"
            title="Utilization Rate so far"/>
        </el-col>
        <el-col
          class="barView"
          :sm="12"
          :md="8"
          v-if="bc.consumption">
          <BarChart
            :index="index + '-1'"
            :chartData="bc.consumption"
            unit="kWh"
            title="Consumption so far"/>
        </el-col>
        <el-col
          class="barView"
          :sm="12"
          :md="8"
          v-if="bc.revenue">
          <BarChart
            :index="index + '-2'"
            :chartData="bc.revenue"
            :unit="bc.currency || '$'"
            :leftUnit="true"
            title="Revenue so far"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import BarChart from '../chart/BarChart.vue'
import LineChart from '../chart/LineChart.vue'
import CircleChart from '../chart/CircleChart.vue'
import api from '@/http/api/dashboard'
export default {
  name: "Summary",
  props: {
    provider: {
      type: String|Number,
      default: ""
    }
  },
  components: {
    BarChart, LineChart, CircleChart
  },
  data() {
    return {
      barLoading: true,
      hourlyData: {
        xdata: [],
        ydata: []
      },
      summaryData: {
        boxCount: 0,
        siteCount: 0,
        todaySummary: [],
        connectorStatus: {},
        connectorUtilization: {}
      },
      dateTabIndex: 0,
      dateRangeTab: [],
      barChartData: [],
      changeLoading: false
    };
  },
  watch: {
    provider(n, o) {
      this.getData();
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.changeLoading = true
      this.getSummaryData()
      this.getRangeTabList()
      this.getLineChart()
    },
    changeTab() {
      setTimeout(() => {
        if (this.changeLoading)
          this.barLoading = true
      }, 300)
      this.changeLoading = true
      this.getBarChartData()
    },
    getSummaryData() {
      api.getSummaryInfo(this.provider).then(res => {
        if (res.data) {
          this.summaryData = res.data
        }
      }).catch(err => {
        this.changeLoading = false
        this.$message({
          type: 'error',
          message: err
        })
        this.summaryData = {}
      })
    },
    getLineChart() {
      api.getHourlyUtilizationV2(this.provider).then(res => {
        if (res.data.xdata && res.data.ydata) {
          this.hourlyData = res.data
        } else {
          this.hourlyData = undefined
        }
      }).catch(err => {
        this.changeLoading = false
        this.$message({
          type: 'error',
          message: err
        })
        this.hourlyData = undefined
      })
    },
    getRangeTabList() {
      api.getRangeTab().then(res => {
        if (res.data) {
          this.dateRangeTab = res.data
          if (res.data.length > 0) {
            this.dateTabIndex = res.data[0].value
            this.getBarChartData()
          }
        } else {
          this.dateRangeTab = [];
        }
      }).catch(err => {
        this.changeLoading = false
        this.$message({
          type: 'error',
          message: err
        })
        this.dateRangeTab = [];
      })
    },
    getBarChartData() {
      api.getBarChartV2({
        tabType: this.dateTabIndex,
        providerPk: this.provider
      }).then(res => {
        this.changeLoading = false
        if (res.data) {
          this.barChartData = res.data
        } else {
          this.barChartData = []
        }
      }).catch(err => {
        this.changeLoading = false
        this.$message({
          type: 'error',
          message: err
        })
        this.barChartData = []
      }).finally(() => {
        this.barLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import '../../../styles/element-ui.scss';
  //主题色 $--color-primary
  //强调色 $--color-accent
  .summary-view {
    margin: 5px -5px 0;
  }
  .summary-view > div {
    margin: 5px;
  }
  .summary-view > div.summary-view {
    margin: 0;
  }
  .summary-view > .summary-card {
    margin: 5px;
    min-width: 240px;
  }
  .summary-card {
    padding: 10px 20px;
    border-radius: 6px;
    background-color: white;
  }
  .summary-title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }
  .summary-max-value {
    color: $--color-accent;
    font-size: 42px;
    line-height: 63px;
    text-align: center;
    padding: 10px 0;
  }
  .connector-status-layout {
    color: #333;
    font-size: 16px;
    line-height: 30px;
    padding-top: 20px;
    > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .total-transaction-layout {
    color: #333;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 10px;
    > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        color: $--color-accent;
      }
    }
  }
  .no-data {
    color: #999;
    font-size: 14px;
    padding: 30px 0 20px;
    text-align: center;
    user-select: none;
  }
  .bar-chart-country {
    display: flex;
    font-size: 18px;
    align-items: center;
    padding-bottom: 15px;
    div {
      font-weight: bold;
      padding-right: 5px;
    }
  }
  .charts-card {
    display: flex;
    overflow: hidden;
    padding: 10px 20px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 6px;
    flex-direction: column;
    background-color: white;
  }
  .chart-title {
    color: #333;
    font-size: 16px;
    padding-top: 5px;
    padding-bottom: 15px;
  }
  .radio-group {
    padding-top: 5px;
    text-align: center;
  }
  .barView {
    padding-bottom: 10px;
  }
  @media screen and (max-width: 520px) {
    .charts-card {
      margin: 10px 0 0;
    }
  }
  @media screen and (min-width: 768px) {
    .barView + .barView {
      border-left: 10px solid #F0F5FC;
    }
    .barView + .barView + .barView {
      border-left: none;
    }
  }
  @media screen and (min-width: 992px) {
    .barView + .barView + .barView {
      border-left: 10px solid #F0F5FC;
    }
  }
  .barGroup {
    margin-top: 15px;
    padding-top: 18px;
    border-top: 1px solid #F0F5FC;
  }
</style>