<script lang="ts">
export default {
  name: 'InstitutionSchools' // 机构-学校对照
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { queryRegion } from "@/api/regionmodule/region";
import { queryPlanSchoolPage } from "@/api/regionmodule/school";
import { publicTree } from '@/utils/validate';
import { queryInstitutionSchoolList,addInstitutionSchool,delInstitutionSchool } from "@/api/regionmodule/visionInstitution";;
import Page from '@/components/Pagination/page.vue'
const emit = defineEmits([ 'returnClick']);
const props:any = defineProps({
  institutionInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
const institutionInfo:any = ref({})
const dialogVisible = ref(true)
function handleClose(){
  emit('returnClick', false);
}
//获取表格类型
function getData() {
  let params = {
    institutionId: institutionInfo.value.id,
  };
  loading.value = true
  queryInstitutionSchoolList(params).then((res) => {
    tableData.value = res.data;
    loading.value = 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,
    type:regionType.value,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loading.value = true
  queryPlanSchoolPage(params).then((res) => {
    schoolData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
}
function addClick(){
  queryInfo.value = {
    name:"",
    current:1,
    size:10,
    tatol:0
  }
  regionId.value = ""
  regionType.value = ""
  getSchool()
  isSchool.value = true
}
const queryInfo:any = ref({
  current:1,
  size:10,
  tatol:0,
})
const tableData:any = ref([]);
const cascaderdata: any = ref([]);
const cascaderList: any = ref([]);
//获取行政区域
function getTree() {
  const params = {
    name: "",
    status:'01'
  };
  queryRegion(params).then((res: any) => {
    cascaderList.value = res.data;
    cascaderdata.value = publicTree(res.data,"");
  })
  .catch((error:any)=>{
  })
}
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
const regionId:any = ref("")
const regionType:any = ref("")
// 选中区域获取班级列表
function handleChange(value:any){
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  if(value != null && value.length != 0){
    regionId.value = value[value.length -1]
    for(let i=0;i<cascaderList.value.length;i++){
      if(regionId.value == cascaderList.value[i].id){
        regionType.value = cascaderList.value[i].type
        break
      }
    }
  }else{
    regionId.value = ""
    regionType.value = ""
  }
  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()
  // regionType.value = data.type
  getSchool()
}
//解除关联学校
function delHandle(row: any) {
  ElMessageBox.confirm("确定解除关联学校吗?", "解绑提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      ids: row.id,
    };
    delInstitutionSchool(params).then(() => {
      getData();
      ElMessage({
        message: "解除关联学校",
        type: "success",
      });
    });
  });
}
const loading= ref(false)
const isSchool = ref(false)
function schoolClose(){
  isSchool.value = false
}
onMounted(() => {
  institutionInfo.value = props.institutionInfo
  getTree()
  getData()
});
const multipleSelection = ref([]);
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
// 关联学校
function bindingClick() {
  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(','),
      institutionId:institutionInfo.value.id
    };
    addInstitutionSchool(params).then((res:any) => {
      if(res.code=='0'){
        isSchool.value = false
        getData();
        ElMessage({
          message: "关联成功",
          type: "success",
        });
      }else{
        ElMessage({
          message: res.msg,
          type: "error",
        });
        isSchool.value = false
      }
      
    });
  });
}
const isCascader=ref(true)
</script>
<template>
  <div class="">
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="'关联学校'" draggable width="1000px">
      <div style="padding:0 25px">
        <div class="flexitems" style="margin-bottom: 15px;">
          <div class="titleline"></div>
          <div class="titlename">机构信息</div>
        </div>
        <div class="flexitems">
          <div style="width:70px;text-align: right;">父级机构：</div>
          <div class="textname" style="width:220px">{{institutionInfo.name}}</div>
          <div style="width:70px;text-align: right;">机构代码：</div>
          <div class="textname" style="width:185px">{{institutionInfo.code}}</div>
          <div style="width:70px;text-align: right;">机构名称：</div>
          <div class="textname" style="width:220px">{{institutionInfo.name}}</div>
        </div>
        <div class="flexitems">
          <div style="width:70px;text-align: right;">负责人：</div>
          <div class="textname" style="width:220px">{{institutionInfo.manager}}</div>
          <div style="width:70px;text-align: right;"> 联系人：</div>
          <div class="textname" style="width:185px">{{institutionInfo.contact}}</div>
          <div style="width:70px;text-align: right;">联系电话：</div>
          <div class="textname" style="width:220px">{{institutionInfo.telephone}}</div>
        </div>
        <div class="flexitems">
          <div style="width:70px;text-align: right;"> 所属城市：</div>
          <div class="textname">{{institutionInfo.regionName}}</div>
        </div>
        <div class="flexitems">
          <div style="width:70px;text-align: right;"> 机构地址：</div>
          <div class="textname">{{institutionInfo.address}}</div>
        </div>
        <div class="flexitems" style="margin-bottom: 15px;">
          <div class="titleline"></div>
          <div class="titlename">关联学校</div>
        </div>
        <el-button type="primary" @click="addClick" style="margin-bottom: 10px;">关联学校</el-button>
        <el-table v-loading="loading" :data="tableData" style="width: 100%; height:calc(100vh - 445px);" row-key="id" border
           default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}"
        >
        <el-table-column prop="region_name" label="所属区域" />
        <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="120" />
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
            <img src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="cursor: pointer;"
              @click="delHandle(scope.row)" >
            </span>
          </template>
        </el-table-column>
      </el-table>
      </div>
      
    
    </el-dialog>
    <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 class="top-nav">
              <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;" placeholder="请输入行政区域" v-model="regionId" @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="region_name" label="所属区域" />
        <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="120" />
        
      </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">
.flexitems {
  display: flex;
  align-items: center;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 28px;
}
.titleline{
  width: 5px;
  height: 16px;
  background: inherit;
  background-color: rgba(64, 158, 255, 1);
  margin-right: 5px;
}
.titlename{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #363636;
}
.textname{
  color: #363636;
}

.top-nav {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
</style>
