<template>
  <div class="dashboard-container" v-loading="loading">
    <div class="filter-view" id="dashboard-container-v3">
      <el-select
        class="sp-filter"
        v-model="filters.countryCode"
        @change="changeCountry"
        placeholder="Country">
        <el-option 
          v-for="(item, index) in options.country"
          :key="index"
          :value="item.countryCode"
          :label="item.countryName"/>
      </el-select>
      <el-select
        class="sp-filter"
        v-model="filters.providerPk"
        @change="changeProvider"
        placeholder="Service Provider">
        <el-option 
          v-for="(item, index) in options.provider"
          :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
      :filters="filters"
      v-show="filterTab=='summary'"
      :size="size"
      :size2="size2"/>
    <Incidents
      :filters="filters"
      v-show="filterTab=='incident'"
      :size="size"/>
    <Connectors
      :filters="filters"
      v-show="filterTab=='connector'"
      :size="size"/>
    <Maps
      provider="all"
      v-if="filterTab=='maps'"
      :size="size"/>
  </div>
</template>

<script>
import api from '../../api/dashboard';
import Summary from './components/SummaryV2';
import Incidents from './components/Incidents';
import Connectors from './components/Connectors';
import Maps from './components/Maps';
import setting from '../../settings.js';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  data() {
    return {
      loading: false,
      filters: {
        providerPk: "",
        countryCode: setting.defaultCountry
      },
      filterTab: "summary",
      filterTabs: [{
        name: "Summary",
        value: "summary"
      },{
        name: "Incidents",
        value: "incident"
      },{
        name: "Connectors",
        value: "connector"
      },{
        name: "Map",
        value: "maps"
      }],
      options: {
        country: [],
        provider: []
      },
      size: 0,
      size2: 0,
      resize: 0,
      columns: 0,
      width: 1920,
      minWidth: 250,
      maxWidth: 1920,
      lastColumns: 0,
    }
  },
  components: {
    Summary, Incidents, Connectors, Maps
  },
  created() {
    this.loading = true;
    this.getContryOptions();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const maker = elementResizeDetectorMaker()
      maker.listenTo(document.getElementById('dashboard-container-v3'), element => {
        const s = this.resize + 1;
        this.resize = s;
        setTimeout(() => {
          this.onResize(s);
        }, 100);
      })
    },
    onResize(p) {
      if (p && p == this.resize) {
        const layout = document.getElementById("dashboard-container-v3");
        const width = layout.clientWidth;
        if (width < this.maxWidth) {
          this.width = width;
          this.columns = parseInt(this.width / this.minWidth);
          if (this.columns > 5) this.columns = 5;
          this.size = parseInt(this.width / this.columns) - 9;
          let col2 = parseInt(this.width / 400);
          if (col2 > 3) col2 = 3;
          this.size2 = parseInt(this.width / col2) - 10;
        } else {
          this.width = width; //(this.maxWidth + 0);
          this.columns = 5;
          this.size = parseInt(this.width / this.columns) - 9;
          this.size2 = parseInt(this.width / 3) - 10;
        }
      }
    },
    getContryOptions() {
      api.getCountries().then(res => {
        this.loading = false
        if (res.data) {
          this.options.country = res.data
          if (this.filters.countryCode) {
            this.getProvider();
          }
        }
      }).catch(err => {
        this.loading = false
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    getProvider() {
      api.getProviderByCode(this.filters.countryCode).then(res => {
        if (res.data) {
          this.options.provider = res.data
          if (res.data.length > 0) {
            this.filters.providerPk = res.data[0].value
          }
        }
      }).catch(err => {
        this.loading = false
        this.$message({
          type: 'error',
          message: err
        })
      })
    },
    changeCountry() {
      this.filters.providerPk = "";
      this.getProvider();
    },
    changeProvider() {
      
    },
    changeTab() {
      
    },
    changeSize(size) {
      this.cardSize = size;
    }
  }
}
</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: 240px;
    }
    
    .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;
        }
        &.is-active .el-radio-button__inner {
          color: $buttonText;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .dashboard-container {
      padding: 10px;
    }
  }
  @media screen and (max-width: 520px) {
    .dashboard-container {
      padding: 10px 5px;
    }
  }
</style>