<template>
  <IeModal title="定向院校选择" confirmText="确认选择" ref="modalRef" width="800px" @beforeClose="handleBeforeClose"
    @confirm="handleConfirm">
    <div class="h-120 flex flex-col">
      <div class="flex-1 min-h-1 relative">
        <div class="absolute top-0 left-0 w-full h-full">
          <el-table :data="tableData" height="100%" preserve-expanded-content border v-loading="univerityLoading"
            @expand-change="handleExpandChange">
            <el-table-column type="expand" width="50">
              <template #default="props">
                <div :class="{ 'is-expanded': props.expanded }">
                  <MajorTable :key="props.row.id" :expanded="props.expanded" :universityId="props.row.id"
                    :selection="selectedList" @selection-change="handleSelectionChange($event, props.row)" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="院校名称" prop="name">
              <template #header>
                <el-input v-model="queryParams.name" placeholder="搜索院校" prefix-icon="Search" clearable
                  @clear="handleQuery" @keyup.enter="handleQuery" />
              </template>
              <template #default="scope">
                <div class="flex items-center gap-x-2">
                  <el-image :src="scope.row.logo" class="w-10 h-10 rounded-full shrink-0" />
                  <div class="flex-1 min-w-1">
                    <div class="flex items-center gap-x-2">
                      <div class="font-bold">{{ scope.row.name }}</div>
                      <div class="flex gap-x-2">
                        <el-tag :type="index === 0 ? 'primary' : 'info'" size="mini" disable-transitions
                          class="px-[4px]! py-[3px]! text-[11px]! h-auto!"
                          v-for="(item, index) in getTags(scope.row.bxLevel)" :key="item">{{ item }}</el-tag>
                      </div>
                      <div v-if="scope.row.star"
                        class="text-[10px] text-[#ff9800] border-current border-[1px] rounded-[3px] px-[4px] h-[18px] leading-[16px]">
                        {{ scope.row.star }}</div>
                    </div>
                    <div class="mt-[2px] flex items-center">
                      <el-icon color="#999">
                        <Location />
                      </el-icon>
                      <div class="text-gray-400 text-[13px] ml-1 ellipsis-1">{{ scope.row.address }}</div>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="flex justify-end">
        <Pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
          @pagination="getList" />
      </div>
    </div>
  </IeModal>
</template>
<script setup>
import IeModal from '@/components/IeModal/index.vue';
import MajorTable from './MajorTable.vue';
import { getUniversityList } from '@/api/front/university';
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

const tableData = ref([]);
const total = ref(0);
const univerityLoading = ref(false);
const selectedList = ref([]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 20
});

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

const getList = () => {
  univerityLoading.value = true;
  getUniversityList(queryParams.value).then(res => {
    tableData.value = res.rows;
    total.value = res.total;
  }).finally(() => {
    univerityLoading.value = false;
  })
}

const getTags = (tags) => {
  return tags.split(',').map(item => item.trim());
}


const handleExpandChange = (row, expandedRows) => {
}

const handleSelectionChange = (selection, row) => {
  const { code, name, logo } = row;
  selectedList.value = selectedList.value.filter(item => item.universityId !== code);
  selection.forEach(major => {
    selectedList.value.push({
      code,
      universityId: code,
      univerityLogo: logo,
      universityName: name,
      majorId: major.id,
      majorName: major.name,
      majorAncestors: major.ancestors
    });
  });
}

const modalRef = ref(null);
const handleBeforeClose = () => {
  modalRef.value.close();
}
const emit = defineEmits(['confirm']);
const handleConfirm = () => {
  if (selectedList.value.length === 0) {
    proxy.$modal.msgError('请选择定向院校');
    return;
  }
  emit('confirm', selectedList.value);
  close();
}



const open = (selection) => {
  selectedList.value = selection || [];
  console.log(selectedList.value, 111)
  handleQuery();
  modalRef.value.open();
}
const close = () => {
  modalRef.value.close();
}
defineExpose({
  open,
  close
})
</script>
<style lang="scss" scoped></style>