<template>
    <div v-if="props.name=='welding'" class="content-small" ref="weldingTwo"></div>
    <div v-if="props.name=='stuff'" class="content-small" ref="stuffTwo"></div>
    <div v-if="props.name=='ornaments'" class="content-small" ref="ornamentsTwo"></div>
  </template>
  
  <script setup lang="ts">
  import {EDataPerson,EDataPersonItem} from '@/type/environment'
  import {getCurrentInstance, onMounted, reactive, ref} from "vue"
  const { proxy } = getCurrentInstance() as any;
  let props=defineProps<{
      name:String,
      }>()
  
  //pm2.5
  let weldingTwo=ref()
  let stuffTwo=ref()
  let ornamentsTwo=ref()
  const echartsData = reactive<EDataPerson>({
    weldingTwo:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    ornamentsTwo:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    stuffTwo:{
        div:null,
        data:null,
        title:'',
        box:null
    },
  })
  const setData=()=>{
      if(props.name=='welding'){
        echartsData.weldingTwo!.div = weldingTwo.value
    echartsData.weldingTwo!.title = '焊接车间PM2.5(μg/m3)'
    echartsData.weldingTwo!.data ={
      title:{
        text:echartsData.weldingTwo!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 300,
      center: ['50%', '62%'],
      radius: '65%',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
            [0.3, '#45b97c'],
            [0.7, '#ffd400'],
            [1, '#a7324a']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'inherit'
        }
      },
      axisTick: {
        distance: -5,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      splitLine: {
        distance: -5,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        // color: 'inherit',
        distance: -30,
        fontSize: 16
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} μg/m3',
        color: 'inherit',
        textStyle:{
            fontSize:14
        }
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};
  change(echartsData.weldingTwo)
      }
      if(props.name=='stuff'){
        echartsData.stuffTwo!.div = stuffTwo.value
    echartsData.stuffTwo!.title = '大件车间PM2.5(μg/m3)'
    echartsData.stuffTwo!.data ={
      title:{
        text:echartsData.stuffTwo!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 300,
      center: ['50%', '62%'],
      radius: '65%',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
          [0.3, '#45b97c'],
            [0.7, '#ffd400'],
            [1, '#a7324a']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'inherit'
        }
      },
      axisTick: {
        distance: -5,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      splitLine: {
        distance: -5,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        // color: 'inherit',
        distance: -30,
        fontSize: 16
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} μg/m3',
        color: 'inherit',
        textStyle:{
            fontSize:14
        }
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};
  change(echartsData.stuffTwo)
      }
      if(props.name=='ornaments'){
        echartsData.ornamentsTwo!.div = ornamentsTwo.value
    echartsData.ornamentsTwo!.title = '精饰车间PM2.5(μg/m3)'
    echartsData.ornamentsTwo!.data ={
      title:{
        text:echartsData.ornamentsTwo!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 300,
      center: ['50%', '62%'],
      radius: '65%',
      axisLine: {
        lineStyle: {
          width: 5,
          color: [
          [0.3, '#45b97c'],
            [0.7, '#ffd400'],
            [1, '#a7324a']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'inherit'
        }
      },
      axisTick: {
        distance: -5,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 1
        }
      },
      splitLine: {
        distance: -5,
        length: 8,
        lineStyle: {
          color: '#fff',
          width: 2
        }
      },
      axisLabel: {
        // color: 'inherit',
        distance: -30,
        fontSize: 16
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} μg/m3',
        color: 'inherit',
        textStyle:{
            fontSize:14
        }
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};
  change(echartsData.ornamentsTwo)
      }
  
  
  }
  
  
  const change = (item:EDataPersonItem) => {
      let Ebox=proxy.$echarts.init(
      item.div,
      "dark"
    );
    Ebox.setOption(item.data);
    item.box = Ebox
  };
  function setchartWH(width:any,height:any){
      if(props.name=='welding'){
        weldingTwo.value.style.height=height+'px'
        weldingTwo.value.style.width=width+'px'
          if(echartsData.weldingTwo.box){
              echartsData.weldingTwo.box.resize()
          }
      }
      if(props.name=='stuff'){
        stuffTwo.value.style.height=height+'px'
        stuffTwo.value.style.width=width+'px'
          if(echartsData.stuffTwo.box){
              echartsData.stuffTwo.box.resize()
          }
      }
      if(props.name=='ornaments'){
        ornamentsTwo.value.style.height=height+'px'
        ornamentsTwo.value.style.width=width+'px'
          if(echartsData.ornamentsTwo.box){
              echartsData.ornamentsTwo.box.resize()
          }
      }
    
  }
  onMounted(() => {
      setData()
  })
  
  // return{setchartWH}
  defineExpose({
      setchartWH,
  })
  </script>
  
  <style module>
   .container {
   }
  </style>
  