
<script lang="ts">
export default {
  name: 'printcode' // 数据管理
};
</script>
<script setup lang="ts">
import { onMounted, ref, nextTick ,watch} from "vue";
import { ElMessage, ElMessageBox, FormRules,ElTable,ElTree} from "element-plus";
import { queryRegionPlan,queryExaminePlanById } from "@/api/planscreening";
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade";
import Page from '@/components/Pagination/page.vue';
import Importdata  from  './importdata.vue';
import Exportdata  from  './exportdata.vue';
import Reinspection  from  './reinspection.vue';
import { publicTree } from '@/utils/validate';
const queryInfo :any = ref({
  schoolId:"",
  gradeId:"",
  classId:"",
  gender:"",
  name:"",
  current:1,
  size:10,
  total:0
})
const menuname:any = ref(1)
const currentinfo:any = ref({})
// 左侧树
const treeData: any = ref([]);
const treeloading = ref(false)
const defaultProps = { label: "name" }
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
const treeRef = ref<InstanceType<typeof ElTree>>()
const vMove = {
  mounted(el: any) {
    el.onmousedown = function (e: any) {
      var init = e.clientX;
      var parent: any = document.getElementById("silderLeft");
      const initWidth: any = parent.offsetWidth;
      document.onmousemove = function (e) {
        var end = e.clientX;
        var newWidth = end - init + initWidth;
        parent.style.width = newWidth + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
}
onMounted(() => {
  getTree()
});
function planYearChange(e:any){
  getTree()
}
const schoolId = ref("")
function checkId(tree:any){
  for(let i=0; i<tree.length;i++){
    if(tree[i].region_id==null && tree[i].children){
      checkId(tree[i].children)
    }else{
      if(tree[i].region_id!=null){
        schoolId.value =  tree[i].id
        return 
      }
    } 
  }
}
const planId =ref("")
const handleNodeClick = (data: Tree) => {
  // if(data.org_type == null){
  //   nextTick(() => {
  //     treeRef.value?.setCurrentKey(schoolId.value);
  //   });
  // }else{
    planId.value = data.id
    schoolId.value = data.id
    orgType.value = "5"
    parentId.value = data.id
    treeRef.value?.setCurrentKey(data.id);
    queryInfo.value = {
      gradeId:"",
      classId:"",
      gender:"",
      name:"",
      current:1,
      size:10,
      total:0
    }
    gradeinData.value = []
    classData.value = []
    getGrade()
    getPlanById()
    // getData()
  // }
};
function getPlanById(){
  let params ={
    id: planId.value
  }
  queryExaminePlanById(params).then((res:any) => {
    if(res.data !=null){
      let tempData = []
      if(res.data.exam_items != null &&res.data.exam_items != ""){
        let exam_items = JSON.parse(res.data.exam_items)
        for(let i=0;i<exam_items.length;i++ )
        tempData.push(exam_items[i].name)
      }
      res.data.examItems = tempData.join("、")
      currentinfo.value = res.data;
    }else{
      currentinfo.value = {};
    }
   
  });
}

const orgType:any = ref("")
const parentId:any = ref("")






const regionName = ref("")
const tempData:any = ref([])
//获取行政区域
function getTree() {
  const params = {
    status:'01',
    planYear:planYear.value
  };
  treeloading.value = true
  queryRegionPlan(params).then((res: any) => {
    // for(let i=0;i<res.data.length;i++){
    //   if(res.data[i].org_type == ""){
    //     schoolId.value = res.data[i].id
    //     break
    //   }
    // }
    tempData.value =  JSON.parse(JSON.stringify(res.data)) 
    treeData.value = publicTree(res.data,"")
    gradeinData.value = []
    classData.value = []
    // checkId(res.data)
    treeloading.value = false
    if(schoolId.value != ""){
      nextTick(() => {
        // treeRef.value?.setCurrentKey(schoolId.value);
          // getGrade()
          // getData();
      });
    }
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const gradeinData:any = ref([])
const classData:any = ref([])

function getGrade(){
  let params = {
    schoolId: schoolId.value
  }
  classData.value = []
  queryInfo.value.classId = ""
  querySchoolGradeList(params).then((res) => {
    gradeinData.value = res.data;
  }).catch(()=>{
  });
}
function searchInit(){
  treeData.value = publicTree(tempData.value,regionName.value)
}
function menuswith(type:any){
  menuname.value = type
  if(type == 3){
    getPlanById()
  }


}
const planYearData:any  =ref([{name:'2023-1'},{name:'2023-2'},{name:'2024-1'},{name:'2024-2'},{name:'2025-1'},{name:'2025-2'}])
const planYear:any = ref("")
</script>

<template>
    <div class="printcode-box">
        <aside id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">数据列表</div>
      </div>
      <div style="width:100%;padding: 5px 15px;">
        <el-select v-model="planYear" placeholder="请选择计划年度" @change="planYearChange">
          <el-option v-for="item in planYearData" :key="item.name" :label="item.name" :value="item.name"/>
        </el-select>
        </div>
        <div>
          <el-tree v-loading="treeloading" ref="treeRef" node-key="id" :data="treeData" default-expand-all 
          :highlight-current="true" :props="defaultProps" :expand-on-click-node="false"
          @node-click="handleNodeClick" style="height: calc(100vh - 237px); overflow: auto;margin-top: 10px;">
          <template #default="{ node, data }">
              <span>
              <span v-if="data.type== null" class="plancolor"> {{ data.name }}</span>
              <span v-else > {{ data.name }}</span>
              <span v-if="data.count !=0 &&data.count !=null" style="color:#409eff ;">({{data.count}})</span> 
              </span>
            </template>
        </el-tree>
        </div>
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
      <div class="silderRight">
        <div class="right-box-top">
            <div class="box-top1">
              <div class="box-top1-title">{{ currentinfo.plan_name }}</div>
            </div>
            <div class="box-top2">
              <div style="width:160px;" class="box-top2-text">年度:<span class="box-top2-texts">{{ currentinfo.plan_year }}</span></div>
              <div style="min-width:220px;" class="box-top2-text">组织机构:<span class="box-top2-texts">{{ currentinfo.org_name }}</span></div>
              <div style="min-width:280px;" class="box-top2-text">筛选项目:<span class="box-top2-texts">{{ currentinfo.examItems }}</span></div>
              <div style="width:220px;" class="box-top2-text">开始时间:<span class="box-top2-texts">{{currentinfo.plan_start_date}}</span></div>
              <div style="width:150px;" class="box-top2-text">结束时间:<span class="box-top2-texts">{{ currentinfo.plan_end_date }}</span></div>
            </div>
            <div class="box-top3">
              <div :class="[menuname == 1?'menucheckstyle':'']" class="box-top3-info" @click="menuswith(1)">导入数据</div>
              <div :class="[menuname == 2?'menucheckstyle':'']" class="box-top3-info" @click="menuswith(2)">导出数据</div>
              <div :class="[menuname == 3?'menucheckstyle':'']" class="box-top3-info" @click="menuswith(3)">复查管理</div>
            </div>
        </div>
        <Importdata  v-if="menuname == 1" :planInfo="currentinfo" />
        <Exportdata  v-if="menuname == 2" :planInfo="currentinfo" />
        <Reinspection  v-if="menuname == 3" :planInfo="currentinfo" />
      </div>
    </div>
</template>
<style scoped  lang="scss">
  .printcode-box{
    // margin-top: 15px;
    height: 100%;
    display: -webkit-flex;
    display: flex;
    .box-search{
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
  #silderLeft {
  width: 242px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  position: relative;
  &:hover {
    .moveBtn {
      opacity: 1;
    }
  }
}
/* 拖动条 */
.moveBtn {
  height: 100%;
  width: 15px;
  padding: 0 6px;
  opacity: 0;
  position: absolute;
  right: -15px;
  top: 0;
}

.moveBtn-line {
  width: 100%;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background-color: #60bfff;
}
.silderRight {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  // background-color: rgba(255, 255, 255, 1);
  // border-radius: 3px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
  .right-box-top{
    width: 100%;
    height: 140px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    background-color: #fff;
    padding: 15px 20px;
    position: relative;
    .box-top1{
        display: flex;
        justify-content: space-between;
        .box-top1-title{
          font-weight: 700;
          font-style: normal;
          color: #363636;
          font-size:24px;
          height: 36px;
        }
        :deep(){
         .el-button{
            width: 54px;
            height: 26px;
            padding: 0px;
         }
         .el-button:focus, .el-button:hover{
            background-color: #ecf5ff;
            color:#409eff;
         }
        }
    }
    .box-top2{
        display: flex;
        margin-top: 11px;
      .box-top2-text{
        font-size: 14px;
        color:#949494;
        margin-right: 20px;
      }
      .box-top2-texts{
        font-size: 14px;
        color:#363636;
        padding-left: 11px;
      }
    }
    .box-top3{
        display: flex;
        position: absolute;
    bottom: 0px;
        // margin-top: 16px;
        .box-top3-info{
        //   height: 50px;
          font-size: 14px;
          margin-right: 40px;
          padding-bottom: 12px;
        //   border-bottom: 3px solid #409eff;
          color: #505050;
          cursor: pointer;
        }
        .box-top3-info:hover{
            color: #409eff;
        }
        .menucheckstyle{
          border-bottom: 3px solid #409eff; 
          color: #409eff !important ;
        }
    }
    }
}
.lefttitle {
  min-width: 130px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  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;
  }
}
.searchinfo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.my-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .icontext{
    font-size: 12px;
    color: #787878;
    width: 25px;
    text-align: center;
    cursor: pointer;
    img{
        padding-left: 4px;
    }
  }
  
}
.QRbox{
    height: calc(100vh - 200px);
    text-align: center;
}
.plancolor{
  color: #409eff ;
}
:deep(.el-tree-node.is-current > .el-tree-node__content){
  .plancolor{
    color: #fff ;
  }

}
</style>
