<template>
  <div ref="chartsWarp" class="hot-charts">
    <custom-echart-bubble :chart-data="seriesData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const chartsData = reactive({
  option: {},
  valData: [
    { name: '多菌灵', value: 6833.37 },
    { name: '复合肥', value: 6823.93 },
    { name: '水溶肥', value: 3529.8 },
    { name: '大豆种子', value: 9773.04 },
    { name: '农膜', value: 2992.33 },
    { name: '草甘膦', value: 1448.23 },
    { name: '其他', value: 3800.77 },
  ],
});

let chartsWarp = ref(null);
let seriesData = reactive([]);

const compare = (propertyName) => {
  return (object1, object2) => {
    var value1 = object1[propertyName];
    var value2 = object2[propertyName];
    if (value2 < value1) {
      return 1;
    } else if (value2 > value1) {
      return -1;
    } else {
      return 0;
    }
  };
};

onMounted(() => {
  if (chartsData.valData && chartsData.valData.length) {
    let datas = chartsData.valData.sort(compare('value')).reverse();
    let maxValue = datas[0].value;
    let colors = ['#4983F5', '#3D993D', '#525CCC', '#3344FF', '#39ACE5', '#008099', '#2985CC'];
    let total = datas.reduce((acc, current) => {
      return acc + current.value;
    }, 0);
    for (var i = 0; i < datas.length; i++) {
      let acct = parseFloat((datas[i].value / total).toFixed(2));
      if (acct < 0.2) {
        acct = 0.2;
      }
      if (acct > 0.6) {
        acct = 0.6;
      }
      let reference =
        chartsWarp.value.clientHeight < chartsWarp.value.clientWidth
          ? parseInt(chartsWarp.value.clientHeight)
          : parseInt(chartsWarp.value.clientWidth);

      var ss = parseInt(acct * reference * 1.3);
      var color = colors[i];
      var item = {
        name: datas[i].name,
        value: datas[i].value,
        symbolSize: ss,
        draggable: true,
        itemStyle: {
          normal: {
            shadowBlur: 10,
            shadowColor: color,
            color: color,
          },
        },
      };

      seriesData.push(item);
    }

    console.info('seriesData', seriesData);
  }
});
</script>
<style lang="scss" scoped>
.hot-charts {
  height: 100%;
}
</style>
