
<script lang="ts">
export default {
  name: 'user-visionInstitution' // 用户关联机构
};
</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 { queryVisionInstitutionPage } from "@/api/regionmodule/visionInstitution";

import { publicTree } from '@/utils/validate';
import Page from '@/components/Pagination/page.vue'
import { useUserStore } from '@/store/modules/user';
const emit = defineEmits([ 'returnClick']);
const userStore = useUserStore();
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
//搜索内容
const querystr = ref("");
// 左侧树
const treedata: any = ref([]);
const defaultProps = { label: "name" };
const handleNodeClick = (data: Tree) => {
  checkedtreeid.value = data.id;
  regionName.value = data.name;
  regionType.value = data.type;
  getData();
};
const treeRef = ref();
// 表格数组类型定义
const tableData = ref([]);
const checkedtreeid = ref("");


const loading = ref(false);
const treeloading = ref(false);
const tempData:any = ref("")
const regionName =ref(""); //行政区域名称
const searchName =ref(""); //行政区域名称
function searchInit(){
  treedata.value = publicTree(tempData.value,searchName.value)
}
//获取行政区域
function getTree() {
  const params = {
    // name: searchName.value,
    status:'01'
  };
  treeloading.value = true
  queryRegion(params).then((res: any) => {
    tempData.value =  JSON.parse(JSON.stringify(res.data)) 
    treedata.value = publicTree(res.data,"")
    treeloading.value = false
    checkedtreeid.value = ""
    if (checkedtreeid.value == "" &&treedata.value.length != 0) {
      checkedtreeid.value = res.data[0].id;
      regionType.value= res.data[0].type
      regionName.value = res.data[0].name;
    }
    nextTick(() => {
      treeRef.value?.setCurrentKey(checkedtreeid.value);
    });
    getData();
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const regionType = ref("")
//获取表格类型
function getData() {
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: querystr.value,
    regionId: checkedtreeid.value,
    regionType:regionType.value,
    size:9999
  };
  loading.value = true
  queryVisionInstitutionPage(params).then((res) => {
    tableData.value =  publicTree(res.data.records,"")
    queryInfo.value.total = res.data.total
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });
}

onMounted(() => {
  getTree();

});



function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
function Submit(row){
  emit('returnClick', row);
  
}
</script>

<template>
  <div class="faulttemplate-box">
    <aside id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">行政区域</div>
      </div>
      <div style="padding:0 10px ;">
        <el-input v-model="searchName" placeholder="请输入行政区域" clearable style="width: 100%;margin-bottom: 10px;" 
          @input="searchInit" />
        <el-tree v-loading="treeloading" default-expand-all 
          ref="treeRef" node-key="id" :data="treedata" :highlight-current="true" :props="defaultProps"
          :expand-on-click-node="false"
          @node-click="handleNodeClick" style="height: calc(100vh - 245px); overflow: auto">
        </el-tree>
      </div>
    </aside>
    <main class="silderRight">
      <el-row style="margin-bottom: 10px">
        <el-col :span="24" class="top-nav">
          <div style="display: flex;">
            <el-input v-model="querystr" placeholder="请输入机构名称" clearable style="width: 200px;"
              @keyup.enter="getData" />
            
            <el-button type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData" style="width: 100%;height:calc(100vh - 210px); margin-bottom: 20px" row-key="id" border
        default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" 
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="index" label="序号" align="center" width="70" />
        <el-table-column prop="code" label="机构代码" min-width="140"></el-table-column>
        <el-table-column prop="name" label="机构名称" min-width="120"></el-table-column>
        <el-table-column prop="education_code" label="教育机构编码" width="120"></el-table-column>
       
        <el-table-column prop="qrcode" label="集团类型" width="120" align="center">
          <template #default="scope">
            <div class="zhaunchu" v-if="scope.row.type == '01'">独立机构</div>
           <div class="zhaunchu" v-if="scope.row.type == '02'">集团机构</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <div style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around;align-items: center; ">
              <el-button type="primary" size="small" @click="Submit(scope.row)">确定</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="getData" /> -->
    </main>
  </div>
</template>
<style scoped  lang="scss">
.faulttemplate-box {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  background-color: #f2f4f9;
}

#silderLeft {
  width: 255px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  position: relative;
}


.silderRight {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 15px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
}


.custom-tree-node {
  flex: 1;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between; 
  padding-right: 8px;

}

.faulttemplate-box {
  .is-current .treeediticon {
    color: #ffffff !important;
  }

  .is-current .treedelicon {
    color: #ffffff !important;
  }

  .el-tree-node__content:hover .treeediticon {
    color: #00cccc;
  }

  .el-tree-node__content:hover .treedelicon {
    color: #f56c6c;
  }
}

.treeediticon,
.treedelicon {
  color: #fff;
  margin: 0 5px;
}
:deep(.el-table__cell){
  color: #383838;
}
.top-nav {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.right-nav{
  display: -webkit-flex;
  display: flex;
}
.lefttitle {
  min-width: 130px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #1B1B1B;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  margin-bottom: 10px;
  .line{
    border-width: 0px;
    width: 5px;
    height: 14px;
    margin-right: 7px;
    background: inherit;
    background-color: rgba(64, 158, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
</style>
