<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
const id = guid();
const myChart = shallowRef('');

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //标题
  title: {
    type: String,
    default: '',
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
  //判断Y轴是否多条
  yAxis: {
    type: Number,
    default: 0,
  },
});
watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
  myChart.value = proxy.echarts.init(document.getElementById(id));
  //   //获取湿度的最大值和最小值
  //   let shiDuMax = Math.max(...props.data.ydata2);
  //   let shiDuMin = Math.min(...props.data.ydata2);
  //   //温度的最大值和最小值
  //   let temMax = Math.max(...props.data.ydata1);
  //   let temMin = Math.min(...props.data.ydata1);
  var xData = (function () {
    var data = [];
    for (var i = 1; i < 13; i++) {
      data.push(i + '月份');
    }
    return data;
  })();
  // 绘制图表
  myChart.value.setOption({
    backgroundColor: '#ffffff',
    title: {
      text: '',
      textStyle: {
        fontSize: 12,
        fontWeight: 400,
      },
      left: 'left',
      top: '5%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        textStyle: {
          color: '#fff',
        },
      },
    },
    grid: {
      top: '15%',
      left: '10%',
      right: '5%',
    },
    legend: {
      icon: 'circle',
      top: '5%',
      left: 'center',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#556677',
      },
    },

    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: props.echartData.xlist,
        axisLine: {
          lineStyle: {
            color: '#DCE2E8',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            color: '#556677',
          },
          // 默认x轴字体大小
          fontSize: 12,
          // margin:文字到x轴的距离
          margin: 15,
        },
        axisPointer: {
          label: {
            // padding: [11, 5, 7],
            padding: [0, 0, 10, 0],
            // 这里的margin和axisLabel的margin要一致!
            margin: 15,
            // 移入时的字体大小
            fontSize: 12,
            backgroundColor: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#fff', // 0% 处的颜色
                },
                {
                  // offset: 0.9,
                  offset: 0.86,

                  color: '#fff', // 0% 处的颜色
                },
                {
                  offset: 0.86,
                  color: '#33c0cd', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#33c0cd', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        boundaryGap: true,
      },
    ],
    yAxis: [
      {
        name: '降雨量(mm)',
        nameTextStyle: {
          color: '#81D3F8', //字体颜色
          align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontSize: 14,
          fontWeight: 400,
        },
        type: 'value',
        position: 'left',
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#556677',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#556677',
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        name: 'SS(mg/L)',
        nameTextStyle: {
          color: '#D9001B', //字体颜色
          align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontSize: 14,
          fontWeight: 400,
        },
        type: 'value',
        position: 'left',
        offset: 80,
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#556677',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#556677',
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        name: '流量(m³/h)',
        nameTextStyle: {
          color: '#95F204', //字体颜色
          align: 'center', // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
          fontSize: 14,
          fontWeight: 400,
        },
        type: 'value',
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#556677',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#556677',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],

    series: [
      {
        name: '降雨量(mm) ',
        type: 'bar',
        barWidth: '40',
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: '#81D3F8',
            barBorderRadius: 0,
            label: {
              show: true,
              position: 'inside',
              formatter: function (p) {
                return p.value > 0 ? p.value : '';
              },
            },
          },
        },
        data: props.echartData.rainfallList,
      },
      {
        name: 'SS(mg/L)',
        type: 'line',
        yAxisIndex: 1,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: '#D9001B',

            barBorderRadius: 0,
            label: {
              show: true,
              position: 'top',
              formatter: function (p) {
                return p.value > 0 ? p.value : '';
              },
            },
          },
        },
        data: props.echartData.ssList,
      },
      {
        name: '流量(m³/h)',
        type: 'line',
        yAxisIndex: 2,
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: '#95F204',
            barBorderRadius: 0,
            label: {
              show: true,
              position: 'top',
              formatter: function (p) {
                return p.value > 0 ? p.value : '';
              },
            },
          },
        },
        data: props.echartData.flowList,
      },
    ],
  });
}
onMounted(() => {
  intChart();
  window.addEventListener('resize', resizeTheChart);
});
</script>