
<script lang="ts">
export default {
  name: 'checkprogresss' // 抽检-检查进度
};
</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 { queryExamineSchoolTree,queryExamineResultPage,queryCompletionRate,queryRulesSchoolList
,exportNotInspectedQRCode } from "@/api/planscreening";
import { exportStudentSwan,uploadDataToBureau } from "@/api/planscreening";
import { downloadFile } from '@/utils/index'
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade";
import { querySchoolClassList } from "@/api/regionmodule/schoolClass";
import { getMap } from "echarts";
import { publicTree } from '@/utils/validate';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const isItutionIds  = ref(false)

const props:any = defineProps({
  planInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0,
  name:"",

})
const examStatusData = ref([{label:'未检',value:'00'},{label:'已检',value:'01'},{label:'漏检',value:'02'}])
const isSightedData = ref([{label:'否',value:'0'},{label:'是',value:'1'}])
const tableData = ref([])
const multipleSelection = ref([])
const genderoptions:any = ref([{label:'男',value:'1'},{label:'女',value:'2'}])
const loading = ref(false)
// 左侧树
const treeloading = ref(false)
const defaultProps = { label: "name" }
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
const isViewfile = ref(false)
onMounted(() => {
  getTree()
  init()
  if(window.webConfig !=null && window.webConfig.ItutionIds !=null){
    isItutionIds.value = window.webConfig.ItutionIds.includes(props.planInfo.institution_id)
  }
})
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 searchclick(){
  init()
}
//查看
function lookinfo(row:any){
  ViewfileUrl.value =  url + '/vision_examine/examine-result/exportVisionForm?id=' + row.id
  isViewfile.value = true
}
function CloseView(){
  isViewfile.value = false
}
function handleSelectionChange(val:any){
  multipleSelection.value = val
}
function resetdata(){
  queryInfo.value = {
    current:1,
    size:10,
    total:0,
    studentName:"",
  }
  init()
}

const treeLoading = ref(false)
const treeData:any = ref([])
function getTree(){
  if(props.planInfo.exam_type == '01'){
    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
    });
  }else{
    //获取表格类型
    let params = {
      planId:props.planInfo.id
    }
    treeLoading.value = true
    queryRulesSchoolList(params).then((res) => {
      treeData.value = res.data;
      treeLoading.value = false
    }).catch(()=>{
      treeLoading.value = false
    });
  }
  
}
// 初始化
function init(){
  let params:any = {
    studentName:queryInfo.value.studentName,
    planId: props.planInfo.id,
    examType: props.planInfo.exam_type,
    gender: queryInfo.value.gender,
    regionId: queryInfo.value.regionId,
    schoolId: queryInfo.value.schoolId,
    gradeId: queryInfo.value.gradeId,
    classId: queryInfo.value.classId,
    idCode: queryInfo.value.idCode,
    studyCode: queryInfo.value.studyCode,
    examStatus: queryInfo.value.examStatus,
    isSighted: queryInfo.value.isSighted,
    startSphLeft: queryInfo.value.startSphLeft,
    endSphLeft: queryInfo.value.endSphLeft,
    startSphRight: queryInfo.value.startSphRight,
    endSphRight: queryInfo.value.endSphRight,
    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
  });
  getMap(params)
}
const ViewfileUrl = ref("")
const nodeData:any = ref({})
const schoolId = ref("")
const schoolName = ref("")
const orgType = ref("")
const handleNodeClick = (data: Tree) => {
  nodeData.value = data
  if(data.org_type == "5"){
    orgType.value = "5"
    schoolId.value = data.id
    schoolName.value = data.name
  }else{
    schoolId.value = ""
    schoolName.value = ""
  }

  gradeinData.value = []
  classData.value = []
  queryInfo.value.gradeId = ""
  queryInfo.value.classId = ""
  getGrade()
  init()
};
const resultInfo:any =ref({})

function getMap(params:any){
  queryCompletionRate(params).then((res) => {
    resultInfo.value = res.data;
  }).catch(()=>{
  });
}



const gradeinData:any = ref([])
const classData:any = ref([])

function getGrade(){
  let params:any = {}

  if(schoolId.value == ""){
    gradeinData.value = []
    return
  }else{
    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()
}
function dateFormat(row: any) { // 时间方法
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
function fileSwanDown(row:any) {
  const params = {
    id: row.id
  }
  exportStudentSwan(params).then((response: any) => {
    downloadFile(response, row.student_name + '生物报告600模版', 'docx')
  }).catch(() => {
  });
}

const exportText =ref("")

function uploadNetwork(){
  ElMessageBox.confirm('请先检查学生视力数据中的“身份证号，左右眼戴镜视力、”数据项是否完整，数据不完整将无法上传到教育局！您确定将“'+ schoolName.value +'”的学生视力筛查数据上传到教育局吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let params = {
      planid: props.planInfo.id,
      schoolid:schoolId.value
    }
    uploadDataToBureau(params).then((response:any) => {
      
    }).catch(()=>{

    })
  });
}
</script>

<template>
    <div class="contents-box">
      <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">
        </el-tree>
        </div>
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
      <div class="silderRight">
        <div class="searchinfo">
          <el-input v-model="queryInfo.studentName" placeholder="请输入学生姓名" style="width: 20%;" clearable />
          <el-select v-model="queryInfo.gradeId" @change="getClass"  class="ml-4" placeholder="请选择年级"  clearable size="large"  style="width: 20%" :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-4" placeholder="请选择班级" clearable size="large"  style="width: 20%" :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" class="ml-4" placeholder="请选择性别" size="large" style="width: 20%" clearable @change="init">
            <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-4" placeholder="请输入学籍号" style="width: 20%;" clearable />

          <el-input v-model="queryInfo.idCode" class="ml-4" placeholder="请输入身份证号" style="width: 20%;" clearable />
        </div>
        <div class="searchinfos">
          <div class="flex items-center" style="width: 90%;">
            <el-select v-model="queryInfo.examStatus" placeholder="请选择状态" style="width: 160px" clearable @change="init">
              <el-option v-for="item in examStatusData" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-select v-model="queryInfo.isSighted" class="ml-4" placeholder="是否近视" style="width: 160px" clearable @change="init">
              <el-option v-for="item in isSightedData" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-input v-model="queryInfo.startSphLeft" class="ml-4" placeholder="左眼球镜起始值" style="width: 140px" clearable />
            <div class="ml-1">-</div>
            <el-input v-model="queryInfo.endSphLeft" class="ml-4" placeholder="左眼球镜结束值" style="width: 140px" clearable />
            <el-input v-model="queryInfo.startSphRight" class="ml-4" placeholder="右眼球镜起始值" style="width: 140px" clearable />
            <div class="ml-1">-</div>
            <el-input v-model="queryInfo.endSphRight" class="ml-4" placeholder="右眼球镜结束值" style="width: 140px" clearable />
            <el-button type="primary" @click="searchclick" style="margin-left: 10px;">搜索</el-button>
            <el-button @click="resetdata">重置</el-button>
            <el-button v-if="isItutionIds == true" :disabled="schoolId ==''|| schoolId ==null" type="primary"  @click="uploadNetwork">上传教育局</el-button>
          </div>
        </div>
        <div class="text-[14px] flex mb-[10px]">
           <div class="statistics-text">共有学生<span class="text-[#409EFF] font-bold pl-[3px]">{{ resultInfo.total }}</span>人</div>
           <div class="statistics-text">已检<span class="text-[#009933] font-bold pl-[3px]">{{ resultInfo.checked }}</span>人</div>
           <div class="statistics-text">未检<span class="text-[#FF9900] font-bold pl-[3px]">{{ resultInfo.unchecked }}</span>人</div>
           <div class="statistics-text">漏检学生<span class="text-[#FF3300] font-bold pl-[3px]">{{ resultInfo.missing }}</span>人</div>
           <div v-if="isItutionIds == true" class="statistics-text">上传教育局人数<span class="text-[#009933] font-bold pl-[3px]">{{ resultInfo.uploadnum }}</span>人</div>

           <div class="statistics-text">完成率<span class="text-[#409EFF] font-bold pl-[3px]">{{ resultInfo.completionRate }}</span></div>
          
          </div>
        <div v-loading="loading" :element-loading-text="exportText">
        <el-table ref="multipleTableRef" :data="tableData" border style="width: 100%; height:calc(100vh - 515px)" @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="grade_name" label="所属年级" min-width="120" />
            <el-table-column prop="class_name" label="所属班级" min-width="120" />
            <el-table-column prop="exam_status" label="状态" align="center">
              <template #default="scope">
                <span v-if="scope.row.exam_status == '00'">未检</span>
                <span v-if="scope.row.exam_status == '01'">已检</span>
                <span v-if="scope.row.exam_status == '02'">漏检</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="exam_time" label="检查时间" width="120" align="center"/> -->
            <el-table-column prop="exam_time" label="检查时间" width="120" align="center">
            <template #default="scope">
              {{dateFormat(scope.row.exam_time)}}
            </template>
          </el-table-column>
          <el-table-column prop="vision_left" label="左眼视力" width="60" align="center">
            <template #default="scope">
              <span v-if="scope.row.vision_left !=0 && scope.row.vision_left!=null"> {{scope.row.vision_left.toFixed(1)}}</span>
            </template>
          </el-table-column>
            <el-table-column prop="vision_right" label="右眼视力" width="60" align="center">
              <template #default="scope">
              <span v-if="scope.row.vision_right !=0 && scope.row.vision_right!=null"> {{scope.row.vision_right.toFixed(1)}}</span>
              </template>
            </el-table-column>
           
            <el-table-column prop="sph_left" label="左眼球镜"  width="90" align="center">
              <template #default="scope">
                <span v-if="scope.row.sph_left !=0 && scope.row.sph_left!=null">
                  <span v-if="scope.row.sph_left>0">+{{scope.row.sph_left.toFixed(2)}}D</span>
                  <span v-else>{{scope.row.sph_left.toFixed(2)}}D</span> 
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="sph_right" label="右眼球镜"  width="90" align="center">
            <template #default="scope">
              <span v-if="scope.row.sph_right !=0 && scope.row.sph_right!=null">
                <span v-if="scope.row.sph_right>0">+{{scope.row.sph_right.toFixed(2)}}D</span>
                <span v-else>{{scope.row.sph_right.toFixed(2)}}D</span> 
              </span>
              </template>
            </el-table-column>
            <el-table-column prop="cytdnder_left" label="左眼柱镜"  width="90" align="center">
              <template #default="scope">
                <span v-if="scope.row.cytdnder_left !=0 && scope.row.cytdnder_left!=null">
                  <span v-if="scope.row.cytdnder_left>0">+{{scope.row.cytdnder_left.toFixed(2)}}D</span>
                <span v-else>{{scope.row.cytdnder_left.toFixed(2)}}D</span> 
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="cytdnder_right" label="右眼柱镜"  width="90" align="center">
              <template #default="scope">
                <span v-if="scope.row.cytdnder_right !=0 && scope.row.cytdnder_right!=null">
                  <span v-if="scope.row.cytdnder_right>0">+{{scope.row.cytdnder_right.toFixed(2)}}D</span>
                  <span v-else>{{scope.row.cytdnder_right.toFixed(2)}}D</span> 
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="axies_left" label="左眼轴位"  width="60" align="center"/>
            <el-table-column prop="axies_right" label="右眼轴位"  width="60" align="center"/>
            <el-table-column prop="se_left" label="左眼等效球镜"  width="120" align="center">
              <template #default="scope">
                <span v-if="scope.row.se_left !=0 && scope.row.se_left!=null">
                  <span v-if="scope.row.se_left>0">+{{scope.row.se_left.toFixed(2)}}D</span>
                  <span v-else>{{scope.row.se_left.toFixed(2)}}D</span> 
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="se_right" label="右眼等效球镜"  width="120" align="center">
              <template #default="scope">
                <span v-if="scope.row.se_right !=0 && scope.row.se_right!=null">
                  <span v-if="scope.row.se_right>0">+{{scope.row.se_right.toFixed(2)}}D</span>
                  <span v-else>{{scope.row.se_right.toFixed(2)}}D</span> 
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="rectify_vision_left" label="左眼矫正视力"  width="80" align="center">
              <template #default="scope">
              <span v-if="scope.row.rectify_vision_left !=0 && scope.row.rectify_vision_left!=null"> {{scope.row.rectify_vision_left.toFixed(1)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rectify_vision_right" label="右眼矫正视力"  width="80" align="center">
              <template #default="scope">
              <span v-if="scope.row.rectify_vision_right !=0 && scope.row.rectify_vision_right!=null"> {{scope.row.rectify_vision_right.toFixed(1)}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="id_code" label="身份证" width="180" align="center" />
            <el-table-column prop="is_sighted" label="是否近视"  width="60" align="center">
              <template #default="scope">
                <span v-if="scope.row.is_sighted == '0'">否</span>
                <span v-if="scope.row.is_sighted == '1'">是</span>
              </template>
            </el-table-column>
            <el-table-column prop="is_hyperopia" label="远视储备是否充足" width="90" align="center">
              <template #default="scope">
                <span v-if="scope.row.age >12">/</span>
                <span v-else-if="scope.row.is_hyperopia == '1'">否</span>
                <span v-else-if="scope.row.is_hyperopia == '0'">是</span>
              </template>
            </el-table-column>
            <el-table-column prop="is_glasses" label="是否戴镜" width="100" align="center">
              <template #default="scope">
                <span v-if="scope.row.is_glasses == '0'||scope.row.is_glasses == ''||scope.row.is_glasses == null">未知</span>
                <span v-if="scope.row.is_glasses == '4'">不带镜</span>
                <span v-if="scope.row.is_glasses == '3'">角膜塑形镜</span>
                <span v-if="scope.row.is_glasses == '2'">隐形眼镜</span>
                <span v-if="scope.row.is_glasses == '1'">框架眼镜</span>
              </template>
            </el-table-column>
            <el-table-column prop="upload_uuid" label="是否已传" width="100" align="center" v-if="isItutionIds == true">
              <template #default="scope">
                <span v-if="scope.row.upload_uuid !=null && scope.row.upload_uuid !=''">是</span>
                <span v-else>否</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="80" 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;">
                  <img v-if="scope.row.exam_result1 !='' && scope.row.exam_result1 !=null " src="@/assets/tableicon/u889.png" title="导出生物报告" @click="fileSwanDown(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>
</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-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-around;
}
.searchinfos{
  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;
}
</style>
