<style lang="less" scoped>
@import './Index.less';
</style>

<template>
  <div id="serviceDriveAuth">
    <Loading v-if="isloading == true"></Loading>
    <Row>
      <i-col :xs="24" :sm="24" :md="24" :lg="18">
        <ServiceList v-show="currentTab == 0" :serviceList="serviceList" :windowWidth="windowWidth" :windowHeight="windowHeight" />
        <HiteachAuthList v-show="currentTab == 1" :hiteachAuthList="hiteachAuthList" :windowWidth="windowWidth" :windowHeight="windowHeight" />
      </i-col>

      <i-col :xs="24" :sm="24" :md="24" :lg="6">
        <SpaceStatus :spaceStatus="spaceStatus" :windowWidth="windowWidth" :windowHeight="windowHeight" :isloading="isloading" />
      </i-col>
    </Row>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import apiTools from '@/api'
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
import ServiceList from './SubComponents/ServiceList.vue'
import Spacebar from './SubComponents/Spacebar.vue'
import HiteachAuthList from './SubComponents/HiteachAuthList.vue'
import SpaceStatus from './SubComponents/SpaceStatus.vue'
import Loading from '@/common/Loading.vue'
export default {
  name: 'serviceDriveAuth',
  components: {
    PersonalPhoto,
    ServiceList,
    Spacebar,
    HiteachAuthList,
    SpaceStatus,
    Loading
  },
  watch: {},

  data() {
    return {
      isloading: true,
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    }
  },

  computed: {
    ...mapGetters({
      serviceList: 'serviceDriveAuth/getServiceList',
      hiteachAuthList: 'serviceDriveAuth/getHiteachAuthList',
      spaceStatus: 'serviceDriveAuth/getSpaceStatus',
      currentTab: 'serviceDriveAuth/getTab'
    })
  },

  methods: {
    getSchoolProduct(schoolCode) {
      this.$store.dispatch('serviceDriveAuth/getSchoolProduct', schoolCode).then(
        res => {
          this.isloading = false
          this.$Message.success('取得API資料')
        },
        err => {
          this.$Message.error('取得資料失敗')
        }
      )
    },
    /*getDataAsyc() {
      this.$store.dispatch("serviceDriveAuth/getServiceListDataAsyc").then(
        (res) => {
          this.$Message.success("取得Mock資料");
        },
        (err) => {
          this.$Message.error("取得資料失敗");
        }
      );
    },*/
    onResize() {
      this.windowWidth = window.innerWidth
      this.windowHeight = window.innerHeight
    }
  },
  mounted() {
    //console.log(this.$store.state.user.schoolCode)

    this.getSchoolProduct(this.$store.state.user.schoolCode)
    //this.getDataAsyc();
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
  }
}
</script>
<style lang="less">
@import './serviceDriveAuthIview.less';
</style>
