<script lang="ts">
// 学生视力数据档案
export default {
  name: 'studentVisdata' // 学生视力数据档案
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick,watch } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { queryStudentVisdataList,queryVisionChangeTrend,exportVisionForm } from "@/api/regionmodule/schoolStudent";

import { useDark } from '@vueuse/core'

import Viewfile from "@/views/component/Viewfile.vue";
import * as echarts from 'echarts';
import { downloadFile } from '@/utils/index'
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const emit = defineEmits([ 'returnStudent']);
let isDark:any = useDark().value == true? '1' : '2'
watch(useDark(), () => {
  isDark = useDark().value == true? '1' : '2'
  if (useDark().value == true) {
    facechange('1')
  } else {
    facechange('2')
  }
})
const props:any = defineProps({
  studentInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
function returnClick(){
  emit('returnStudent', '1');
}
function getData(){
  if(props.studentInfo.id == '' || props.studentInfo.id == null){
    tableData.value = []
    return
  }
  let params = {
    studentId: props.studentInfo.id,
  };
  loading.value = true
  queryStudentVisdataList(params).then((res) => {
    tableData.value = res.data;
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });
  queryVisionChangeTrend(params).then((res) => {
    let date = []
    for(let i=0;i<res.data.exam_time.length;i++){
      date.push(dateFormat(res.data.exam_time[i]))
    }
    option.value.xAxis.data = date
    option.value.series[0].data = res.data.vision_left
    option.value.series[1].data = res.data.vision_right
    option2.value.xAxis.data = date
    option2.value.series[0].data = res.data.se_left
    option2.value.series[1].data = res.data.se_right
    
  }).catch(()=>{
  });

  
}
let myCanvas1:any = null
let myCanvas2:any = null
onMounted(() => {
  activeName.value = '1'
  getData();
  window.onresize = ()=>{
    if(myCanvas1 != null){
      myCanvas1.resize()
    }
    if(myCanvas2 != null){
      myCanvas2.resize()
    }
  }
});


function handleClick(tab:any, event:any){
  if (isDark === '1') {
    facechange('1')
  }else{
    facechange('2')
  }
  if(tab.props.name == '2'){
    setTimeout(()=>{
      myCanvas1 = echarts.init(document.getElementById('myEchart1'))
      myCanvas1.clear()
      myCanvas1.setOption(option.value)
    },200)
    
  }
  if(tab.props.name == '3'){
    setTimeout(()=>{
      myCanvas2 = echarts.init(document.getElementById('myEchart2'))
      myCanvas2.clear()
      myCanvas2.setOption(option2.value)
    },200)
    
  }
}
function facechange(type:any){
  if (type === '1') {
    option.value.xAxis.axisLabel.color = '#ffffff'
    option.value.yAxis.axisLabel.color = '#ffffff'
    option.value.yAxis.splitLine.lineStyle.color = '#4c4d4f'
    option.value.legend.textStyle.color = '#ffffff'
    option2.value.xAxis.axisLabel.color = '#ffffff'
    option2.value.yAxis.axisLabel.color = '#ffffff'
    option2.value.yAxis.splitLine.lineStyle.color = '#4c4d4f'
    option2.value.legend.textStyle.color = '#ffffff'
  }else{
    option.value.xAxis.axisLabel.color = '#787878'
    option.value.yAxis.axisLabel.color = '#787878'
    option.value.yAxis.splitLine.lineStyle.color = '#E0E6F1'
    option.value.legend.textStyle.color = '#000000'

    option2.value.xAxis.axisLabel.color = '#787878'
    option2.value.yAxis.axisLabel.color = '#787878'
    option2.value.yAxis.splitLine.lineStyle.color = '#E0E6F1'
    option2.value.legend.textStyle.color = '#000000'
  }
  if (myCanvas1) {  
    myCanvas1.clear()
    myCanvas1.setOption(option.value);
    myCanvas1.resize()
  }
  if (myCanvas2) {  
    myCanvas2.clear()
    myCanvas2.setOption(option2.value);
    myCanvas2.resize()
  }
}
const loading = ref(false)
const tableData:any = ref([])
const activeName = ref("1")
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 ;
  }
}

const option:any = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['左眼视力', '右眼视力'],
    textStyle:{
      color:'#000'
    },
    left:'left',
    icon: 'rect',
    itemWidth: 15,
    itemHeight: 2,
    itemGap: 40
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    axisLabel:{
      color:'#787878'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel:{
      color:'#787878'
    },
    splitLine:{
      lineStyle: {
        color: '#E0E6F1'  
      }
    }
  },
  series: [
    {
      name: '左眼视力',
      type: 'line',
      data: []
    },
    {
      name: '右眼视力',
      type: 'line',
      data: []
    }
  ]
})
const option2:any = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['左眼等效球镜', '右眼等效球镜'],
    textStyle:{
      color:'#000'
    },
    left:'left',
    icon: 'rect',
    itemWidth: 15,
    itemHeight: 2,
    itemGap: 40
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
    axisLabel:{
      color:'#787878'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel:{
      color:'#787878'
    },
    splitLine:{
      lineStyle: {
        color: '#E0E6F1'  
      }
    }
  },
  series: [
    {
      name: '左眼等效球镜',
      type: 'line',
      data: []
    },
    {
      name: '右眼等效球镜',
      type: 'line',
      data: []
    }
  ]
})
// 文件下载
function fileDown(row:any) {
  const params = {
    id: row.id
  }
  exportVisionForm(params).then((response: any) => {
    downloadFile(response, row.student_name + '筛查结果记录表', 'docx')
  }).catch(() => {
  });
}
const isViewfile = ref(false)
const ViewfileUrl = ref("")
function viewReport(row: any) {
  ViewfileUrl.value =  url + '/base/student-visdata/exportVisionForm?id=' + row.id
  setTimeout(()=>{
    isViewfile.value = true
  },200)

}
function CloseView() {
  isViewfile.value = false
}
</script>
<template>
  <div style="padding-right: 20px;">
    <div class="schoolStudent-title">
      <div class="class_order">学生视力档案</div>
      <div class="return" @click="returnClick">
        <img src="@/assets/tableicon/u549.png" alt="">
        <div style="padding-left: 2px;padding-top: 2px;">返回</div>
      </div>
    </div>
    <div class="schoolStudent-line"></div>
    <div style="display: flex;align-items: center;padding: 20px 0;">
      <img v-if="(props.studentInfo.photo=='' || props.studentInfo.photo==null) && props.studentInfo.gender == '1'" src="@/assets/student/man.png" alt="" style="width:100px;height:100px;">
      <img v-if="(props.studentInfo.photo=='' || props.studentInfo.photo==null) && props.studentInfo.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:100px;height:100px;">
      <img v-if="props.studentInfo.photo!='' && props.studentInfo.photo!=null" :src="props.studentInfo.photo" alt="" style="width:100px;height:100px;">
      <div style="margin-left: 15px;">
        <div class="basicname">
          <span style="padding-right:20px">{{ props.studentInfo.name }}</span>
          <span style="padding-right:20px">|</span>
          <span v-if="props.studentInfo.gender == '1'">男</span>
          <span v-if="props.studentInfo.gender == '2'">女</span>
          <span style="padding-left:20px;padding-right:20px">|</span>
          <span>{{ props.studentInfo.age }}岁</span>
        </div>
        <div class="basicinfo">
          <span>所属学校：</span>
          <span class="valuetext">{{ props.studentInfo.school_name }}</span>
          <span>所属年级：</span>
          <span class="valuetext">{{ props.studentInfo.grade_name }}</span>
          <span>所属班级：</span>
          <span class="valuetext">{{ props.studentInfo.class_name }}</span>
        </div>
      </div>
    </div>
    <el-tabs class="tstab" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="检查记录" name="1"></el-tab-pane>
      <el-tab-pane label="视力变化趋势" name="2"></el-tab-pane>
      <el-tab-pane label="屈光度变化趋势" name="3"></el-tab-pane>
    </el-tabs>
    <el-table v-if="activeName == '1'" v-loading="loading" :data="tableData" style="width: 100%; height:calc(100vh - 380px)" 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="序号"></el-table-column>
      <el-table-column prop="exam_time" label="检查时间" min-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="90" 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="props.studentInfo.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="100" align="center">
        <template #default="scope">
          <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
            <img src="@/assets/tableicon/u886.png" @click="viewReport(scope.row)" title="查看结果登记表" style="cursor: pointer;"
             >
            <img src="@/assets/tableicon/u889.png" @click="fileDown(scope.row)" title="导出" style="cursor: pointer;"
             >
            <!-- <img src="@/assets/tableicon/u884.png" title="打印" style="cursor: pointer;"> -->
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="activeName == '2'" id="myEchart1" style="width: 100%;height:calc(100vh - 380px)"></div>
    <div v-if="activeName == '3'" id="myEchart2" style="width: 100%;height:calc(100vh - 380px)"></div>
    <Viewfile v-if="isViewfile" :showTime="true" :title="'查看学生体检报告'" :url="ViewfileUrl" :type="'docx'" :clientHeight="600"
        @update="CloseView" />
  </div>
</template>
<style scoped  lang="scss">
  .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;
  }
  .basicname{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
  text-align: left;
  padding-bottom: 15px;
}
.basicinfo{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #787878;
  text-align: left;
}
.valuetext{
  font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: #363636;
    padding-right: 50px;
    padding-left: 10px;
}
</style>
