<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="filter-view">
      <el-select
        class="sp-filter"
        v-model="providerPk"
        @change="changeProvider"
        placeholder="Select Service Provider">
        <el-option 
          v-for="(item, index) in providerList"
          :key="index"
          :value="item.value"
          :label="item.name"/>
      </el-select>
      <div class="radio-group">
        <el-radio-group
          v-model="filterTab"
          @change="changeTab">
          <el-radio-button
            v-for="(item,index) in filterTabs"
            :key="index"
            :label="item.value">
            {{item.name}}
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <Summary :provider="providerPk" v-show="filterTab=='summary'"/>
    <Site :provider="providerPk" v-if="filterTab=='site'"/>
    <Stations :provider="providerPk" v-if="filterTab=='station'"/>
    <Maps provider="all" v-if="filterTab=='maps'"/>
  </div>
</template>

<script>
import api from '../../http/api/dashboard'
import Summary from './components/Summary'
import Site from './components/Site'
import Stations from './components/Stations'
import Maps from './components/Maps'
export default {
  data() {
    return {
      loading: false,
      providerPk: "",
      providerList: [],
      filterTab: "summary",
      filterTabs: [{
        name: "Summary",
        value: "summary"
      },{
        name: "Site",
        value: "site"
      },{
        name: "Stations",
        value: "station"
      },/*{
        name: "Utilization",
        value: "utilization"
      },{
        name: "Revenue",
        value: "revenue"
      },*/{
        name: "Map",
        value: "maps"
      }]
    }
  },
  components: {
    Summary, Site, Stations, Maps
  },
  created() {
    //this.loading = true;
    this.getProvider();
  },
  methods: {
    getProvider() {
      api.getProviderList().then(res => {
        if (res.data) {
          this.providerList = res.data
          if (res.data.length > 0) {
            this.providerPk = res.data[0].value
            //this.getLineChart()
            //this.getCardData()
            //this.getRangeTabList()
          } else {
            this.loading = false
          }
        }
      }).catch(err => {
        this.loading = false
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    changeProvider() {
      
    },
    changeTab() {
      
    }
  }
}
</script>

<style scoped lang='scss'>
  /*@import '../../styles/variables.scss';*/
  @import '../../styles/element-ui.scss';
  .dashboard-container {
    padding: 10px 20px;
    /*min-height: $mainAppMinHeight;*/
    background-color: #F0F5FC;
    .sp-filter {
      flex: 1;
      min-width: 200px;
      max-width: 320px;
    }
    
    .radio-group {
      margin: 0;
      padding-top: 0px;
      user-select: none;
      
      ::v-deep  .el-radio-button {
        padding: 5px;
        min-width: 150px;
        box-shadow: none !important;
        
        .el-radio-button__inner {
          width: 100%;
          border-radius: 4px;
          border: 1px solid $--color-primary;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .dashboard-container {
      padding: 10px;
    }
  }
  @media screen and (max-width: 520px) {
    .dashboard-container {
      padding: 10px 5px;
    }
  }
</style>