<template>
  <div class="AppLegalLearning">
    <div class="tabs_box">
      <u-tabs :list="tabs" font-size="32" bg-color="#f3f5f7" inactive-color="#999999"
     :active-item-style="{color: '#222222'}" :is-scroll="true" :current="currIndex" @change="(i) => (currIndex = i)"> </u-tabs>
    </div>
    <AppOnlineClass ref="OnlineClass" v-show="currIndex == 0"></AppOnlineClass>
    <AppGeneralLawExam ref="GeneralLawExam" v-show="currIndex == 1"></AppGeneralLawExam>
  </div>
</template>

<script>
import AppOnlineClass from './components/AppOnlineClass.vue'
import AppGeneralLawExam from './components/AppGeneralLawExam.vue'
export default {
  name: 'AppLegalLearning',
  appName: '法治学习',
  data() {
    return {
      currIndex: 1,
      tabs: [
        {
          name: '在线课堂',
        },
        {
          name: '普法考试',
        }
      ],
    }
  },
  onShow() {
  },
  components: {
    AppOnlineClass,
    AppGeneralLawExam
  },
  watch: {
    currIndex: {
      handler(v) {
        if(v == 0) {
          this.$refs.OnlineClass.getList();
        } else if(v == 1) {
          this.$refs.GeneralLawExam.getList();
        }
      }
    }
  }
}
</script>

<style lang="scss" socped>
.AppGeneralLawExam {
  .tabs_box {
    height: 100px;
    line-height: 100px;
  }
}
</style>
