
<script lang="ts">
export default {
  name: 'activity-school' // 活动关联学校
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { querySchoolPage } from "@/api/regionmodule/school";
import { queryRegion } from "@/api/regionmodule/region";
import { publicTree } from '@/utils/validate';
const emit = defineEmits([ 'returnClick']);
const isSchool = ref(true)
function schoolClose(){
  emit('returnClick', false);
}
const cascaderdata: any = ref([]);
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
//获取行政区域
function getTree() {
  const params = {
    name: "",
    status:'01'
  };
  queryRegion(params).then((res: any) => {
    cascaderdata.value = publicTree(res.data,"");
  })
  .catch((error:any)=>{
  })
}

// 选中区域获取班级列表
function handleChange(value:any){
  if(value != null && value.length != 0){
    regionId.value = value[value.length -1]
    for(let i=0;i<cascaderdata.value.length;i++){
      if(regionId.value == cascaderdata.value[i].id){
        regionType.value = cascaderdata.value[i].type
        break
      }
    }
  }else{
    regionId.value = ""
    regionType.value = ""
  }
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  getSchool()
}
function handleClick(data:any){
  regionType.value = data.type
  if(data.children == null){
    isCascader.value = false
    setTimeout(()=>{
      isCascader.value = true
    },20)
  }
  regionId.value = data.id
  getSchool()
}
const queryInfo:any = ref({
  name:""
}) // 查询条件
const regionInfo:any = ref("")
const regionId:any = ref("")
const regionType:any = ref("")
const loading= ref(false)
const schoolData:any= ref([])
//获取表格类型
function getSchool() {
   queryInfo.value.name = queryInfo.value.name.replace(/\s+/g, "");
  let params = {
    name: queryInfo.value.name,
    regionId: regionId.value,
    current: queryInfo.value.current,
    size:queryInfo.value.size,
    type:regionType.value
  };
  loading.value = true
  querySchoolPage(params).then((res) => {
    schoolData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
}
// 关联学校
function bindingClick() {
  ElMessageBox.confirm("确定关联已选择的学校吗?", "关联提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    emit('returnClick', multipleSelection.value);
  });
}
const multipleSelection = ref([]);
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
getSchool()
onMounted(() => {
  getTree()
  getSchool()
});
const isCascader=ref(true)
</script>
<template>
      <el-dialog v-model="isSchool" :before-close="schoolClose" :title="'选择关联学校'" draggable width="1000px">
      <div style="padding:0 25px">
        <el-row style="margin-bottom: 10px;width: calc(100%);">
          <el-col :span="24" class="top-nav">
            <div style="display: flex;">
              <el-input v-model="queryInfo.name" placeholder="请输入学校名称" clearable style="width: 200px;margin-right: 10px;"
                @keyup.enter="getSchool" />
                <div style="width: 200px;height: 32px; margin: auto;">
                  <el-cascader v-if="isCascader" style="width: 200px; margin: auto;" placeholder="请输入行政区域" v-model="regionInfo" @change="handleChange" clearable="" :options="cascaderdata" :props="props1" :show-all-levels="false" filterable>
                    <template #default="{ node, data }">
                      <div @click.stop="handleClick(data)">{{ data.name }}</div>
                    </template>
                  </el-cascader>
                </div>
                
              <el-button type="primary" style="margin-left: 10px;" @click="getSchool">搜索</el-button>
            </div>
            <div class="left-nav">
              <el-button type="primary" @click="bindingClick">确定</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="schoolData" style="width: 100%; height:calc(100vh - 245px);" row-key="id" border
       default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}"
       @selection-change="handleSelectionChange" 
        >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="code" label="学校代码" width="140" align="center"></el-table-column>
        <el-table-column prop="name" label="学校名称" width="160"></el-table-column>
        <el-table-column prop="address" label="学校地址" min-width="120" align="center"></el-table-column>
      </el-table>
      <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="getSchool" />
      </div>
    </el-dialog>
</template>
<style scoped  lang="scss">
.top-nav {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
</style>
