
<script lang="ts">
export default {
  name: 'personalreports' // 个人报告
};
</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 Viewfile from "@/views/component/Viewfile.vue";
import Generalreport from "@/views/component/Generalreport.vue";
import { queryExamineSchoolTree,queryExamineResultPage,queryCompletionRate,exportVisionForm,exportMultipleVisionForm } from "@/api/planscreening";
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade";
import { querySchoolClassList } from "@/api/regionmodule/schoolClass";
import { publicTree } from '@/utils/validate';
import { downloadFile } from '@/utils/index'
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const iframeurl = userStore.webApiBaseHttp;
const reporLoading = ref(false)
const props:any = defineProps({
  planInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const searchval = ref('')
const tableData = ref([])
const multipleSelection = ref([])
const genderoptions:any = ref([{label:'男',value:0},{label:'女',value:1}])
const loading = ref(false)
const dialogVisible = ref(false)
// 左侧树
const treeloading = ref(false)
const defaultProps = { label: "name" }
const planreportlist:any = ref({})
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
const reportiframe = ref<HTMLIFrameElement | null>(null);
const iframeWindow = ref<Window | null>(null);
const isViewfile = ref(false)
//校级报告
const isGeneralreport = ref(false)
const reportsrc:any = ref({})
onMounted(() => {
  getTree()
  init()
  window.addEventListener('message', (event) => {
    // console.log('Method in parent has been called');
    if (event.data.action === 'parentMethodCalled') {
    // 父页面的方法被iframe调用后的回调
    // console.log('Method in parent has been called');
  }
  });
});
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;
      };
    };
  }
}
//查看
function lookinfo(row:any){
  ViewfileUrl.value =  url + '/vision_examine/examine-result/exportVisionForm?id=' + row.id
  isViewfile.value = true
}

// 文件下载
function fileDown(row:any) {
  const params = {
    id: row.id
  }
  exportVisionForm(params).then((response: any) => {
    downloadFile(response, row.student_name + '筛查结果记录表', 'docx')
  }).catch(() => {
  });
}


function exportinfo(){
  let params:any = {
  };
  if(multipleSelection.value.length>0){
    let id = [] as any[];
    let name = [] as any[];
    multipleSelection.value.forEach((item: any) => {
      id.push(item.id)
      name.push(item.id)
    })

    params = {
      type:"0",
      planId:props.planInfo.id,
      id: id.join(','),
    };
  }else if(queryInfo.value.classId != '' && queryInfo.value.classId != null){
    params = {
      type:'1',
      planId:props.planInfo.id,
      id:queryInfo.value.classId
    }
  }else if(queryInfo.value.gradeId != '' && queryInfo.value.gradeId != null){
    params = {
      type:'2',
      planId:props.planInfo.id,
      id:queryInfo.value.gradeId
    }
  }
  else if(schoolId.value != '' && schoolId.value != null){
    params = {
      type:'3',
      planId:props.planInfo.id,
      id:schoolId.value
    }
  }
  reporLoading.value = true
  exportMultipleVisionForm(params).then((response: any) => {
    downloadFile(response,  '筛查结果记录表', 'docx')
    reporLoading.value = false
  }).catch(() => {
    reporLoading.value = false
  });
}
function CloseView(){
  isViewfile.value = false
}
function CloseViews(){
  isGeneralreport.value = false
}
function handleSelectionChange(val:any){
  multipleSelection.value = val
}
function resetdata(){
  queryInfo.value = {
    current:1,
    size:10,
    total:0
  }
  init()
}
const schoolId = ref("")
const treeLoading = ref(false)
const treeData:any = ref([])
function getTree(){
  let params = {
    planId: props.planInfo.id,
    orgId: props.planInfo.org_id,
    orgType: props.planInfo.org_type,
  };
  treeLoading.value = true
  queryExamineSchoolTree(params).then((res) => {
    treeData.value = publicTree(res.data,"")
    treeLoading.value = false
  }).catch(()=>{
    treeLoading.value = false
  });
}
// 初始化
function init(){
  let params:any = {
    studentName:queryInfo.value.studentName,
    planId: props.planInfo.id,
    gradeId: queryInfo.value.gradeId,
    classId: queryInfo.value.classId,
    examType: props.planInfo.exam_type,
    gender: queryInfo.value.gender,
    studyCode: queryInfo.value.studyCode,
    idCode: queryInfo.value.idCode,
    examStatus:'01',
    current:queryInfo.value.current,
    size:queryInfo.value.size
  };
  if(nodeData.value.org_type =='5'){
    params.schoolId =  nodeData.value.id
    params.regionId =  ""
  }else{
    params.regionId =  nodeData.value.id 
    params.schoolId =  ""
  }
  loading.value = true
  queryExamineResultPage(params).then((res) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });
}
const ViewfileUrl = ref("")
const nodeData:any = ref({})
const handleNodeClick = (data: Tree) => {
  nodeData.value = data
  queryInfo.value.classId = ""
  gradeinData.value = []
  classData.value = []
  queryInfo.value.gradeId = ""
  schoolId.value = ""
  if(nodeData.value.org_type =='5'){
    schoolId.value = nodeData.value.id
    getGrade()
  }
  queryInfo.value.current = 1
  queryInfo.value.size = 10
  init()
};
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){
  let params = {
    gradeId: id
  }
  classData.value = []
  queryInfo.value.classId = ""
  if(id != null && id != '' ){
    querySchoolClassList(params).then((res) => {
      classData.value = res.data;
    }).catch(()=>{
    });
  }
  init()
}
const gradeinData:any = ref([])
const classData:any = ref([])
function viewreport(data:any){
  console.log(data)
  planreportlist.value = data
  dialogVisible.value = true
    const params = {
    planId:props.planInfo.id,
    schoolId:'',
    shcoolName:''
  }
  const paramss = {
    planId:props.planInfo.id,
    regionCode:data.code
  }
  let publicparams = {}
  if(planreportlist.value.org_type === '5'){
    params.schoolId = planreportlist.value.id
    params.shcoolName = planreportlist.value.name
    reportsrc.value = iframeurl + '/#/Generalreport/?planId=' + props.planInfo.id + 
    '&schoolId='+ data.id + '&shcoolName=' +  data.name
    publicparams = params
  } else {
    reportsrc.value = iframeurl + '/#/Generalreports?planId='+ props.planInfo.id + 
    '&regionCode='+ data.code
    publicparams = paramss
  }
  
  setTimeout(()=>{
    // 调用子frame导出方法
  if (reportiframe.value) {
    iframeWindow.value = reportiframe.value.contentWindow;
  }
  if (iframeWindow.value) {
    iframeWindow.value.postMessage(publicparams, '*');
  }
  },2500)
}
function handleClose(){
  dialogVisible.value = false
}

function exportclick(){
  // 调用子frame导出方法
  if (reportiframe.value) {
    iframeWindow.value = reportiframe.value.contentWindow;
  }
  if (iframeWindow.value) {
    iframeWindow.value.postMessage({
      action: 'exportpdf',
      payload: '',
    }, '*');
  }
}
</script>

<template>
    <div class="contents-box" v-loading="reporLoading" element-loading-text="正在下载报告，文件较大，请耐心等待...">
        <aside id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">数据列表</div>
      </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 - 350px); overflow: auto">
          <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <img v-if="data.id !== nodeData.id" src="@/assets/visionscreening/lookdetails.png" style="width: 14px;height:14px;" alt="" @click.stop="viewreport(data)">
            <img v-else-if="data.id === nodeData.id" src="@/assets/visionscreening/lookdetailss.png" style="width: 14px;height:14px;" alt="" @click.stop="viewreport(data)">
          </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="searchinfo">
          <div class="flex items-center">
            <el-input v-model="queryInfo.studentName" placeholder="请输入学生姓名" style="width: 150px;" clearable />
            <el-select v-model="queryInfo.gradeId" @change="getClass"  class="ml-3" placeholder="请选择年级"  clearable 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="init" class="ml-3" placeholder="请选择班级" clearable 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="init" style="width: 130px;" class="ml-3" placeholder="请选择性别">
              <el-option v-for="item in genderoptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-input v-model="queryInfo.studyCode" class="ml-3" placeholder="请输入学籍号" style="width: 150px;" clearable />
            <el-input v-model="queryInfo.idCode" class="ml-3" placeholder="请输入身份证号" style="width: 150px;margin-right: 10px;" clearable />
            <el-button type="primary" @click="init">搜索</el-button>
            <el-button @click="resetdata">重置</el-button>
          </div>
          <div>
            <el-button :disabled="schoolId==''&& multipleSelection.length == 0" type="primary" @click="exportinfo"><img src="@/assets/visionscreening/exports.png" alt="" style="margin-right: 4px;" >导出</el-button>
          </div>
        </div>
        <div v-loading="loading">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%; height:calc(100vh - 425px)" @selection-change="handleSelectionChange" :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}">
            <el-table-column fixed type="selection" width="55" />
            <el-table-column fixed type="index" width="55" label="序号" align="center" />
            <el-table-column fixed prop="student_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-if="scope.row.gender == '2'">女</span>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="80" />
            <el-table-column prop="birth_date" label="出生日期" width="120" 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="90" />
            <el-table-column prop="class_name" label="所属班级" min-width="90" />
            <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; ">
                  <img src="@/assets/visionscreening/lookdetails.png" alt="" title="" @click="lookinfo(scope.row)" style="cursor: pointer;">
                </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="init" />
      </div>
      </div>
      <Viewfile v-if="isViewfile" :url="ViewfileUrl" :showTime="true" :title="'筛查结果报告'" :type="'docx'" :clientHeight="600" @update="CloseView"/>
    </div>
    <el-dialog
        width="41%"
        class="viewItemFileDialog"
        title="普查分析报告"
        v-model='dialogVisible'
        :before-close="handleClose"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        draggable>
    <iframe v-if="dialogVisible" id="reportid" ref="reportiframe" :src="reportsrc"  frameborder="0" name="text" height="700px" width="100%"></iframe>
    <button style="cursor: pointer;position: absolute;top: 22px;right: 50px;">
      <img src="@/assets/tableicon/u884.png" title="导出pdf" @click="exportclick">
    </button>
    </el-dialog>
</template>
<style scoped lang="scss">
  .contents-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{
        //     width: 240px;
        // }
    }
    }
  }
  #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 - 285px);
  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-select--large .el-select__wrapper{
    min-height: 0px;
  }
}
// :deep(){
//    .el-input{
//     height: 40px;
//     line-height: 40px;
//    }
//    .el-button{
//     height:40px; 
//     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;
  align-items: center;
  margin-bottom: 20px;
  justify-content:space-between;
}
.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;
}
.statistics-text{
    color:#949494;
    margin-right:35px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
:deep(){
  .custom-tree-node, .treedelicon, .treeediticon{
    font-size: 14px !important;
  }
}
</style>
