<template>
  <div class="price-charts">
    <custom-echart-scatter-blister :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
// 随机配色
const colors1 = reactive(['#6beff9', '#e4f116', '#2087e3']);
const dataX = reactive(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);
let legendData = reactive(['最高价', '最低价', '建议价']);

const hexToRGBA = (hex, alpha = 1) => {
  let hexCode = hex.replace('#', '');
  if (hexCode.length === 3) {
    hexCode = hexCode
      .split('')
      .map((char) => char + char)
      .join('');
  }
  const r = parseInt(hexCode.slice(0, 2), 16);
  const g = parseInt(hexCode.slice(2, 4), 16);
  const b = parseInt(hexCode.slice(4, 6), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

let seriesList = computed(() => {
  let list = [];
  if (legendData.length > 0) {
    list = legendData.map((m, index) => {
      let num = [
        [100, 30, 60],
        [10, 2, 3],
        [80, 50, 70],
      ];
      return {
        name: m,
        data: dataX.map((n) => {
          return [
            Number((num[index][0] + Math.random() * 100).toFixed(2)),
            Number((num[index][1] + Math.random() * 100).toFixed(2)),
            Number((num[index][2] + Math.random() * 100).toFixed(2)),
            n,
          ];
        }),
        type: 'scatter',
        symbolSize: (val) => {
          // 获取所有values
          let values = [];

          values = list[index].data
            .map((n) => {
              return n;
            })
            .flat()
            .filter((item) => typeof item === 'number');
          // console.info('values', values);
          // 获取最大值
          const max = Math.max(Math.max(...values));
          // 获取最小值
          const min = Math.min(...values);
          // 定义最大气泡
          const maxSize4Pin = 38;
          // 定义最小气泡
          const minSize4Pin = 8;
          // 固定套路
          var a = (maxSize4Pin - minSize4Pin) / (max - min);
          var b = maxSize4Pin - a * max;
          return a * val[2] + b;
        },
        label: {
          normal: { show: true, formatter: '', position: 'top' },
          emphasis: { show: true, formatter: (param) => param.data[3], position: 'top' },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(25, 100, 150, 0.5)',
          shadowOffsetY: 5,
          color: {
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              { offset: 1, color: hexToRGBA(colors1[index], 1) },
              { offset: 0, color: hexToRGBA(colors1[index], 0.8) },
            ],
            globalCoord: false,
          },
        },
      };
    });
  }

  console.info('list', list);
  return list;
});
const chartsData = reactive({
  option: {
    grid: {
      left: '3%',
      right: '10%',
      bottom: '6%',
      top: '18%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      // formatter: function (params) {
      //   return params.value[3] + ':' + parseInt(params.value[1] * 1000) / 10 + '%';
      // },
    },
    title: {
      text: ' ',
      subtext: ' ',
      left: 'center',
    },
    legend: {
      right: 10,
      top: 5,
      data: legendData,
    },
    xAxis: {
      name: ' ',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    yAxis: {
      name: ' ',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(181,197,221,0.2)',
        },
      },
      scale: true,
    },
  },
  valData: seriesList,
});

onMounted(() => {
  if (chartsData.valData && chartsData.valData.length) {
    chartsData.valData.forEach((m, index) => {
      let num = 100;
      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
    });
  }
});
</script>
<style lang="scss" scoped>
.price-charts {
  height: 100%;
}
</style>
