<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>
    <OnlineClass ref="OnlineClass" @toDetail="toDetail" v-show="currIndex == 0"></OnlineClass>
    <GeneralLawExam ref="GeneralLawExam" @toTest="toTest" v-show="currIndex == 1"></GeneralLawExam>
  </div>
</template>

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

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