<!-- 院校硕士点列表 -->
<template>
  <div class="flexWrap">
    <div style="width: 40%;">
      <Tip title="硕士专业学位授权点"/>
      <el-table :data="state.professionalMasterDegreeList" border="false" style="width: 100%;margin: 30px 0">
        <el-table-column type="expand">
          <template #default="props">
            <div style="padding:0 30px;">
              <div class="flexWrap mt-10 mb-10" style="display: flex;flex-direction: row;flex-wrap: wrap;" v-for="(child,chi) in props.row.schoolGraduateDegreeList" :key="chi">
                <div style="width: 50%;">
                  {{child.researchDirection }}
                </div>
                <div style="width: 10%;">
                  <a class="showClick" @click="selectMasterDegree(child.id)">详情</a>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学科类别">
          <template #default="scope">
            ({{ scope.row.subjectCode }}){{ scope.row.disciplineField }}
          </template>
        </el-table-column>
        <el-table-column label="专业">
          <template #default="scope">
            {{ scope.row.majorName.replace('（专业学位）',"") }}
          </template>
        </el-table-column>
      </el-table>

      <Tip title="硕士学术学位授权点"/>
      <el-table :data="state.academicMasterDegreeList" border="false" style="width: 100%;margin: 30px 0">
        <el-table-column type="expand">
          <template #default="props">
            <div style="padding:0 30px;">
              <div class="flexWrap mt-10 mb-10" style="display: flex;flex-direction: row;flex-wrap: wrap;" v-for="(child,chi) in props.row.schoolGraduateDegreeList" :key="chi">
                <div style="width: 50%;">
                  {{child.researchDirection }}
                </div>
                <div style="width: 10%;">
                  <a class="showClick" @click="selectMasterDegree(child.id)">详情</a>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="学科类别">
          <template #default="scope">
            ({{ scope.row.subjectCode }}){{ scope.row.disciplineField }}
          </template>
        </el-table-column>
        <el-table-column label="专业">
          <template #default="scope">
            {{ scope.row.majorName.replace('（专业学位）',"") }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 10%;"></div>
    <div style="width: 50%;" v-if="state.detail">
      <div class="flexWrap" style="background-color: #eeeef0;padding: 10px;border-radius: 10px;">
        <div class="flex-item-3">
          <div class="fw-6 font-size-20">{{ state.detail.disciplineField }}</div>
          <div>学科类别</div>
        </div>
        <div class="flex-item-3" style="">
          <div class="fw-6 font-size-20">{{ state.detail.majorNameLimit }}</div>
          <div>专业</div>
        </div>
        <div class="flex-item-3" style="">
          <div class="fw-6 font-size-20">{{state.detail.researchDirectionLimit}}</div>
          <div>研究方向</div>
        </div>
      </div>
      <!-- 信息 -->
      <div class="flexWrap mt-10 mb-10 pb-10" style="font-size: 20px;" v-for="(key,index) in Object.keys(state.detailKeyList)" :class="index!==Object.keys(state.detailKeyList).length-1?'border-bottom':''" :key="index">
        <div class="flex-item-3 darkGray">
          <div class="float-right">{{state.detailKeyList[key]}}</div>
        </div>
        <div class="flex-item-7 margin-left-30">
          <div>{{state.detail[key]||''}}</div>
        </div>
      </div>
      <!-- 考试范围 -->
      <Tip title="考试范围" class="mt-30 mb-30"/>
      <div v-for="(item,index) in state.detail.schoolGraduateDegreeList" :key="index">
        <div>({{ (index+1) }})</div>
        <div class="flexWrap mt-10 mb-10 pb-10" style="font-size: 20px;" v-for="(k,iii) in Object.keys(state.categoryList)" :class="iii!==3?'border-bottom':''" :key="k">
          <div class="flex-item-3 darkGray">
            <div class="float-right">{{state.categoryList[k]}}</div>
          </div>
          <div class="flex-item-7 margin-left-30">
            <div>{{item[k]||''}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
    
</template>
<script lang="ts" setup>
import Tip from '../tip.vue';
import { ref, onMounted, reactive } from 'vue';
import axiosInstance from '@/utils/http';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import ApiConstant from '@/utils/ApiConstant';
const router = useRouter();
const props = defineProps({
    schoolId: {
        type: String,
        default: ''
    }
});
onMounted(() => {
  getMasterDegreeList()
});
const state = reactive({
    professionalMasterDegreeList:[] as any,// 专硕列表
    academicMasterDegreeList:[] as any,// 学硕列表
    detailKeyList:{
      schoolName:'招生单位',
      departmentsAndFaculties:'院系所',
      majorName:'专业',
      researchDirection:'研究方向',
      teacher:'指导老师',
      intendedEnrollment:'拟招人数'
    } as any,
    categoryList:{
      politics:'政治',
      foreignLanguage:'英语',
      businessCourse1:'业务课一',
      businessCourse2:'业务课二'
    } as any,
    detail:null as any,
})

// 获取数据
const getMasterDegreeList=()=>{
  if(props.schoolId){
    axiosInstance({
      url: ApiConstant.GraduateDegree.findSchoolGraduateDegreeList,
      method: 'get',
      params: {
        schoolId: props.schoolId
      },
      // showLoading: false,//是否显示加载图标
    }).then((response) => {
      const data = response.data
      if (data.success) {
          state.professionalMasterDegreeList = data.result.professionalMasterDegreeList
          state.academicMasterDegreeList = data.result.academicMasterDegreeList
      }
    }).catch((error: any) => {
      console.log(error);
    }).finally(() => {
    });
  }
}

//选择硕士专业学位
const selectMasterDegree = (e:any)=>{
  if(props.schoolId){
    axiosInstance({
      url: ApiConstant.GraduateDegree.getSchoolGraduateDegreeDetail,
      method: 'get',
      params: {
        id: e
      },
      // showLoading: false,//是否显示加载图标
    }).then((response) => {
      const data = response.data
      if (data.success) {
          state.detail = data.result
      }
    }).catch((error: any) => {
      console.log(error);
    }).finally(() => {
    });
  }
}
</script>
<style lang="scss" scoped>
.flexWrap{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>