<template>
  <div
    :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
    <NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />

    <div class="custom-node"
         :style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
      <div style="width: 100%;height: 100%" ref="chartRef" />
    </div>
    <Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
  </div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import * as echarts from 'echarts';

const props = defineProps({
  ratioWidth: {
    type: Number,
    required: false,
    default: 1
  },
  ratioHeight: {
    type: Number,
    required: false,
    default: 1
  },
  isView: {
    type: Boolean,
    required: false
  },
  inputData: {
    type: Object,
    required: false
  },
  id: {
    type: String,
    required: true
  },
  isHideHandle: {
    type: Boolean,
    required: false
  },
  selected: {
    type: Boolean,
    required: false
  },
  data: {
    type: Object,
    required: true
  },
  dimensions: {
    type: Object,
    required: true
  }
});
const chartRef = ref();
let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const defaultOption = {
  title: {
    text: props.data.options.title || '',
    textStyle: {
      fontSize: 12,
      fontWeight: 400,
      color: '#fff'
    },
    left: '0',
    top: '5%'
  },
  legend: {
    show: props.data?.options?.legend || false,
    icon: 'circle',
    top: '5%',
    right: '5%',
    itemWidth: 6,
    itemGap: 20,
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    show: props.data?.options?.tooltip || false,
    trigger: 'axis',
    axisPointer: {
      label: {
        show: true,
        backgroundColor: '#fff',
        color: '#000',
        borderColor: 'rgba(0,0,0,0)',
        shadowColor: 'rgba(0,0,0,0)',
        shadowOffsetY: 0
      },
      lineStyle: {
        width: 0
      }
    },
    backgroundColor: '#fff',
    textStyle: {
      color: '#000'
    },
    padding: [10, 10],
    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
  },
  grid: {
    top: props.data?.options?.gridTop + '%' || '20%',
    left: props.data?.options?.gridLeft + '%' || '20%',
    bottom: props.data?.options?.gridBottom + '%' || '20%',
    right: props.data?.options?.gridRight + '%' || '20%'
  },
  xAxis: [
    {
      name: props.data?.options?.xName || '',
      nameLocation: props.data?.options?.xNameLocation || 'end',
      type: 'category',
      boundaryGap: props.data?.options?.boundaryGap || false,
      axisLine: {
        show: props.data?.options?.xAxisLineShow || false,
        lineStyle: {
          color: props.data?.options?.xAxisLineColor || '#DCE2E8'
        }
      },
      axisTick: {
        show: props.data?.options?.xAxisTickShow || false,
        inside: props.data?.options?.xAxisTickInside || false,
        lineStyle: {
          color: props.data?.options?.xAxisTickColor || '#DCE2E8'
        }
      },
      axisLabel: {
        show: props.data?.options?.xAxisLabelShow || false,
        interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
        inside: props.data?.options?.xAxisLabelInside || false,
        formatter: props.data?.options?.xAxisLabelFormatter || null,
        rotate: props.data?.options?.xAxisLabelRotate || 0,
        color: props.data?.options?.xAxisLabelColor || '#fff',
        fontSize: props.data?.options?.xAxisLabelFontSize || 12,
        margin: props.data?.options?.xAxisLabelMargin || 3
      },
      splitLine: {
        show: props.data?.options?.xAxisSplitLineShow || false,
        lineStyle: {
          color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
          type: props.data?.options?.xAxisSplitLineType || 'solid'
        }
      }
    }
  ],
  yAxis: [
    {
      name: props.data?.options?.yName || '',
      nameLocation: props.data?.options?.yNameLocation || 'end',
      type: 'value',
      axisLine: {
        show: props.data?.options?.yAxisLineShow || false,
        lineStyle: {
          color: props.data?.options?.yAxisLineColor || '#DCE2E8'
        }
      },
      axisTick: {
        show: props.data?.options?.yAxisTickShow || false,
        inside: props.data?.options?.yAxisTickInside || false,
        lineStyle: {
          color: props.data?.options?.yAxisTickColor || '#DCE2E8'
        }
      },
      axisLabel: {
        show: props.data?.options?.yAxisLabelShow || false,
        interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
        inside: props.data?.options?.yAxisLabelInside || false,
        formatter: props.data?.options?.yAxisLabelFormatter || null,
        rotate: props.data?.options?.yAxisLabelRotate || 0,
        color: props.data?.options?.yAxisLabelColor || '#fff',
        fontSize: props.data?.options?.yAxisLabelFontSize || 12,
        margin: props.data?.options?.yAxisLabelMargin || 3
      },
      splitLine: {
        show: props.data?.options?.yAxisSplitLineShow || false,
        lineStyle: {
          color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
          type: props.data?.options?.yAxisSplitLineType || 'solid'
        }
      },
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        normal: {
          color: props.data?.options?.seriesColor || '#0372FF'
        }
      },
      barMaxWidth: 50,
      label: {
        show: true,
        position: 'top',
        color: '#fff',
        fontSize: 16
      }
    }
  ]
};
const getOption = () => {
  const options = props?.data?.options || {};
  const data = props?.inputData || { x1: [], y1: [] };
  const chartOption = {
      title: {
        text: options.title || ''
      },
      legend: {
        show: options?.legend || false
      },
      tooltip: {
        show: options?.tooltip || false
      },
      grid: {
        top: options?.gridTop + '%' || '20%',
        left: options?.gridLeft + '%' || '20%',
        bottom: options?.gridBottom + '%' || '20%',
        right: options?.gridRight + '%' || '20%'
      },
    xAxis: [
      {
        name: props.data?.options?.xName || '',
        nameLocation: props.data?.options?.xNameLocation || 'end',
        boundaryGap: props.data?.options?.boundaryGap || false,
        axisLine: {
          show: props.data?.options?.xAxisLineShow || false,
          lineStyle: {
            color: props.data?.options?.xAxisLineColor || '#DCE2E8'
          }
        },
        axisTick: {
          show: props.data?.options?.xAxisTickShow || false,
          inside: props.data?.options?.xAxisTickInside || false,
          lineStyle: {
            color: props.data?.options?.xAxisTickColor || '#DCE2E8'
          }
        },
        axisLabel: {
          show: props.data?.options?.xAxisLabelShow || false,
          interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
          inside: props.data?.options?.xAxisLabelInside || false,
          formatter: props.data?.options?.xAxisLabelFormatter || null,
          rotate: props.data?.options?.xAxisLabelRotate || 0,
          color: props.data?.options?.xAxisLabelColor || '#fff',
          fontSize: props.data?.options?.xAxisLabelFontSize || 12,
          margin: props.data?.options?.xAxisLabelMargin || 3
        },
        splitLine: {
          show: props.data?.options?.xAxisSplitLineShow || false,
          lineStyle: {
            color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
            type: props.data?.options?.xAxisSplitLineType || 'solid'
          }
        }
      }
    ],
    yAxis: [
      {
        name: props.data?.options?.yName || '',
        nameLocation: props.data?.options?.yNameLocation || 'end',
        axisLine: {
          show: props.data?.options?.yAxisLineShow || false,
          lineStyle: {
            color: props.data?.options?.yAxisLineColor || '#DCE2E8'
          }
        },
        axisTick: {
          show: props.data?.options?.yAxisTickShow || false,
          inside: props.data?.options?.yAxisTickInside || false,
          lineStyle: {
            color: props.data?.options?.yAxisTickColor || '#DCE2E8'
          }
        },
        axisLabel: {
          show: props.data?.options?.yAxisLabelShow || false,
          interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
          inside: props.data?.options?.yAxisLabelInside || false,
          formatter: props.data?.options?.yAxisLabelFormatter || null,
          rotate: props.data?.options?.yAxisLabelRotate || 0,
          color: props.data?.options?.yAxisLabelColor || '#fff',
          fontSize: props.data?.options?.yAxisLabelFontSize || 12,
          margin: props.data?.options?.yAxisLabelMargin || 3
        },
        splitLine: {
          show: props.data?.options?.yAxisSplitLineShow || false,
          lineStyle: {
            color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
            type: props.data?.options?.yAxisSplitLineType || 'solid'
          }
        }
      }
    ],
    series: [
      {
        backgroundStyle: {
          color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
  let xData = [data?.x1 || []];
  let yData = [data?.y1 || []];
  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
  let source = [['product', ...[options?.yNames?.[0] || '']]];
  Array(length).fill(0).forEach((_, i) => {
    let item = [];
    xData.forEach(e => {
      item.push(e[i]);
    });
    yData.forEach(e => {
      item.push(parseFloat(e[i]));
    });
    source.push(item);
  });
  console.log(source);
  return {
    ...chartOption,
    dataset: {
      source
    }
  };
};
onMounted(() => {
  chart = echarts.init(chartRef.value, 'macarons', {
    renderer: 'svg'
  });
  chart.setOption(defaultOption, true);
  chart && chart.setOption(getOption(), false);
});
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    chart && chart.setOption(getOption(), false);
  }
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
    chart?.resize();
  }
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
  chart.resize();
  emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
  width: 100%;
  height: 100%;
}

</style>
