<template>
  <div class="pb20">
    <div class="mb10">
      <span class="tabs-item" @click="activeType = 0" :class="{'bg-primary':activeType == 0}">我的收藏</span>
      <span class="tabs-item" @click="activeType = 1" :class="{'bg-primary':activeType == 1}">我的选科收藏</span>
      <span class="tabs-item" @click="activeType = 2" :class="{'bg-primary':activeType == 2}">我的测评选科</span>
    </div>
    <mx-table v-if="activeType == 0 || activeType == 1"  :propDefines="propDefine" :rows="collectList">
      <template #select="{ row }">
          <i class="el-icon el-icon-success"  style="color: #42b983" v-if="row.isSelectCourse && row.collect"></i>
          <i class="el-icon el-icon-success"  v-else></i>
      </template>
    </mx-table>
    <mx-table v-if="activeType == 2" :propDefines="recomProp" :rows="recommendMajor"></mx-table>
    <pagination :total="pageForm.total" :autoScroll="false" @pagination="onChangePage" :page.sync="pageForm.pageNum"
                :limit.sync="pageForm.pageSize"></pagination>
  </div>
</template>

<script>
import {
  getRecommendMajor,
  getOptionalMajors
} from '@/api/webApi/elective/selected-subject'
import { xkcxlist } from '@/api/webApi/webQue'
export default {
  props: {
    type: {
      type:Number,
      default: 0
    },
    querySource: {
      type:String,
      default: '1'
    },
  },
  watch: {
    activeType:{
      handler(value) {
        console.log('change',value)
        if(value == 2) {
          this.getRecommendMajor()
          return
        }
        this.getXkcxlist()
        if(value == 1) {
          this.propDefine.collect.hidden =true
          this.propDefine.isSelectCourse.hidden =false
          this.propDefine.roundName.hidden = false
        }
        if(value == 0) {
          this.propDefine.collect.hidden =false
          this.propDefine.isSelectCourse.hidden =true
          this.propDefine.roundName.hidden = true
        }
      }
    }
  },
  data() {
    return {
      dataList: [],
      rows:[],
      activeType: '',
      recomProp: {
        majorCategoryCode:{
          label:'专业编码'
        },
        majorCategoryName:{
          label:'专业名称'
        },
      },
      collectList: [],
      optionalMajors:[],
      recommendMajor: [],
      propDefine: {
        universityName:{
          label:'院校名称'
        },
        roundName: {
          label:'选科轮次',
          hidden: false
        },
        marjorName:{
          label:'专业(类)名称'
        },
        remark:{
          label:'专业备注'
        },
        level:{
          label:'专业层次'
        },
        courseRemark0:{
          label:'首选科目范围'
        },
        courseRemark1:{
          label:'再选科目范围'
        },
        data:{
          label:'历年录取数据'
        },
        collect:{
          label:'收藏',
          slot:'select',
          hidden: false
        },
        isSelectCourse:{
          label:'选科收藏',
          slot:'select',
        }
      },
      pageForm: {
        pageNum:1,
        total: 0,
        pageSize: 10
      }
    };
  },
  created() {
    this.activeType=this.type
  },
  methods: {
    onChangePage(page){
      this.pageForm.pageSize = page.limit;
      this.pageForm.pageNum = page.page;
      this.getXkcxlist();
    },
    getOptionalMajors() {
      getOptionalMajors().then(res => {
        this.optionalMajors = res.data
      })
    },
    getRecommendMajor() {
      getRecommendMajor().then(res => {
        console.log(res)
        this.recommendMajor = res.data
      })
    },
    getXkcxlist() {
      const stat = this.activeType == 0 ? {collect:true} : {isSelectCourse:true,}
      xkcxlist({
        querySource: this.querySource,
        ...this.pageForm,
        ...stat

      }).then(res => {
        this.collectList = res.rows
        this.pageForm.total = res.total
        console.log(res)
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-item{
  cursor: pointer;
  padding: 0 33px;
  border: 1px solid #f2f2f2;
  display: inline-block;
  line-height: 40px;
&:hover{
   color:#47C6A2;
 }
&.bg-primary{
   background: #47C6A2 ;
   color: white;
   border-color:#47C6A2 ;
 }
}
.tabs-min-height{
  min-height: calc(100vh - 124px - 58px);
}
</style>
