
<script lang="ts">
export default {
  name: 'associztionschool' // 关联学校
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox, FormRules,ElTable} from "element-plus";
import Page from '@/components/Pagination/page.vue';
import { queryPlanSchoolPage } from "@/api/regionmodule/school";
import { queryRegionById } from "@/api/regionmodule/region";
import { queryExamineSchoolPage,addExamineSchool,delExamineSchool } from "@/api/planscreening";
import { publicTree } from '@/utils/validate';
import { getDict } from '@/api/dict'
const props:any = defineProps({
  planInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
defineExpose({
  init
})
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0,
  name:''
})
const queryInfos :any = ref({
  name:'',
  current:1,
  size:10,
  total:0
})
const searchval = ref('')
const tableData = ref([])
const multipleSelection = ref([])
const dialogFormVisible = ref(false)

const multipleSelections = ref([])
const loading = ref(false)
const schoolloading = ref(false)
const loadingtext = ref('')


const examineLoading = ref(false)
onMounted(() => {
  regionId.value = props.planInfo.org_id
  regionType.value = props.planInfo.org_type
  init()
  getDict({ dictcode: 'schoolType' }).then((res) => {
    schoolTypeList.value = res.data
  })
})
const planId = ref("")
// 初始化
function init(){
  searchval.value = searchval.value.replace(/\s+/g, "");
  let params = {
    name: searchval.value,
    planId: props.planInfo.id,
    current: queryInfos.value.current,
    size:queryInfos.value.size
  };
  examineLoading.value = true
  queryExamineSchoolPage(params).then((res) => {
    tableData.value = res.data.records;
    queryInfos.value.total = res.data.total
    examineLoading.value = false
  }).catch(()=>{
    examineLoading.value = false
  });
}


function addinfo(){
  getSchool()
  if(props.planInfo.org_type != "5"){
    getRegionTree()
  }

  multipleSelections.value = []
  dialogFormVisible.value = true
}
const dialogtable = ref<InstanceType<typeof ElTable>>()
function infosubmit(){
  ElMessageBox.confirm("确定关联已选择的学校吗?", "关联提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let id = [] as any[];
    multipleSelections.value.forEach((item: any) => {
      id.push(item.id)
    })
    let params = {
      ids: id.join(','),
      planId: props.planInfo.id
    };
    schoolloading.value = true
    loadingtext.value = '正在关联学校普检学生，请耐心等待！！'
    addExamineSchool(params).then(() => {
      schoolloading.value = false
      loadingtext.value = ''
      dialogtable.value!.clearSelection()
      dialogFormVisible.value = false
      init()
      ElMessage({
        message: "关联成功",
        type: "success",
      });
    }).catch(()=>{
      loadingtext.value = ''
      schoolloading.value = false
    })
  });

}
function delinfo(row: any) {
  ElMessageBox.confirm("确定删除此学校吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      ids: row.id,
    };
    delExamineSchool(params).then(() => {
      init();
      ElMessage({
        message: "解除关联学校",
        type: "success",
      });
    });
  });
}
function delinfos() {
  ElMessageBox.confirm("确定删除此学校吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let id = [] as any[];
    multipleSelection.value.forEach((item: any) => {
      id.push(item.id)
    })
    let params = {
      ids: id.join(','),
    };
    delExamineSchool(params).then(() => {
      init();
      ElMessage({
        message: "解除关联学校",
        type: "success",
      });
    });

  });
}
//表格分页
function getData(){
console.log(11)
}
//弹窗表格分页
function getDatas(){
console.log(11)
}
//搜索
function searchclick(){
  init()
}
function handleClose(){
  dialogtable.value!.clearSelection()
  dialogFormVisible.value = false
}
function handleSelectionChange(val:any){
  multipleSelection.value = val
}
function handleSelectionChanges(val:any){
  multipleSelections.value = val
}
function resetdata(){

}
//获取行政区域
function getRegionTree() {
  const params = {
    regionId: props.planInfo.org_id,
    regionType: props.planInfo.org_type,
  };
  queryRegionById(params).then((res: any) => {
    regiondata.value = res.data
    cascaderdata.value = publicTree(res.data,"");
  })
  .catch((error:any)=>{
  })
}
// 方法
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
const cascaderdata: any = ref([]);
const regiondata: any = ref([]);
const schoolData = ref([])
// 选中区域获取医生列表
const regionId = ref("")
const regionType = ref("")
function handleChange(value:any){
  if(value.length != 0){
    regionId.value = value[value.length -1]
    for(let i=0;i<regiondata.value.length;i++){
      if(regionId.value == regiondata.value[i].id){
        regionType.value = regiondata.value[i].type
        break
      }
    }
  }
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  getSchool()
}
function handleClick(data:any){
  if(data.children == null){
    isCascader.value = false
    setTimeout(()=>{
      isCascader.value = true
    },20)
  }
  regionId.value = data.id
  regionType.value = data.type
  getSchool()
}
//获取表格类型
function getSchool() {
   queryInfo.value.name = queryInfo.value.name.replace(/\s+/g, "");
   let params = {}
   if(props.planInfo.org_type != '5'){
    params = {
      name: queryInfo.value.name,
      regionId: regionId.value,
      current: queryInfo.value.current,
      size:queryInfo.value.size,
      type:regionType.value
    };
  } else {
    params = {
      name: queryInfo.value.name,
      schoolId:props.planInfo.org_id,
      current: queryInfo.value.current,
      size:queryInfo.value.size,
      type:props.planInfo.org_type
    };
  }
  schoolloading.value = true
  queryPlanSchoolPage(params).then((res) => {
    schoolData.value = res.data.records;
    queryInfo.value.total = res.data.total
    schoolloading.value = false
  }).catch(()=>{
    schoolloading.value = false
  });
}
const isCascader=ref(true)
const schoolTypeList:any = ref([])
function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
</script>

<template>
    <div class="content-box">
      <div class="box-search">
        <div class="flex">
          <el-input v-model="searchval" placeholder="请输入学校名称" clearable style="width:200px" />
          <el-button type="primary" class="ml-[10px]" @click="searchclick">搜索</el-button>
        </div>
        <div>
          <el-button type="primary" @click="addinfo"><img src="@/assets/visionscreening/jscz_xz.png" alt="" style="margin-right: 4px;" >添加</el-button>
          <el-button @click="delinfos" :disabled="multipleSelection.length <= 0" :type="multipleSelection.length > 0 ? 'primary' : ''">
            <el-icon><Delete /></el-icon> 删除</el-button>
        </div>
      </div>
      <div v-loading="examineLoading">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%; height:calc(100vh - 430px)" @selection-change="handleSelectionChange" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column prop="code" label="学校代码" width="100" /> -->
            <el-table-column prop="name" label="学校名称" min-width="120" />
            <!-- <el-table-column prop="education_code" label="教育机构代码" min-width="100" /> -->
            
            <el-table-column prop="teach_type" label="办学类型" width="170">
              <template #default="scope">{{ currency(schoolTypeList, scope.row.teach_type) }}</template>
            </el-table-column>
            <el-table-column prop="custom1" label="学校类型" width="140">
              <template #default="scope">
                <span v-if="scope.row.custom1 !=null && scope.row.custom1 !=''">
                {{ scope.row.custom1.split("-")[1] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="region_name" label="所属区域" />
            <!-- <el-table-column prop="teacher_name" label="校长姓名" width="100" /> -->
            <el-table-column label="操作" width="80" fixed="right" align="center">
              <template #default="scope">
                <div style="display: -webkit-flex;display: flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                  <img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delinfo(scope.row)" style="cursor: pointer;">
                </div> 
              </template>
            </el-table-column>
          </el-table>
          <Page class="mt-[20px]" :total="queryInfos.total" v-model:size="queryInfos.size" v-model:current="queryInfos.current"
            @pagination="init" />
      </div>
      <el-dialog v-model="dialogFormVisible" :close-on-click-modal="false" title="选择筛选学校" :before-close="handleClose" width="880px" draggable append-to-body>
        <div v-loading="schoolloading" 
          :element-loading-text="loadingtext">
          <div class="dialogsearch">
            <div style="display: flex;">
              <el-input v-model="queryInfo.name" placeholder="请输入学校名称" style="width: 150px;margin-right: 10px;" clearable />
              <div style="width: 200px; margin-right: 10px;">
                <el-cascader v-if="planInfo.org_type != '5' && isCascader == true" style="width: 200px;" placeholder="请输入行政区域" v-model="regionId" @change="handleChange"
              :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" @click="getSchool">搜索</el-button>
              <el-button @click="resetdata">重置</el-button>
            </div>
            <div>
              <el-button type="primary" @click="infosubmit">确定</el-button>
            </div>
          </div>
          <el-table ref="dialogtable"  :data="schoolData" border style="width: 100%; height:calc(100vh - 445px)" @selection-change="handleSelectionChanges" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="region_name" label="所属区域" width="200" />
            <el-table-column prop="custom1" label="学校类型" width="140">
              <template #default="scope">
                <span v-if="scope.row.custom1 !=null && scope.row.custom1 !=''">
                {{ scope.row.custom1.split("-")[1] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="学校名称" min-width="150" />
          </el-table>
          <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
            @pagination="getSchool" />
        </div>

    </el-dialog>
    </div>
</template>
<style scoped  lang="scss">
  .content-box{
    margin-top: 15px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    background-color: #fff;
    padding: 20px;
    .box-search{
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      margin-bottom: 20px;
      // :deep(){
      //   .el-input{
      //       height:40px;
      //       line-height: 40px;
      //       width: 240px;
      //   }
      //   .el-button{
      //     height:40px; 
      //   }
    // }
    }
  }
// :deep(){
//    .el-input{
//     height: 40px;
//     line-height: 40px;
//    }
//    .el-button{
//     height:40px; 
//     margin-left: 10px;
//   }
// }
.dialogsearch{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>
