<template>
  <LeftNav/>
  <div class="main-container wrap main-fullScreen main-div" style="height: unset;background-color: white;">
    <div class="filterTable">
      <div class="filterTitle flexWrap">
        <div class="flex-item-75">
          <div class="searchSchool">
            <el-input v-model="state.selectForm.schoolName" maxlength="24" show-word-limit
                      style="max-width: 230px;height: 40px;line-height: 40px;" placeholder="请输入院校或专业名称"
                      class="input-with-select"/>
            <el-button :icon="Search" @click="reloadSchoolList"
                       style="border-left: none;height: 40px;line-height: 40px;"/>
          </div>
        </div>
      </div>
      <div class="filterBody">
        <div class="flexWrap">
          <div class="flex-item-1">就读地域</div>
          <div class="flex-item-9 tags">
            <span class="tag" :class="state.selectForm.addressList.length === 0 ? 'tag-active' : ''"
                  @click="checkboxAddress('')">不限</span>
            <span class="tag" :class="state.selectForm.addressList.includes(item.code) ? 'tag-active' : ''"
                  v-for="(item, index) in state.addressList" :key="index" @click="checkboxAddress(item.code)">
              {{ item.name }}
            </span>
          </div>
        </div>
        <div class="flexWrap">
          <div class="flex-item-1">院校标签</div>
          <div class="flex-item-9 tags">
            <span class="tag" :class="state.selectForm.tagsList.length === 0 ? 'tag-active' : ''"
                  @click="checkboxSchoolTags('')">不限</span>
            <span class="tag" :class="state.selectForm.tagsList.includes(item.code) ? 'tag-active' : ''"
                  v-for="(item, index) in state.tagsList" :key="index" @click="checkboxSchoolTags(item.code)">
              {{ item.name }}
            </span>
          </div>
        </div>
        <div class="flexWrap">
          <div class="flex-item-1">办学类型</div>
          <div class="flex-item-9 tags">
            <span class="tag"
                  :class="state.selectForm.schoolNatureList && state.selectForm.schoolNatureList.length === 0 ? 'tag-active' : ''"
                  @click="checkboxSchoolNature('')">不限</span>
            <span class="tag" :class="state.selectForm.schoolNatureList.includes(item.code) ? 'tag-active' : ''"
                  v-for="(item, index) in state.schoolNatureList" :key="index" @click="checkboxSchoolNature(item.code)">
              {{ item.name }}
            </span>
          </div>
        </div>
        <div class="border-b"></div>
        <div class="flexWrap">
          <span class="clearFilterButton" @click="clearFilter">重置已选</span>
        </div>
      </div>
    </div>
    <div class="pd-15">
      <el-row :gutter="20">
        <!--  左侧 院校列表-->
        <el-col :xs="12" :sm="12">
          <!--clearable-->
          <div style="border: 1px solid #eee" class="pd-5">
            <div class="schoolList">
              <div class="schoolItem" v-for="(item, index) in state.schoolList" :key="index">
                <div class="flexWrap">
                  <div class="flex-item-15 left" @click="showSchoolInfo(item.schoolCode)">
                    <img :src="item.schoolIcon" :alt="item.schoolName"
                         style="width: 80px;height: 80px;border-radius: 50%;margin: auto;"/>
                  </div>
                  <div class="flex-item-8 right">
                    <div class="flexWrap" style="line-height: 30px;" @click="showSchoolInfo(item.schoolCode)">
                      <span class="schoolName"
                            :class="state.testCulturalSchoolCode === item.schoolCode ? 'schoolName-active' : ''">
                        {{ item.schoolName }}
                      </span>
                      <span class="province" v-if="item.province">{{ item.province }}{{ item.city }}{{
                        item.area }}</span>
                    </div>
                    <div class="flexWrap">
                      <div class="tags">
                        <span class="tag" v-for="(tag, i) in item.tagsList" :key="i">
                          {{ tag }}
                        </span>
                      </div>
                      <div class="" style="margin: 0 0 0 auto;z-index: 99;">
                        <el-button text bg type="primary" @click="handleClickTestCultural(item.schoolCode)">测文化
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <el-skeleton :loading="state.loading" style="padding-top: 25px;"></el-skeleton>
            <div class="page pd-15">
              <el-pagination small background @current-change="handlePage" :current-page="state.selectForm.current"
                             :page-size="state.size" :total="state.total" layout="total, prev, pager, next"/>
              <!-- jumper -->
            </div>
          </div>
        </el-col>
        <!--  右侧 功能广告-->
        <el-col :xs="12" :sm="12">
          <div style="border: 1px solid #eee"
               v-if="state.schoolMajorList && state.schoolMajorList.length>0 && state.testCulturalSchoolCode">
            <div class="majorList pd-0-15">
              <div class="majorItem" v-for="(major, index) in state.schoolMajorList" :key="index">
                <div class="flexWrap">
                  <div class="flex-item-8">
                    <div class="flexWrap majorName" :class="state.testCulturalMajorIndex===index+1?'active-blue':''">{{
                      major.majorName }}
                    </div>
                    <div class="flexWrap">
                      <div class="mr-10">{{ major.batch }}</div>
                      <div class="mr-10">{{ major.category }}</div>
                      <div v-if="major.detail">
                        {{major.detail }}
                      </div>
                    </div>
                  </div>
                  <div class="flex-item-1" style="height: 50px;line-height: 50px;">
                    <div class="" style="margin:0 5px 0 auto">
                      <el-button type="primary" @click="handleClickTestCulturalMajor(major,(index+1))">查看</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="border: 1px solid #eee" v-show="state.testCulturalMajor && state.testCulturalMajor.majorName"
               class="trans3 mt-10 pd-15">
            <div class="csTitle">测算结果</div>
            <div class="csScore">
                <span
                    v-if="state.testCulturalMajor && state.testCulturalMajor.needScore && state.testCulturalMajor.needScore!==0">
                  当前需要超过{{ state.testCulturalMajor.needScore }}分
                </span>
              <span v-else-if="state.testCulturalMajor.rulesEnrollProbability==='专过文排'">
                  文化分需超过{{ state.testCulturalMajor.score }}分
                </span>
              <span
                  v-else-if="state.testCulturalMajor.rulesEnrollProbability==='文过专排' || state.testCulturalMajor.rulesEnrollProbability==='文过专排主科'">
                  专业分需超过{{ state.testCulturalMajor.score }}分
                </span>
              <span v-else>
                  文化分和专业分需要超过{{ state.testCulturalMajor.score }}分
                </span>
            </div>
            <div class="csHistory">
              <div>{{ state.testCulturalMajor.year }}河南文化分控线为 <span class="score">{{state.testCulturalMajor.culturalScore}}</span>分
              </div>
              <div>{{ state.testCulturalMajor.year }}河南专业分控线为 <span class="score">{{state.testCulturalMajor.specialScore}}</span>分
              </div>
            </div>
            <div class="border-t mt-10 mb-10"></div>
            <div class="csLqfs">
              <div class="title">录取方式</div>
              <span class="detail">{{ state.testCulturalMajor.rulesEnrollProbability || '未知' }}</span>
              <div class="title">院校限制</div>
              <span class="detail">{{ state.testCulturalMajor.limitation||'暂无' }}</span>
            </div>
          </div>
          <div class="textCenter" v-show="!state.testCulturalSchoolCode">
            <span>选择院校点击测文化即可查看专业</span>
          </div>

        </el-col>
      </el-row>
    </div>


  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import apiConstant from "@/utils/ApiConstant";
import axiosInstance from '@/utils/http';
import {SchoolEntity} from "@/types";
import {Search} from '@element-plus/icons-vue';
import LeftNav from "@/components/LeftNav.vue";
import StaticConstant from '@/utils/StaticConstant';
import {getTestCultural} from '@/axios/major/MajorApi';

document.title = '找大学|' + import.meta.env.VITE_PROGRAM_TYPE;
//激活的tabs页
const state = reactive({
  selectForm: {
    schoolName: '',
    addressList: [] as any,
    kyjxList: [] as any,
    tagsList: [] as any,
    schoolNatureList: [] as any,
    current: 1,
    pageSize: 10,
  } as any,
  schoolList: [] as Array<SchoolEntity>,
  size: 10,
  total: 0,
  current: 1,
  loading: false,//加载中? true 加载/false 关闭
  testCulturalMajor: {} as any,
  testCulturalMajorIndex: null as any,//
  testCulturalSchoolCode: '',//是否需要测文化分
  addressList: [...StaticConstant.addressList] as any,//就读地域筛选项
  kyjxList: ['硕士点', '博士点', '保研'] as Array<string>,//科研教学筛选项
  rulesEnrollProbabilityList: [] as Array<any>,//录取方式
  tagsList: StaticConstant.tagsList as Array<any>,//院校标签
  schoolNatureList: [...StaticConstant.schoolTypeList] as Array<any>,//办学类型
  schoolMajorList: [] as any,//院校招录专业
})

getSchoolList()

//获取学校列表
function getSchoolList() {
  state.loading = true;
  state.schoolList = []
  axiosInstance({
    url: apiConstant.School.searchSchoolList,
    method: 'get',
    params: {
      schoolName: state.selectForm.schoolName,
      pageNum: state.selectForm.current,
      pageSize: state.selectForm.pageSize,
      addressList: state.selectForm.addressList,
      tagsList: state.selectForm.tagsList,
      schoolNatureList: state.selectForm.schoolNatureList
    },
    showLoading: false,//是否显示加载图标
  }).then((response) => {
    return response?.data
  }).then((data) => {
    state.loading = false;
    if (data.success) {

      let dataResult = data.result
      console.log(dataResult)
      let tags = []
      if (dataResult.records != null && dataResult.records != undefined) {
        for (let i = 0; i < dataResult.records.length; i++) {
          tags = []
          let dre = dataResult.records[i]
          if (dataResult.records[i].tagsList != null && dataResult.records[i].tagsList != undefined) {
            tags.push(...dre.tagsList)
          }
          dataResult.records[i].tagsList = tags
        }
      }
      state.schoolList = dataResult.records
      state.selectForm.current = data.result.current
      state.selectForm.pageSize = data.result.size
      state.total = data.result.total
    }
  }).catch((error: any) => {
    console.log(error);
  }).finally(() => {
  });
}

function reloadSchoolList() {
  state.selectForm.current = 1
  state.schoolList = []
  getSchoolList()
}

const handlePage = (page: number) => {
  if (page) {
    state.selectForm.current = page
    getSchoolList()
  }
}

//选择地区
function checkboxAddress(addressCode: string) {
  if (!addressCode) {
    state.selectForm.addressList = []
  } else if (state.selectForm.addressList.includes(addressCode)) {
    state.selectForm.addressList = state.selectForm.addressList.filter((element: any) => element !== addressCode)
  } else {
    state.selectForm.addressList.push(addressCode)
  }
  reloadSchoolList()
}

//选择科研教学
function checkboxKyjx(kyjx: string) {
  if (!kyjx) {
    state.selectForm.kyjxList = []
  } else if (state.selectForm.kyjxList.includes(kyjx)) {
    state.selectForm.kyjxList = state.selectForm.kyjxList.filter((element: any) => element !== kyjx)
  } else {
    state.selectForm.kyjxList.push(kyjx)
  }
  reloadSchoolList()
}

//选择院校标签
function checkboxSchoolTags(schoolTag: string) {
  if (!schoolTag) {
    state.selectForm.tagsList = []
  } else if (state.selectForm.tagsList.includes(schoolTag)) {
    state.selectForm.tagsList = state.selectForm.tagsList.filter((element: any) => element !== schoolTag)
  } else {
    state.selectForm.tagsList.push(schoolTag)
  }
  reloadSchoolList()
}

//选择办学类型
function checkboxSchoolNature(schoolNature: string) {
  if (!schoolNature) {
    state.selectForm.schoolNatureList = []
  } else if (state.selectForm.schoolNatureList.includes(schoolNature)) {
    state.selectForm.schoolNatureList = state.selectForm.schoolNatureList.filter((element: any) => element !== schoolNature)
  } else {
    state.selectForm.schoolNatureList.push(schoolNature)
  }
  reloadSchoolList()
}

const showSchoolInfo = (schoolCode: string) => {
  window.open(schoolCode, '_self')
}

//点击测文化
const handleClickTestCultural = async (schoolCode: string) => {
  state.schoolMajorList = []
  state.testCulturalSchoolCode = schoolCode
  state.testCulturalMajorIndex = undefined
  state.testCulturalMajor = {}
  const result = await getTestCultural({schoolCode: schoolCode, year: '2023'});
  state.schoolMajorList = result
}

//选择测文化专业
const handleClickTestCulturalMajor = (major: any, index: number) => {
  state.testCulturalMajorIndex = index
  state.testCulturalMajor = major
}

//清除筛选项
function clearFilter() {
  state.selectForm.schoolName = ''
  state.selectForm.addressList = []
  state.selectForm.tagsList = []
  state.selectForm.schoolNatureList = []
  reloadSchoolList()
}
</script>

<style scoped lang="scss">
.schoolName {
  padding-top: 0 !important;
}

.province {
  height: 26px;
  line-height: 24px;
  font-size: 12px;
  border: 1px solid #eee;
  color: #555;
  display: inline-block;
  padding: 0 10px;
  margin: 0 20px 0 15px;
}

//测文化 start
.csTitle {
  padding: 10px 0;
  font-size: 20px;
  text-align: center;
  color: $color-blue-60;
}

.csScore {
  padding: 10px 0;
  text-align: center;
  color: $color-black-60;
}

.csHistory {
  text-align: center;
  color: $color-black-60;

  .score {
    font-weight: 600;
    color: $color-blue-50;
  }
}

//录取方式
.csLqfs {
  .title {
    color: $color-black-60;
  }

  .detail {
    font-weight: 600;
    color: $color-blue-50;
  }
}

// 测文化 end
</style>
