<template>
<div v-if="props.name=='welding'" class="content-small" ref="weldingTen"></div>
    <div v-if="props.name=='stuff'" class="content-small" ref="stuffTen"></div>
    <div v-if="props.name=='ornaments'" class="content-small" ref="ornamentsTen"></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 weldingTen=ref()
  let stuffTen=ref()
  let ornamentsTen=ref()
  const echartsData = reactive<EDataPerson>({
    weldingTen:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    ornamentsTen:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    stuffTen:{
        div:null,
        data:null,
        title:'',
        box:null
    },
  })
  const setData=()=>{
      if(props.name=='welding'){
        echartsData.weldingTen!.div = weldingTen.value
    echartsData.weldingTen!.title = '焊接车间PM10(mg/m3)'
    echartsData.weldingTen!.data ={
      title:{
        text:echartsData.weldingTen!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 3,
      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} mg/m3',
        color: 'inherit',
        textStyle:{
            fontSize:14
        }
      },
      data: [
        {
          value: 1.2
        }
      ]
    }
  ]
};
  change(echartsData.weldingTen)
      }
      if(props.name=='stuff'){
        echartsData.stuffTen!.div = stuffTen.value
    echartsData.stuffTen!.title = '大件车间PM10(mg/m3)'
    echartsData.stuffTen!.data ={
      title:{
        text:echartsData.stuffTen!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 3,
      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} mg/m3',
        color: 'inherit',
        textStyle:{
            fontSize:14
        }
      },
      data: [
        {
          value: 1.2
        }
      ]
    }
  ]
};
  change(echartsData.stuffTen)
      }
      if(props.name=='ornaments'){
        echartsData.ornamentsTen!.div = ornamentsTen.value
    echartsData.ornamentsTen!.title = '精饰车间PM10(mg/m3)'
    echartsData.ornamentsTen!.data ={
      title:{
        text:echartsData.ornamentsTen!.title,
        show:true,
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
  series: [
    {
      type: 'gauge',
      min: 0,
      max: 3,
      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} mg/m3',
        color: 'inherit',
        textStyle:{
            fontSize:14
        }
      },
      data: [
        {
          value: 1.2
        }
      ]
    }
  ]
};
  change(echartsData.ornamentsTen)
      }
  
  
  }
  
  
  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'){
        weldingTen.value.style.height=height+'px'
        weldingTen.value.style.width=width+'px'
          if(echartsData.weldingTen.box){
              echartsData.weldingTen.box.resize()
          }
      }
      if(props.name=='stuff'){
        stuffTen.value.style.height=height+'px'
        stuffTen.value.style.width=width+'px'
          if(echartsData.stuffTen.box){
              echartsData.stuffTen.box.resize()
          }
      }
      if(props.name=='ornaments'){
        ornamentsTen.value.style.height=height+'px'
        ornamentsTen.value.style.width=width+'px'
          if(echartsData.ornamentsTen.box){
              echartsData.ornamentsTen.box.resize()
          }
      }
    
  }
  onMounted(() => {
      setData()
  })
  
  // return{setchartWH}
  defineExpose({
      setchartWH,
  })
</script>

<style module>

</style>
