<template>
  <div class="assistant-container">
    <div class="assistant-tabs">
      <el-radio-group v-model="type">
        <el-radio-button v-for="opt in typeOptions" :key="opt.value" :label="opt.value">
          {{ opt.label }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <div class="assistant-body mt10">
      <concerned-university v-if="type == 0"></concerned-university>
      <concerned-major v-if="type == 1"></concerned-major>
      <career-test-report v-if="type == 2"></career-test-report>
      <preference-form v-if="type == 3"></preference-form>
    </div>
  </div>
</template>
<script>
import CareerTestReport from '../components/careerTestReport.vue'
import concernedUniversity from '../components/concernedUniversity.vue'
import ConcernedMajor from '../components/concernedMajor.vue'
import PreferenceForm from '../components/preferenceForm.vue'

export default {
  components: {
    concernedUniversity,
    ConcernedMajor,
    CareerTestReport,
    PreferenceForm
  },
  data() {
    return {
      type: '0',
      typeOptions: [
        {
          label: '关注的院校',
          value: '0'
        },
        {
          label: '关注的专业',
          value: '1'
        },
        {
          label: '生涯测评报告',
          value: '2'
        },
        {
          label: '我的志愿表',
          value: '3'
        }
      ]
    }
  },
  watch: {
    $route(route) {
      let query = route.query
      console.log('this', this)
      if (query.hasOwnProperty('id')) {
        this.type = query.id
      }
    }
  },
  created() {
    let query = this.$route.query
    if (query.hasOwnProperty('id')) {
      this.type = query.id
    }
  }
}
</script>
<style lang="scss" scoped>
.assistant-container {
  padding: 20px;
}

.assistant-tabs {
  text-align: right;
}
</style>
