<template>
  <div>
    <div class="select">
      <div style="width: 100%">
        院校省份：
        <a-radio-group v-model:value="shengfen">
          <a-radio-button
            :value="index"
            v-for="item,index in shengfenlist"
            :key="item.area_id"
          >{{ item.area_name }}</a-radio-button>
        </a-radio-group>
        <br />城市：
        <a-radio-group v-model:value="chengshi">
          <a-radio-button
            :value="index"
            v-for="item,index in chengshilist"
            :key="item.area_id"
          >{{ item.area_name }}</a-radio-button>
        </a-radio-group>
        <br />已选择：
        <a-button
          v-for="item,index in xaunzelist"
          :key="index"
          @click="removexuanzhong(index)"
        >{{ item }}</a-button>
        <br />
      </div>
      <div style="width: 100%">
        学历层次：
        <a-button
          @click="shaixuan.benke == 1 ? shaixuan.benke = 0 : shaixuan.benke = 1"
          :type="shaixuan.benke == 1 ? 'primary' : 'link'"
        >本科</a-button>
        <a-button
          @click="shaixuan.zhuanke == 1 ? shaixuan.zhuanke = 0 : shaixuan.zhuanke = 1"
          :type="shaixuan.zhuanke == 1 ? 'primary' : 'link'"
        >专科</a-button>
        <br />学院层次：
        <a-button
          @click="shaixuan.is985 == 1 ? shaixuan.is985 = 0 : shaixuan.is985 = 1"
          :type="shaixuan.is985 == 1 ? 'primary' : 'link'"
        >985</a-button>
        <a-button
          @click="shaixuan.is211 == 1 ? shaixuan.is211 = 0 : shaixuan.is211 = 1"
          :type="shaixuan.is211 == 1 ? 'primary' : 'link'"
        >211</a-button>
        <a-button
          @click="shaixuan.yiliuxveke == 1 ? shaixuan.yiliuxveke = 0 : shaixuan.yiliuxveke = 1"
          :type="shaixuan.yiliuxveke == 1 ? 'primary' : 'link'"
        >一流学科建设</a-button>
        <a-button
          @click="shaixuan.yiliudaxve == 1 ? shaixuan.yiliudaxve = 0 : shaixuan.yiliudaxve = 1"
          :type="shaixuan.yiliudaxve == 1 ? 'primary' : 'link'"
        >一流大学建设</a-button>
        <a-button
          @click="shaixuan.gongban == 1 ? shaixuan.gongban = 0 : shaixuan.gongban = 1"
          :type="shaixuan.gongban == 1 ? 'primary' : 'link'"
        >公办</a-button>
        <a-button
          @click="shaixuan.minban == 1 ? shaixuan.minban = 0 : shaixuan.minban = 1"
          :type="shaixuan.minban == 1 ? 'primary' : 'link'"
        >民办</a-button>
        <br />已选择：
        <a-button
          v-if="shaixuan.benke == 1"
          @click="shaixuan.benke == 1 ? shaixuan.benke = 0 : shaixuan.benke = 1"
          :type="shaixuan.benke == 1 ? 'primary' : 'link'"
        >本科</a-button>
        <a-button
          v-if="shaixuan.zhuanke == 1"
          @click="shaixuan.zhuanke == 1 ? shaixuan.zhuanke = 0 : shaixuan.zhuanke = 1"
          :type="shaixuan.zhuanke == 1 ? 'primary' : 'link'"
        >专科</a-button>
        <a-button
          v-if="shaixuan.is985 == 1"
          @click="shaixuan.is985 == 1 ? shaixuan.is985 = 0 : shaixuan.is985 = 1"
          :type="shaixuan.is985 == 1 ? 'primary' : 'link'"
        >985</a-button>
        <a-button
          v-if="shaixuan.is211 == 1"
          @click="shaixuan.is211 == 1 ? shaixuan.is211 = 0 : shaixuan.is211 = 1"
          :type="shaixuan.is211 == 1 ? 'primary' : 'link'"
        >211</a-button>
        <a-button
          v-if="shaixuan.yiliuxveke == 1"
          @click="shaixuan.yiliuxveke == 1 ? shaixuan.yiliuxveke = 0 : shaixuan.yiliuxveke = 1"
          :type="shaixuan.yiliuxveke == 1 ? 'primary' : 'link'"
        >一流学科建设</a-button>
        <a-button
          v-if="shaixuan.yiliudaxve == 1"
          @click="shaixuan.yiliudaxve == 1 ? shaixuan.yiliudaxve = 0 : shaixuan.yiliudaxve = 1"
          :type="shaixuan.yiliudaxve == 1 ? 'primary' : 'link'"
        >一流大学建设</a-button>
        <a-button
          v-if="shaixuan.gongban == 1"
          @click="shaixuan.gongban == 1 ? shaixuan.gongban = 0 : shaixuan.gongban = 1"
          :type="shaixuan.gongban == 1 ? 'primary' : 'link'"
        >公办</a-button>
        <a-button
          v-if="shaixuan.minban == 1"
          @click="shaixuan.minban == 1 ? shaixuan.minban = 0 : shaixuan.minban = 1"
          :type="shaixuan.minban == 1 ? 'primary' : 'link'"
        >民办</a-button>
        <br />
      </div>
    </div>
    <div class="table">
      <a-table :columns="columns" :data-source="data">
        <template v-slot:name="text">{{ text.record.university_name }}</template>
        <template v-slot:province="text">{{ text.record.area.area_name  }}</template>
        <template v-slot:university_level="text">{{ text.record.university_level == 0 ? "专科": "本科" }}</template>
        <template v-slot:is985="text">{{ text.record.is985 == 0 ? "X": "√" }}</template>
        <template v-slot:is211="text">{{ text.record.is211 == 0 ? "X": "√" }}</template>
        <template v-slot:is_first_class_university="text">{{ text.record.is_first_class_university == 0 ? "X": "√" }}</template>
        <template v-slot:is_first_class_subject="text">{{ text.record.is_first_class_subject == 0 ? "X": "√" }}</template>
        <template v-slot:university_attribute="text">{{ text.record.university_attribute == 0 ? "民办": "公办" }}</template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import { allProvince, getAllCityVByArea_parent, getAllProvince, getUniversityByCondition, getUniversityByConditionres } from "../api/schoolquery"



const columns = [
  {
    dataIndex: 'area_names',
    title: "院校名称",
    key: 'area_names',
    slots: { customRender: 'name' },
  },
  {
    title: '院校所在地',
    dataIndex: 'province',
    key: 'province',
    slots: { customRender: 'province' },
  },
  {
    title: '学历层次',
    dataIndex: 'university_level',
    key: 'university_level',
    slots: { customRender: 'university_level' },
  },
  {
    title: '985',
    key: 'is985',
    dataIndex: 'is985',
    slots: { customRender: 'is985' },
  },
  {
    title: '211',
    key: 'is211',
    slots: { customRender: 'is211' },
  },
  {
    title: '一流大学',
    key: 'is_first_class_university',
    slots: { customRender: 'is_first_class_university' },
  },
  {
    title: '一流学科',
    key: 'is_first_class_subject',
    slots: { customRender: 'is_first_class_subject' }
  },
  {
    title: '办学类型',
    key: 'university_attribute',
    slots: { customRender: 'university_attribute' },
  },
];

const data = ref<getUniversityByConditionres>()
const shengfen = ref(0)
const chengshi = ref<number>(-1)


function getlist() {
  getUniversityByCondition({
    area_names: xaunzelist.value,
    ...shaixuan.value
  }).then((res) => {
    data.value = res.data
  })
}
const shaixuan = ref({
  gongban: 0,
  minban: 0,
  benke: 0,
  zhuanke: 0,
  is985: 0,
  is211: 0,
  yiliuxveke: 0,
  yiliudaxve: 0
})
watch(shaixuan.value, getlist)


const xaunzelist = ref<string[]>([])
watch(xaunzelist.value,getlist)
getlist()

function removexuanzhong(index: number) {
  xaunzelist.value.splice(index, 1)
}
function addxuanze() {
  if (chengshi.value == -1 || xaunzelist.value.includes(`${shengfenlist.value[shengfen.value].area_name}/${chengshilist.value[chengshi.value].area_name}`)) {
    return
  }

  xaunzelist.value.push(`${shengfenlist.value[shengfen.value].area_name}/${chengshilist.value[chengshi.value].area_name}`)
}

watch(shengfen, getchengshi)

const shengfenlist = ref<allProvince[]>([])
getAllProvince().then((res) => {
  shengfenlist.value = res.data
  shengfen.value = 0
  getchengshi()
})
watch(chengshi, addxuanze)



const chengshilist = ref<allProvince[]>([])
function getchengshi() {

  getAllCityVByArea_parent({ area_parent: shengfenlist.value[shengfen.value].area_id }).then((res) => {
    chengshilist.value = res.data
    chengshi.value = -1
  })

}

</script>

<style lang="scss" scoped>
.select {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.table {
  margin-top: 60px;
}
</style>