<template>
  <div class="content-big" ref="humiture"></div>
</template>

<script setup lang="ts">
import {EDataPerson,EDataPersonItem} from '@/type/environment'
import {getCurrentInstance, onMounted, reactive, ref} from "vue"
import {getHumitureData} from '@/http/environment/index'
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
const { proxy } = getCurrentInstance() as any;

let humiture=ref()
const echartsData = reactive<EDataPerson>({
    humiture:{
        div:null,
        data:null,
        title:'',
        box:null
    },
    

})
const setData=()=>{
echartsData.humiture!.div=humiture.value
    echartsData.humiture!.title=t('messages.TemperatureHumidity')
    echartsData.humiture!.data={
  title: {
    text: echartsData.humiture!.title
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    bottom: '3%',
  },
  grid: {
    top:'8%',
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [t('messages.FuZhuangLegion'), t('messages.JiaFangLegion'), t('messages.QiCheLegion'), '电控车间', '精饰车间', '精加车间', '焊接车间', '大件车间', '机加车间', '配套中心']
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisLabel:{
       formatter:'{value} (°C/%RH)',
    }
  },
  series: [
    {
      name: `${t('messages.TemperatureRange')}(°C)`,
      type: 'bar',
      data: [12, 16, 13, 17, 14, 20, 30, 12, -15, 16]
    },
    {
      name: `${t('messages.HumidityRange')}(%RH)`,
      type: 'bar',
      data: [30, 16, 20, 17, 28, 20, 30, 29, 75, 16],
      markLine: { // 设置最大值和最小值
        silent: true, //基线显示 隐藏
        symbol:'none',// 不显示箭头和圆点
              data: [
                {
                  name: "湿度",
                  yAxis: 15,
                  label:{
                    formatter:`${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：15%RH`,
                    position: 'middle'
                  },
                  lineStyle: {
                        color: "red", // 这儿设置安全基线颜色
                    },
                },
                {
                  name: "湿度",
                  yAxis: 75,
                  label:{
                    formatter:`${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：75%RH`,
                    position: 'middle'
                  },
                  lineStyle: {
                        color: "red", // 这儿设置安全基线颜色
                    },
                },
                {
                  name: `${t('messages.TemperatureRange')}`,
                  yAxis: -15,
                  label:{
                    formatter:`${t('messages.TemperatureRange')}${t('messages.TemperatureRange_down')}：-15°C`,
                    position: 'middle'
                  },
                  lineStyle: {
                        color: "yellow", // 这儿设置安全基线颜色
                    },
                },
                {
                  name: `${t('messages.TemperatureRange')}`,
                  yAxis: 45,
                  label:{
                    formatter:`${t('messages.TemperatureRange')}${t('messages.TemperatureRange_up')}：45°C`,
                    position: 'middle'
                  },
                  lineStyle: {
                        color: "yellow", // 这儿设置安全基线颜色
                    },
                }
              ],
     }
    }
  ]
};

change(echartsData.humiture)
}


const change = (item:EDataPersonItem) => {
    console.log(item);
    
    let Ebox=proxy.$echarts.init(
    item.div,
    "dark"
  );
  Ebox.setOption(item.data);
  item.box = Ebox
};
function setchartWH(width:any,height:any){
    echartsData.humiture.div.style.height=height+'px'
  echartsData.humiture.div.style.width=width+'px'
  if(echartsData.humiture.box){
    echartsData.humiture.box.resize()
  }
  
}

async function getData(){
  let result:any = await getHumitureData()
 
  if(result.code==200){
    console.log(result);
    
    // setData(room,year,result.title)
  }
}
onMounted(() => {
    setData()
})

// return{setchartWH}
defineExpose({
    setchartWH,
})
</script>

<style module>
 .container {
 }
</style>
