
<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 { queryRegionSchool } from "@/api/regionmodule/school";
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade";
import { querySchoolClassList } from "@/api/regionmodule/schoolClass";
import { querySchoolStudentPage  } from "@/api/regionmodule/schoolStudent";
import { studentQRCode,downloadQRCode,downloadSelectedQRCode,studentPersonQRCode} from "@/api/planscreening";
import { downloadFile } from '@/utils/index'
import Page from '@/components/Pagination/page.vue';
import { publicTree } from '@/utils/validate';
import Viewfile from "@/views/component/Viewfile.vue";
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const queryInfo :any = ref({
  schoolId:"",
  gradeId:"",
  classId:"",
  gender:"",
  name:"",
  current:1,
  size:10,
  total:0
})
const tableData = ref([])
const multipleSelection = ref([])
const dialogVisible = ref(false)
const genderoptions:any = ref([{label:'男',value:'1'},{label:'女',value:'2'}])
const loading = ref(false)
// 左侧树
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()
});
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 handleNodeClick = (data: Tree) => {
  if(data.org_type == null){
    nextTick(() => {
      treeRef.value?.setCurrentKey(schoolId.value);
    });
  }else{
    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()
    getData()
  }

};
//表格分页
function getData(){
  let params = {
    name:queryInfo.value.name,
    schoolId:schoolId.value,
    gradeId:queryInfo.value.gradeId,
    classId:queryInfo.value.classId,
    gender:queryInfo.value.gender,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loading.value = true
  querySchoolStudentPage(params).then((res:any) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
}
//打印
function printQRcode(){
  title.value="打印预览"
  onprint.value="no"
  filetype.value="pdf"
  let params = {
    orgType: orgType.value,
    parentId:parentId.value,
    studentName:queryInfo.value.name,
    gender:queryInfo.value.gender
  }
  ViewfileUrl.value = url + '/vision_examine/examine-plan/downloadQRCode?orgType=' + params.orgType +
  "&parentId=" + params.parentId + "&studentName=" + params.studentName + "&gender=" + params.gender
  isViewfile.value = true
}
function printSelectedQRcode(){
  title.value="打印预览"
  onprint.value="no"
  filetype.value="pdf"
  let ids = [] as any[];
    multipleSelection.value.forEach((item: any) => {
      ids.push(item.id)
    })
  ViewfileUrl.value = url + '/vision_examine/examine-plan/downloadSelectedQRCode?parentId=' + parentId.value +
  "&ids=" + ids
  isViewfile.value = true

}

const orgType:any = ref("")
const parentId:any = ref("")
const studentName:any = ref("")
//导出
function exportclick(type:any){
  let params = {
    orgType: orgType.value,
    parentId:parentId.value,
    studentName:queryInfo.value.studentName,
    gender:queryInfo.value.gender
  }
  loading.value = true
  downloadQRCode(params).then((response) => {
    loading.value = false
    downloadFile(response, parentId.value , 'pdf')
  }).catch(()=>{
    loading.value = false
  })
}
//导出
function exportSelectedClick(){
  let ids = [] as any[];
    multipleSelection.value.forEach((item: any) => {
      ids.push(item.id)
    })
  let params = {
    ids: ids.join(","),
    parentId:parentId.value,
  }
  loading.value = true
  downloadSelectedQRCode(params).then((response) => {
    loading.value = false
    downloadFile(response, parentId.value , 'pdf')
  }).catch(()=>{
    loading.value = false
  })
}




function handleSelectionChange(val:any){
  multipleSelection.value = val
}
function resetdata(){
  queryInfo.value = {
    gradeId:"",
    classId:"",
    gender:"",
    name:"",
    current:1,
    size:10,
    total:0
  }
  getData()
}
const regionName = ref("")
const tempData:any = ref([])
//获取行政区域
function getTree() {
  const params = {
    status:'01'
  };
  treeloading.value = true
  queryRegionSchool(params).then((res: any) => {
    for(let i=0;i<res.data.length;i++){
      if(res.data[i].org_type == "5"){
        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 getClass(id:any){
  if(id == null){
    queryInfo.value.gradeId = ''
  } 
  let params = {
    gradeId: id
  }
  if(id != "" && id != null){
    orgType.value = "6"
    parentId.value = id
  }else{
    orgType.value = "5"
    parentId.value = schoolId.value
  }
  classData.value = []
  queryInfo.value.classId = ""
  if(id != null && id != '' ){
    querySchoolClassList(params).then((res) => {
      classData.value = res.data;
    }).catch(()=>{
    });
  }

  getData()
}

function getQueryClass(id:any){
  if(id != "" && id != null){
    orgType.value = "7"
    parentId.value = id
  }else {
    orgType.value = "6"
    parentId.value = queryInfo.value.gradeId
  }
  getData()
}
function searchInit(){
  treeData.value = publicTree(tempData.value,regionName.value)
}
const isViewfile = ref(false)
function CloseView(){
  isViewfile.value = false
}
//查看
function lookinfo(row:any){
  title.value="打印预览"
  onprint.value=""
  filetype.value="docx"
  ViewfileUrl.value =  url + '/vision_examine/examine-plan/studentPersonQRCode?id=' + row.id
  isViewfile.value = true
}
function exportStudentPerson(row:any){
  let params = {
    id: row.id,
  }
  loading.value = true
  studentPersonQRCode(params).then((response:any) => {
    loading.value = false
    downloadFile(response, row.name + '个人筛查告知书' , 'docx')
  }).catch(()=>{
    loading.value = false
  })
}

const ViewfileUrl = ref("")
const title= ref("")
const onprint= ref("no")

const filetype = ref("pdf")
</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-input v-model="regionName" placeholder="请输入关键字" @input="searchInit" />
        </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 - 260px); overflow: auto;margin-top: 10px;">
        </el-tree>
        </div>
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
      <div class="silderRight">
        <div class="searchinfo">
          <div>
            <el-input v-model="queryInfo.name" placeholder="请输入学生姓名/学籍号/身份证号" style="width: 240px;" clearable />
            <el-select v-model="queryInfo.gradeId" @change="getClass"  class="ml-3" placeholder="请选择年级"  clearable size="large" style="width: 150px;" :disabled="schoolId==''|| schoolId==null">
              <el-option v-for="item in gradeinData" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <el-select v-model="queryInfo.classId" @change="getQueryClass" class="ml-3" placeholder="请选择班级" clearable size="large" style="width: 150px;" :disabled="queryInfo.gradeId==''|| queryInfo.gradeId==null">
              <el-option v-for="item in classData" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <el-select v-model="queryInfo.gender" @change="getData" size="large"  clearable style="width: 140px;margin-right: 10px;" class="ml-3" placeholder="请选择性别">
              <el-option v-for="item in genderoptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-button type="primary" @click="getData">搜索</el-button>
            <el-button @click="resetdata">重置</el-button>
          </div>
          <div>
            <el-button type="primary" @click="printQRcode" :disabled="schoolId == ''">
              <img src="@/assets/visionscreening/printallQR.png" style="padding-right: 5px;" alt="">打印全部
            </el-button>
            <el-button type="primary" @click="exportclick" :disabled="schoolId == ''" >
              <img src="@/assets/visionscreening/exports.png" style="padding-right: 5px;" alt="">导出全部
            </el-button>
            <el-button type="primary" :disabled="multipleSelection.length <= 0"  @click="printSelectedQRcode">
              <img src="@/assets/visionscreening/printallQR.png" style="padding-right: 5px;" alt="">打印
            </el-button>
            <el-button type="primary" :disabled="multipleSelection.length <= 0" @click="exportSelectedClick">
              <img src="@/assets/visionscreening/exports.png" style="padding-right: 5px;" alt="">导出
            </el-button>
          </div>
        </div>
        <div v-loading="loading">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%; height:calc(100vh - 295px)" @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="140" />
          <el-table-column prop="name" label="学生姓名" width="100" />
          <el-table-column prop="gender" label="性别" width="80" align="center">
          <template #default="scope">
              <span v-if="scope.row.gender == '1'">男</span>
              <span v-else-if="scope.row.gender == '2'">女</span>
              <span v-else>不详</span>
          </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80" />
          <el-table-column prop="birth_date" label="出生日期" width="110" align="center"/>
          <el-table-column prop="nation" label="民族"  width="80" align="center"/>
          <el-table-column prop="study_code" label="学籍号" width="190" align="center"/>
          <el-table-column prop="id_code" label="身份证" width="180" align="center"/>
          <el-table-column prop="grade_name" label="所属年级" min-width="140"/>
          <el-table-column prop="class_name" label="所属班级" min-width="140"/>
          <!-- <el-table-column prop="address" label="操作" width="60" fixed="right" align="center">
            <template #default="scope">
              <div style="display: -webkit-flex;display: flex; justify-content: space-around;-webkit-justify-content: space-around; ">
                <el-button type="primary" size="small" @click="exportStudentPerson(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" />
      </div>
      </div>
    <Viewfile v-if="isViewfile" :url="ViewfileUrl" :showTime="true" :title="title" :onprint="onprint" :type="filetype" :clientHeight="600" @update="CloseView"/>
    </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;
      // :deep(){
      //   .el-input{
      //       height:40px;
      //       line-height: 40px;
      //       width: 240px;
      //   }
      //   .el-button{
      //     height:40px; 
      //   }
    // }
    }
  }
  #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 - 145px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 20px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
}
.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;
  }
}
// :deep(){
//    .el-button{
//     margin-left: 10px;
//   }
//   .el-tree-node__content{
//     height: 40px;
//     padding-left: 12px !important;
//     color: #505050;
//    }
//    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
//     color: #409eff;
//    }
//    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content:hover{
//     color: #409eff;
//     background-color: #ecf5ff;
//    }
//   .el-tree-node__content:hover{
//     color: #409eff;
//     background-color: transparent;
//     // #ecf5ff
//   }
//   .el-tree-node__expand-icon{
//     color: #333333;
//   }
// }
.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;
}
</style>
