<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 getOption = () => {
  const chartOption = {
    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)'
    },
    radar: {
      center: ['50%', '50%'],
      radius: '70%',
      startAngle: 90,
      splitNumber: 4,
      shape: 'circle',
      splitArea: {
        areaStyle: {
          color: ['transparent']
        }
      },
      axisLabel: {
        show: false,
        fontSize: 18,
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white' //
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'white' //
        }
      },
      indicator: [
        {
          name: '数据1',
          // // max: 10
        },
        {
          name: '数据2',
          // // max: 10
        },
        {
          name: '数据3',
          // max: 10
        },
        {
          name: '数据4',
          // max: 10
        },
        {
          name: '数据5',
          // max: 10
        },
        {
          name: '数据6',
          // max: 10
        },
        {
          name: '数据7',
          // max: 10
        },
        {
          name: '数据8',
          // max: 10
        }
      ]
    },
    series: props.data.options?.yNames.map((value, index) => {
      return {
        name: props.inputData?.[`x${index + 1}`],
        type: 'radar',
        symbol: 'circle',
        symbolSize: 3,
        areaStyle: {
          normal: {
            color: colorList[index] + '66'
          }
        },
        itemStyle: {
          color: colorList[index] + 'FF',
          borderColor: colorList[index] + '4C',
          borderWidth: 2
        },
        lineStyle: {
          normal: {
            type: 'dashed',

            color: colorList[index] + 'FF',
            width: 1
          }
        },
        data: [(props.inputData?.[`y${index + 1}`] || []).map(e => parseFloat(e))]
      }
    })
  };
  let xData = [props.inputData?.x1 || []];
  let yData = [props.inputData?.y1 || []];
  console.log(chartOption);
  let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
  let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
  Array(length).fill(0).forEach((_, i) => {
    let item = [];
    xData.forEach(e => {
      item.push(e[i]);
    });
    yData.forEach(e => {
      item.push(e[i]);
    });
    source.push(item);
  });
  console.log(source);
  return {
    ...chartOption,
    dataset: {
      source
    }
  };
};
onMounted(() => {
  chart = echarts.init(chartRef.value, 'macarons', {
    renderer: 'svg'
  });
  chart.setOption(getOption(), true);
});
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(), true);
  }
}, { 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>
