
<script lang="ts">
export default {
  name: 'datacontrast' // 数据对比
};
</script>
<script setup lang="ts">
import { onMounted, ref, nextTick,watch } from "vue";
import { useDark } from '@vueuse/core'
import { ElMessage, ElMessageBox, ElTree,ElTable,TabsPaneContext} from "element-plus";
import * as echarts from 'echarts'
import { queryRegionSchool } from "@/api/regionmodule/school";
import { querySchoolIdExamineList } from "@/api/planscreening";
import { publicTree } from '@/utils/validate';
const planYearData:any  =ref([{name:'2023-1'},{name:'2023-2'},{name:'2024-1'},{name:'2024-2'},{name:'2025-1'},{name:'2025-2'}])
const planYear:any = ref("")
function planYearChange(e:any){
  getData()
}
const istabshow = ref(true)
const loading = ref(false)
const sortstatus = ref(0)
const option = ref({
  title: {
    text: '朝阳区2023年第一学期第一次普检',
    left: 'center',
    textStyle:{
      color:'#000'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    left: 'center',
    bottom: '2%',
    textStyle:{
      fontSize :18,
      color:'#787878'
    },
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10,
    padding: [0, 100]
  },
  color:['#6395fa','#f7c122','#63daab','#7666fa', '#8babd8','#75cbed'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: '60%',
      top:'-10%',
      data: [
        { value: 1048, name: '小学一年级'},
        { value: 735, name: '小学二年级' },
        { value: 580, name: '小学三年级' },
        { value: 484, name: '小学四年级' },
        { value: 300, name: '小学五年级' },
        { value: 300, name: '小学六年级' },
      ],
      label: {
			  normal: {
        color:'#000000',
        formatter: '{c}',
			},
		},
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          borderColor:'#000',
          borderWidth:0.5

        }
      }
    }
  ]
})
const option2 = ref({
  title: {
    text: '朝阳区2023年第一学期第一次普检',
    left: 'center',
    textStyle:{
      color:'#000'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    left: 'center',
    bottom: '2%',
    textStyle:{
      fontSize :18,
      color:'#787878'
    },
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10,
    padding: [0, 100]
  },
  color:['#6395fa','#f7c122','#63daab','#7666fa', '#8babd8','#75cbed'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: '60%',
      top:'-10%',
      data: [
        { value: 1048, name: '小学一年级' },
        { value: 735, name: '小学二年级' },
        { value: 580, name: '小学三年级' },
        { value: 484, name: '小学四年级' },
        { value: 300, name: '小学五年级' },
        { value: 300, name: '小学六年级' },
      ],
      label: {
			  normal: {
        color:'#000000',
        formatter: '{c}',
			}
      
    },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          borderColor:'#000',
          borderWidth:0.5

        }
      }
    }
  ]
})
const option3 = ref({
  title: {
    text: '朝阳区2023年第一学期第一次普检',
    left: 'center',
    textStyle:{
      color:'#000'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  grid:{
    top:'0%',
    containLabel: true
  },
  legend: {
    orient: 'horizontal',
    left: 'center',
    bottom: '2%',
    textStyle:{
      fontSize :18,
      color:'#787878'
    },
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 10,
    padding: [0, 100]
  },
  color:['#6395fa','#f7c122','#63daab','#7666fa', '#8babd8','#75cbed'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: '60%',
      top:'-10%',
      data: [
        { value: 1048, name: '小学一年级' },
        { value: 735, name: '小学二年级' },
        { value: 580, name: '小学三年级' },
        { value: 484, name: '小学四年级' },
        { value: 300, name: '小学五年级' },
        { value: 300, name: '小学六年级' },
      ],
      label: {
			  normal: {
        color:'#000000',
        formatter: '{c}',
			}
    },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          borderColor:'#000',
          borderWidth:0.5

        }
      }
    }
  ]
})
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 showecharts1= ref(false)
const showecharts2= ref(false)
const showecharts3= ref(false)
// 左侧树
const treeData: any = ref([]);
const treeloading = ref(false)
const defaultProps = { label: "name" }
const treeRef = ref<InstanceType<typeof ElTree>>()
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
let activeName = ref('近视统计')

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()
});
//tab页勾选
const handleClick = (tab: TabsPaneContext, event: Event) => {
  sortstatus.value = 0
  istabshow.value = true
  loadecharts()
}
const schoolId = ref("")
//树勾选
const handleNodeClick = (data: Tree) => {
  
  if(data.org_type == null){
    nextTick(() => {
      treeRef.value?.setCurrentKey(schoolId.value);
    });
  }else{
    schoolId.value = data.id
    treeRef.value?.setCurrentKey(data.id);
    getData()
  }
  showecharts1.value = false
  showecharts2.value = false
  showecharts3.value = false
  checkedCities.value = []
};
//勾选普检信息
let myChart1:any = ref()
let myChart2:any = ref()
let myChart3:any = ref()
const checkdata:any = ref([])
//加载统计饼图
function loadecharts(){
  if (isDark === '1') {
    facechange('1')
  }else{
    facechange('2')
  }
  loading.value = true
  showecharts1.value = false 
  showecharts2.value = false
  showecharts3.value = false
  let nums = 0
  checkdata.value = []
  if (checkedCities.value.length === 1) {
    showecharts1.value = true
    showecharts2.value = false
    showecharts3.value = false
    setTimeout(()=>{
      if (myChart1.value) {  
        myChart1.value.dispose()
      }
     const chartEle: HTMLElement = document.getElementById('echarts1') as HTMLElement;
      myChart1.value = echarts.init(chartEle);
      option.value.title.text = checkedCities.value[0]
      myChart1.value.setOption(option.value)
      window.onresize = function () {
        myChart1.value.resize()
      } 
    },100)
  } else if (checkedCities.value.length === 2) {
    showecharts1.value = true
    showecharts2.value = true
    showecharts3.value = false
    setTimeout(()=>{
      if (myChart1.value) {  
        myChart1.value.dispose()
      }
      if (myChart2.value) {  
        myChart2.value.dispose()
      }
      const chartEle: HTMLElement = document.getElementById('echarts1') as HTMLElement;
      myChart1.value = echarts.init(chartEle);
      const chartEle2: HTMLElement = document.getElementById('echarts2') as HTMLElement;
      myChart2.value = echarts.init(chartEle2);
      option.value.title.text = checkedCities.value[0]
      option2.value.title.text = checkedCities.value[1]
      myChart1.value.setOption(option.value)
      myChart2.value.setOption(option2.value)
      window.onresize = function () {
        myChart1.value.resize()
        myChart2.value.resize()
      } 
    },100)
  } else if(checkedCities.value.length === 3){
    showecharts1.value = true
    showecharts2.value = true
    showecharts3.value = true
    setTimeout(()=>{
      if (myChart1.value) {  
        myChart1.value.dispose()
      }
      if (myChart2.value) {  
        myChart2.value.dispose()
      }
      if (myChart3.value) {  
        myChart3.value.dispose()
      }
    const chartEle: HTMLElement = document.getElementById('echarts1') as HTMLElement;
    myChart1.value = echarts.init(chartEle);
    const chartEle2: HTMLElement = document.getElementById('echarts2') as HTMLElement;
    myChart2.value = echarts.init(chartEle2);
    const chartEle3: HTMLElement = document.getElementById('echarts3') as HTMLElement;
    myChart3.value = echarts.init(chartEle3);
    option.value.title.text = checkedCities.value[0]
    option2.value.title.text = checkedCities.value[1]
    option3.value.title.text = checkedCities.value[2]
    myChart1.value.setOption(option.value)
    myChart2.value.setOption(option2.value)
    myChart3.value.setOption(option3.value)
    window.onresize = function () {
      myChart1.value.resize()
      myChart2.value.resize()
      myChart3.value.resize()
    } 
    },100)
  }
  loading.value = false
}
function facechange(type:any){
  if (type === '1') {
    option.value.title.textStyle.color="#ffffff"
    option.value.legend.textStyle.color = '#ffffff'
    option.value.series[0].label.normal.color = '#ffffff'
    option2.value.title.textStyle.color="#ffffff"
    option2.value.legend.textStyle.color = '#ffffff'
    option2.value.series[0].label.normal.color = '#ffffff'
    option3.value.title.textStyle.color="#ffffff"
    option3.value.legend.textStyle.color = '#ffffff'
    option3.value.series[0].label.normal.color = '#ffffff'
  }else{
    option.value.title.textStyle.color="#000"
    option.value.legend.textStyle.color = '#000'
    option.value.series[0].label.normal.color = '#000'
    option2.value.title.textStyle.color="#000"
    option2.value.legend.textStyle.color = '#000'
    option2.value.series[0].label.normal.color = '#000'
    option3.value.title.textStyle.color="#000"
    option3.value.legend.textStyle.color = '#000'
    option3.value.series[0].label.normal.color = '#000'
  }
  if (myChart1.value) {  
    myChart1.value.clear()
    myChart1.value.setOption(option.value);
    myChart1.value.resize()
  }
  if (myChart2.value) {  
    myChart2.value.clear()
    myChart2.value.setOption(option2.value);
    myChart2.value.resize()
  }
  if (myChart3.value) {  
    myChart3.value.clear()
    myChart3.value.setOption(option3.value);
    myChart3.value.resize()
  }
}
const month:any = ref("")
function monthChange(e:any){
  // getTableDate()
}

// function getCurrentMonthRange(date:any) {  
//     let startOfMonth = new Date(date);  
//     startOfMonth.setDate(1); // 设置日期为当月的1号  
//     let endOfMonth = new Date();  
//     endOfMonth.setMonth(startOfMonth.getMonth() + 1); // 设置日期为下个月的1号  
//     endOfMonth.setDate(0); // 将日期设置为上个月的最后一天  
  
//     return {  
//       start: dateFormat(startOfMonth),  
//       end: dateFormat(endOfMonth) 
//     };  
// }  
const treeLoading = ref(false)
const tempData:any = ref([])
function getTree(){
  let params = {
    status:'01',
    name: "",
  };
  treeLoading.value = true
  queryRegionSchool(params).then((res) => {
    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,"")
    if(schoolId.value != ""){
      nextTick(() => {
        treeRef.value?.setCurrentKey(schoolId.value);
          getData();
      });
    }
    treeLoading.value = false
  }).catch(()=>{
    treeLoading.value = false
  });
}
const planData:any = ref([])
const checkedCities:any = ref([]) // 选中的计划
 function getData(){
  let params = {
    schoolId: schoolId.value,
    planYear: planYear.value
  };
  querySchoolIdExamineList(params).then((res) => {
    planData.value = res.data;
    // treeLoading.value = false
  }).catch(()=>{
    // treeLoading.value = false
  });
}
function planChange(e:any){
  loadecharts()
}
</script>

<template>
    <div class="contents-box">
      <aside id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">数据列表</div>
      </div>
      <div style="width:100%;padding: 5px 15px;">
        <el-select v-model="planYear" placeholder="请选择计划年度" @change="planYearChange">
          <el-option v-for="item in planYearData" :key="item.name" :label="item.name" :value="item.name"/>
        </el-select>
        </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="silderRights">
        <div class="silderRight-top">
            <div style="display: flex;flex-wrap:wrap;">
              <el-checkbox-group
                v-model="checkedCities"
                @change="planChange"
              >
                <el-checkbox v-for="item in planData" :key="item.id" :label="item.id">{{
                  item.plan_name
                }}</el-checkbox>
              </el-checkbox-group>
               <!-- <div v-for="(item,index) in checkinfo" :key="index" style="width:300px;height: 30px;">
                 <el-checkbox v-model="item.checked" @change="checkchange(index,$event)">{{item.plan_name}}</el-checkbox>
               </div>  -->
            </div>
        </div>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="height:calc(100vh - 325px);">
            <el-tab-pane label="近视统计" name="近视统计">
              <div v-loading="loading" class="tabcontent">
                <div v-if="activeName === '近视统计'" class="tabcontent-box">
                  <div v-if="showecharts1" id="echarts1" style="width: 100%; height:100%;"></div>
                </div>
                <div v-if="activeName === '近视统计'" class="tabcontent-box">
                  <div v-if="showecharts2" id="echarts2" style="width: 100%; height:100%;"></div>
                </div>
                <div v-if="activeName === '近视统计'" class="tabcontent-box">
                  <div v-if="showecharts3" id="echarts3" style="width: 100%; height:100%;"></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="视力不良统计" name="视力不良统计">
              <div v-loading="loading" class="tabcontent">
                <div v-if="activeName === '视力不良统计'" class="tabcontent-box">
                  <div v-if="showecharts1" id="echarts1" style="width: 100%; height:100%;"></div>
                </div>
                <div v-if="activeName === '视力不良统计'" class="tabcontent-box">
                  <div v-if="showecharts2" id="echarts2" style="width: 100%; height:100%;"></div>
                </div>
                <div v-if="activeName === '视力不良统计'" class="tabcontent-box">
                  <div v-if="showecharts3" id="echarts3" style="width: 100%; height:100%;"></div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="远视储备率统计" name="远视储备率统计">
              <div v-loading="loading" class="tabcontent">
                <div v-if="activeName === '远视储备率统计'" class="tabcontent-box">
                  <div v-if="showecharts1" id="echarts1" style="width: 100%; height:100%;"></div>
                </div>
                <div v-if="activeName === '远视储备率统计'" class="tabcontent-box">
                  <div v-if="showecharts2" id="echarts2" style="width: 100%; height:100%;"></div>
                </div>
                <div v-if="activeName === '远视储备率统计'" class="tabcontent-box">
                  <div v-if="showecharts3" id="echarts3" style="width: 100%; height:100%;"></div>
                </div>
              </div>
            </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>
<style scoped  lang="scss">
  .contents-box{
    margin-top: 15px;
    height: calc(100vh - 145px);
    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;
}
.silderRights {
  flex: 1;
  position: relative;
  width: 100%;
  // overflow: auto;
  border-radius: 3px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
  background: transparent;
}
.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;
  // }
  .el-tabs__item{
    margin-right: 10px;
    border: 1px solid #dfe4ee;
    border-bottom: none;
    padding: 0px 20px !important;
    width: 130px;
    height: 44px;
    border-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #e9ecf3;
    font-size: 14px;
    color: #606060;
  }
  .el-tabs__nav{
    padding-left: 20px;
  }
  .el-tabs__active-bar{
    display: none;
  }
  .el-tabs__item:hover{
    color: #409eff;
  }
  .el-tabs__item.is-active{
    color: #fff;
    border: 1px solid #409eff;
    background-color: #409eff;
  }
  .el-tabs__nav-wrap::after{
    display: none;
  }
  .el-tabs__header{
    margin: 0px;
  }
}
.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;
    }
  }
  
}
.tabcontent{
  background-color: #fff;
  height: calc(100vh - 384px);
  border-radius: 5px;
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .tabcontent-box{
    width: 33%;
  }
}
.silderRight-top{
height: 180px;
background: #fff;
border-radius: 5px;
width:100%;
margin-bottom:15px;
padding: 15px;
}
</style>
