
<script lang="ts">
export default {
  name: 'studentVision'  // 学生档案
};
</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 { querySchoolList } from "@/api/regionmodule/school";
import Page from '@/components/Pagination/page.vue'
import { queryStudentVisdataPage } from "@/api/regionmodule/schoolStudent";
import StudentVisdata from '@/views/regionmodule/schoolClass/studentVisdata.vue'
import { publicTree } from '@/utils/validate';
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade";
import { querySchoolClassList } from "@/api/regionmodule/schoolClass";
import { exportStudentResult,exportSchoolHealthNetwork } from "@/api/planscreening";
import { downloadFile } from '@/utils/index'
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
//搜索内容
const querystr = ref("");
// 左侧树
const cascaderdata: any = ref([]);
const cascaderList: any = ref([]);
const defaultProps = { label: "name" };
const handleNodeClick = (data: Tree) => {
  schoolId.value = data.id;
  schoolName.value = data.name;
  
  getGrade()
  getData();
};
const infoForm = ref();
const treeRef = ref();
// 表格数组类型定义
const tableData = ref([]);
const schoolId = ref("");
const schoolName = ref("");

const loading = ref(false);
const treeloading = ref(false);
//新建医生数组

const title = ref("");
const dialogVisible = ref(false);
const regionId =ref(""); //行政区域名称
const regionType =ref(""); 
//获取行政区域
function getTree() {
  const params = {
    name: "",
    status:'01'
  };

  queryRegion(params).then((res: any) => {
    cascaderList.value = JSON.parse(JSON.stringify(res.data))
    cascaderdata.value = publicTree(res.data,"");
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const treeData:any = ref([])
function getData(){
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    studentName: querystr.value,
    schoolId: schoolId.value,
    gradeId:queryInfo.value.gradeId,
    classId:queryInfo.value.classId,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loading.value = true
  queryStudentVisdataPage(params).then((res) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });


  

}
//获取学生列表
function getTreeData() {
  if(regionId.value == ''){
    treeData.value = []
    return
  }
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: "",
    regionId: regionId.value,
    type:regionType.value
  };
  treeloading.value = true
  querySchoolList(params).then((res) => {
    tableData.value = []
    treeData.value = res.data;
    treeloading.value = false
    schoolId.value = ""
    if (schoolId.value == "" &&res.data.length != 0) {
      schoolId.value = res.data[0].id;
      schoolName.value = res.data[0].name;
      getGrade()
      nextTick(() => {
        treeRef.value?.setCurrentKey(schoolId.value);
      });
      getData();
    }
    
  }).catch(()=>{
    treeloading.value = false
  });
}
// 选中区域获取医生列表
function handleChange(value:any){
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  if(value.length != 0){
    regionId.value = value[value.length -1]
    for(let i=0;i<cascaderList.value.length;i++){
      if(regionId.value == cascaderList.value[i].id){
        regionType.value = cascaderList.value[i].type
        break
      }
    } 
  }
  getTreeData()
}
function handleClick(data:any){
  if(data.children == null){
    isCascader.value = false
    setTimeout(()=>{
      isCascader.value = true
    },20)
  }
  regionId.value = data.id
  regionType.value = data.type
  getTreeData()
}
const isSwitch = ref(false) // 提交开关

//关闭弹窗
function handleClose() {
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}


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();
    // 拼接
    return year + "-" + month + "-" + day + " ";
  }
}
onMounted(() => {
  getTree();
});
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;
      };
    };
  }
}
const info:any = ref({})
const htmlStatus= ref('1')
function viewVisdata(item:any){ // 查看学生视力档案
  info.value = {
    id:item.student_id,
    name:item.student_name,
    school_name:item.school_name,
    grade_name:item.grade_name,
    class_name:item.class_name,
    gender:item.gender,
    exam_time:item.exam_time,
    age:item.age,
  } 
  
  htmlStatus.value = '2'
}
function returnStudent(){
  htmlStatus.value = '1'
}
const isCascader=ref(true)

//表格多选样式
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (row.is_sighted == 1) {
        return 'is_sightedbg'
    }
    return ''
}
const radioStr = ref("1")
const isExportVisible = ref(false)
function exportVisibleClick(){
  radioStr.value = "1"
  isExportVisible.value = true
}
//导出
function exportclick(){
  let params = {
    studentName:queryInfo.value.name,
    idCode:queryInfo.value.idCode,
    studyCode:queryInfo.value.studyCode,
    isSighted:queryInfo.value.isSighted,
    schoolId:schoolId.value,
    gradeId:queryInfo.value.gradeId,
    classId:queryInfo.value.classId,
    gender:queryInfo.value.gender,
    type:'1'
  };
  if(radioStr.value == "1"){
    loading.value = true
    exportStudentResult(params).then((response: any) => {
      isExportVisible.value = false
      downloadFile(response,schoolName.value+ '-学生筛查结果', 'xlsx')
      loading.value = false
    }).catch(()=>{
      loading.value = false
    });
  }else if(radioStr.value == "2"){
    loading.value = true
    exportSchoolHealthNetwork(params).then((response: any) => {
      isExportVisible.value = false
      downloadFile(response,schoolName.value+ '-学生体质健康网模板', 'xlsx')
      loading.value = false
    }).catch(()=>{
      loading.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){
  let params = {
    gradeId: id
  }
  classData.value = []
  queryInfo.value.classId = ""
  if(id != null && id != '' ){
    querySchoolClassList(params).then((res) => {
      classData.value = res.data;
    }).catch(()=>{
    });
  }
  getData()
}

</script>

<template>
  <div class="faulttemplate-box">
    <aside id="silderLeft" v-show="htmlStatus == '1'">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">学校列表</div>
      </div>
      <div style="width:100% ;height:32px;display: flex;">
        <el-cascader v-if="isCascader" style="width: 90%; margin: auto;" placeholder="请输入行政区域" v-model="regionId" @change="handleChange" :options="cascaderdata" :props="props1" :show-all-levels="false" filterable>
          <template #default="{ node, data }">
            <div @click.stop="handleClick(data)">{{ data.name }}</div>
          </template>
        </el-cascader>
      </div>
      <el-tree v-loading="treeloading"
        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;margin-top: 10px;">
      </el-tree>
      
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
    <main class="silderRight" v-show="htmlStatus == '1'">
      <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-select v-model="queryInfo.gradeId" @change="getClass"  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="getData" class="ml-3" placeholder="请选择班级" clearable style="width: 120px" :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-button type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
          </div>
          <div class="left-nav">
            <el-button type="primary" @click="exportVisibleClick">
              <img src="@/assets/visionscreening/exports.png" style="padding-right: 5px;" alt="">导出
            </el-button>
          </div> 
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData"
      :row-class-name="tableRowClassName"
       style="width: 100%; height:calc(100vh - 250px)" row-key="id" border
      default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
        <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
        <el-table-column prop="student_name" label="姓名" width="90"></el-table-column>
        <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="60"></el-table-column>
        <el-table-column prop="grade_name" label="所属年级" min-width="110"></el-table-column>
        <el-table-column prop="class_name" label="所属班级" min-width="100"></el-table-column>

        <el-table-column prop="exam_time" label="检查时间" width="140" 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="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 == '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>
            <span v-if="scope.row.is_glasses == '0'||scope.row.is_glasses == ''||scope.row.is_glasses == null">未知</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="60">
          <template #default="scope">
            <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
              <img @click="viewVisdata(scope.row)" src="@/assets/tableicon/u880.png" title="历史档案" style="cursor: pointer;"
              >
            </span>
          </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>
    <StudentVisdata  class="schoolStudent-box" v-if="htmlStatus == '2'" :studentInfo="info" @returnStudent="returnStudent"/>
    <el-dialog v-model="isExportVisible" title="导出数据" width="350">
      <div v-loading="loading">
        <div>
          <el-radio label="1" size="large" v-model="radioStr">系统模版数据导出</el-radio>
        </div>
        <div>
          <el-radio label="2" size="large" v-model="radioStr">体质健康网模版数据（最近）导出</el-radio>
        </div>
          <!-- <el-radio label="3" size="large" v-model="radioStr">体质健康网模版数据（最优）导出</el-radio> -->
        <div style="display: flex;justify-content: end;margin-top: 10px;">
          <el-button type="primary" @click="exportclick" style="padding:5px;width: 60px;">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped  lang="scss">
.silderLeft-default {
  :deep(.custom-tree-node, .treedelicon, .treeediticon) {
    font-size: 16px !important;
  }

  :deep(.custom-tree-large, .treedelicon, .treeediticon) {
    font-size: 14px !important;
  }
}

.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;
  &: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;
}

.dialog-footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

.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;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  width: 100%;
  height: 40px;
  background-color: #409eff !important;
  color: #fff !important;
}

:deep(.el-tree-node__content) {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #409eff19;
}

.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;
}

.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;
  }
}
.schoolStudent-box{
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 3px;
  padding: 10px 15px 0px;
  padding-right: 0;
  box-sizing: border-box;
    .schoolStudent-title{
      display: flex;
      justify-content: space-between;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #282828;
      .class_order{
        padding-bottom: 5px;
        border-bottom:3px solid #409eff;
      }
      .return{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #409EFF;
        width: 50px;
        height: 26px;
        border: 1px solid #C6E2FF;
        background: rgb(236, 245, 255);
        border-radius:4px;
        cursor: pointer;
      }
    }
    .schoolStudent-line{
      width: 100%;
      height: 1px;
      background: rgb(220, 223, 230);
      margin-top: -1px;
    }
}

</style>
