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

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

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

watch(
  () => store.noise,
  (newVal, oldVal) => {
    //动态更新echarts
    if (echartsData.noise.box) {
      setData(newVal.top, newVal.listData, 2);
    }
  },
  { deep: true, flush: "post" }
);

/**
 * @函数功能: 初始化echarts/修改echarts
 * @param {*} limit 限制条件
 * @param {*} value 修改的data
 * @param {*} type 1：新增 2：修改
 * @出口参数:
 * @函数备注:
 */
const setData = (limit: any, value: any, type: number) => {
  let x = [];
  let y = [];
  value.forEach((res) => {
    x.push(res.name);
    y.push(res.value);
  });
  echartsData.noise!.div = noise.value;
  echartsData.noise!.title =t('messages.noise_DB');
  echartsData.noise!.data = {
    title: {
      text: echartsData.noise!.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top:'1%'
    },
    legend: {
      top: "4%",
      width: "auto",
    },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    color:["","#4992FF","#FF6E76"],
    tooltip: {
      // trigger: "axis",
      // axisPointer: {
      //   // Use axis to trigger tooltip
      //   type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
      //   axis: "auto",
      // },
      // formatter: "{b} : {c} dB",
    },
    xAxis: {
      type: "category",
      data: x,
      axisLabel:{
        interval: 0
      }
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} dB",
      },
    },
    series: [
      { 
        data: y,
        type: "bar",
        barWidth: '50%',
        itemStyle:{
          color:function (params) {
              var index_color = params.value;
              if (index_color >= limit.value) {
                return "#FF6E76";
              } else {
                return "#4992FF";
              }
            },

        } ,
        label: {
          show: true,
          normal: {
            formatter: "{c} dB",
            show: true,
            position: "top",
            textStyle: {
              color: "rgb(255,255,255,0.9)",
            },
            // color: function (params) {
            //   var index_color = params.value;
            //   console.log(params,"颜色");
              
            //   if (index_color >= 40) {
            //     return "#4992FF";
            //   } else {
            //     return "#FF6E76";
            //   }
            // },
          },
        },
      },
      {
        name:`${t('messages.noiseRange')}(${t('messages.fanwei')}：0-${limit.value}dB)`,
        type: "bar",
        color:'#4992FF'
      },
      {
        name:`${t('messages.noiseexceeded')}(${t('messages.fanwei')}：${limit.value}dB${t('messages.abnormal_Tip_yishang')})`,
        type: "bar",
        color:'#FF6E76'
      }
    ],
  };
    change(echartsData.noise);

};

const change = (item: EDataPersonItem) => {
  let Ebox
    if(!item.box){
     Ebox = proxy.$echarts.init(item.div, "dark");
    }else{
      Ebox = item.box
    }
 
  Ebox.setOption(item.data);
  item.box = Ebox;
};
function setchartWH(width: any, height: any) {
  echartsData.noise!.div = noise.value;
  noise.value.style.height = height + "px";
  noise.value.style.width = width + "px";
  if (echartsData.noise.box) {
    echartsData.noise.box.resize();
  }
}
onMounted(() => {
  // setData()
});

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

<style module></style>
