<template>
  <!-- 水闸统计图 -->
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import { guid,parseTime } from '@/utils/ruoyi';
import { nextTick } from 'vue';
const id = guid();
const myChart = shallowRef('');
import * as echarts from 'echarts';

const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //x轴数据
  AllData: {
    type: Object,
    default: () => {},
  },
  //   //x轴数据
  //   XAxis: {
  //     type: Array,
  //     default: () => [],
  //   },
  //   //y轴数据
  //   YAxis: {
  //     type: Array,
  //     default: () => [],
  //   },
});

watch(
  () => props.refresh,
  (value) => {
    console.log('???????');
    //先销毁实例
    myChart.value && myChart.value.dispose();
    init();
  },
  {
    deep: true,
  }
);

function init() {
  console.log('object,AllData', props.AllData);
  myChart.value = echarts.init(document.getElementById(id));
  var option = {
    tooltip: {
      trigger: 'axis',
      // backgroundColor: "#004284",
      // borderColor: "#0B9BFF",
      // borderRadius: 6, // 设置圆角大小
      // // 自定义提示框文本样
      // textStyle: {
      //   // 字体颜色
      //   color: "white",
      //   // 字体大小
      //   fontSize: 14,
      // },
      formatter: function (params) {
        var res = params[0].name + '<br/>' + params[0].marker + '液位(m)：' + params[0].value;
        var texts = '';
        if (params[1].value === 1) {
          texts = '全关';
        } else if (params[1].value === 2) {
          texts = '开';
        } else if (params[1].value === 3) {
          texts = '全开';
        }
        res = res + '<br/>' + '状态：' + texts;
        return res;
      },
    },
    legend: {
      data: [
        { name: props.AllData.yAxis3_Name, icon: 'rect' },
        // { name: "开关", icon: "rect" },
      ],
      textStyle: {
        fontSize: 12,
        color: '#fff',
        fontSize: 12,
      },
    },
    grid: {
      top: '20%',
      left: '24px',
      right: '6%',
      bottom: '8%',
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: props.AllData.xAxis,
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        fontFamily: 'AlibabaPuHuiTi',
        formatter: function (params) {
          return parseTime(params, '{h}:{i}');
        },
      },
    },
    dataZoom: [
      {
        // show: true,
        show: false,
        height: 4,
        bottom: 10,
        start: 0,
        end: 100,
        handleSize: '100%',
        fillerColor: '#94FA41',
        borderColor: 'transparent',
        backgroundColor: 'rgba(148, 250, 65, 0.2)',
        handleStyle: {
          color: '#94FA41',
        },
        moveHandleSize: 0,
        textStyle: {
          color: '#fff',
        },
      },
      {
        type: 'inside',
        show: true,
        height: 15,
        start: 0,
        end: 100,
      },
    ],
    yAxis: [
      {
        name: props.AllData.yAxis3_Name,
        type: 'value',
        // minInterval: 1,
        min: 0,
        axisLabel: {
          color: '#409EFF',
          show: true,
          formatter: function (value) {
            return value.toFixed(2); // 保留两位小数
          },
        },
        nameTextStyle: {
          color: '#409EFF',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#2161a8',
          },
        },
        alignTicks: true,
        offset: 0,
      },
      {
        name: '闸门状态',
        type: 'value',
        max: 3,
        // min: 0,
        // minInterval: 1,
        axisLabel: {
          // color: "#409EFF",
          color: function (params) {
            console.log('paramsparams', params);
            if (params == 3) {
              return '#F56C6C';
            } else if (params == 2) {
              return '#E6A23C';
            } else {
              return '#909399';
            }
          },
          show: true,
          formatter: function (value) {
            var texts = [];
            if (value === 1) {
              texts.push('全关');
            } else if (value === 2) {
              texts.push('开');
            } else if (value === 3) {
              texts.push('全开');
            }
            return texts;
          },
        },
        nameTextStyle: {
          color: '#409EFF',
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#2161a8',
          },
        },
        // alignTicks: true,
        offset: 0,
      },
    ],
    series: [
      {
        name: props.AllData.yAxis3_Name,
        type: 'line',
        data: props.AllData.yAxis3,
        // 修改折线颜色
        lineStyle: {
          color: '#409EFF', // 折线颜色
          width: 2, // 折线宽度
        },
        // 修改数据点颜色
        itemStyle: {
          color: '#409EFF', // 数据点颜色
        },
      },
      {
        name: '开关',
        type: 'bar',
        barGap: 0,
        barWidth: '100%',
        yAxisIndex: 1, //指定需要使用的Y轴

        itemStyle: {
          color: '#909399',
          color: function (params) {
            if (params.value == 3) {
              return '#F56C6C';
            } else if (params.value == 2) {
              return '#E6A23C';
            } else {
              return '#909399';
            }
          },
        },
        data: props.AllData.yAxis2,
        // data: [1,2,3,1,2,3,3,2,1,1,2,2,2,2,3,3,3,3,3,1,1,1,1,1,2,3,1,2,3,3,2,1,1,2,2,2,2,3,3,3,3,3,1,1,1,1],
      },
    ],
  };

  option && myChart.value.setOption(option);
}

function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
onMounted(() => {
  nextTick(() => {
    init();
    window.addEventListener('resize', resizeTheChart);
  });
});
</script>