<template>
  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" :is-series="true" />
</template>

<script setup>
import { reactive } from 'vue';

const rawData = [
  { name: '勐撒镇', type: '种子农药', value: 15 },
  { name: '勐撒镇', type: '化肥', value: 30 },
  { name: '勐撒镇', type: '农药', value: 22 },
  { name: '勐永镇', type: '种子农药', value: 18 },
  { name: '勐永镇', type: '化肥', value: 28 },
  { name: '勐永镇', type: '农药', value: 20 },
  { name: '孟定镇', type: '种子农药', value: 21 },
  { name: '孟定镇', type: '化肥', value: 25 },
  { name: '孟定镇', type: '农药', value: 24 },
  { name: '勐简乡', type: '种子农药', value: 13 },
  { name: '勐简乡', type: '化肥', value: 20 },
  { name: '勐简乡', type: '农药', value: 15 },
  { name: '贺派乡', type: '种子农药', value: 17 },
  { name: '贺派乡', type: '化肥', value: 18 },
  { name: '贺派乡', type: '农药', value: 16 },
  { name: '芒洪乡', type: '种子农药', value: 14 },
  { name: '芒洪乡', type: '化肥', value: 23 },
  { name: '芒洪乡', type: '农药', value: 21 },
  { name: '大兴乡', type: '种子农药', value: 12 },
  { name: '大兴乡', type: '化肥', value: 17 },
  { name: '大兴乡', type: '农药', value: 14 },
  { name: '耿马镇', type: '种子农药', value: 19 },
  { name: '耿马镇', type: '化肥', value: 26 },
  { name: '耿马镇', type: '农药', value: 23 },
];

const towns = ['勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '芒洪乡', '大兴乡', '耿马镇'];
const types = ['种子农药', '化肥', '农药'];
const colors = ['#15EB90', '#F3F70F', '#08DFE4'];

const series = types.map((type, idx) => {
  return {
    name: type,
    type: 'bar',
    barWidth: 16,
    stack: 'total',
    itemStyle: {
      color: colors[idx],
      barBorderRadius: 8,
      shadowColor: colors[idx],
      // shadowBlur: 8,
      shadowOffsetY: -16,
    },
    z: 10 - idx,
    data: towns.map((town) => {
      const found = rawData.find((d) => d.name === town && d.type === type);
      return found ? found.value : 0;
    }),
  };
});

const state = reactive({
  data: rawData,
  option: {
    legend: {
      show: false,
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      axisLine: {
        lineStyle: {
          opacity: 1,
          width: 0,
        },
      },
      axisLabel: {
        margin: 8,
      },
      axisTick: {
        show: false,
        interval: 0,
      },
      data: towns,
    },
    yAxis: {
      type: 'value',
    },
    color: colors,
    series,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      backgroundColor: 'rgba(0,0,0,0.6);',
      borderColor: '#35d0c0',
      borderRadius: 8,
      formatter: (params) => `
      <div style="font-weight:700;margin-bottom:5px;color:#fff;font-size: 16px;">${params[0].name}</div>
      ${params
        .map(
          (p) => `
        <div style="display:flex;align-items:center;margin:3px 0;color:#fff">
          <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${p.color};margin-right:6px;color:#fff"></span>
          ${p.seriesName}: <span style="font-weight:bold;margin-left:5px;color:#fff">${p.value} 吨</span>
        </div>
      `
        )
        .join('')}
    `,
      extraCssText: 'backdrop-filter: blur(8px);',
    },
  },
});
</script>
