<template>
  <custom-echart-bar :chart-data="dataList" height="100%" :option="state.option" />
</template>
<script setup>
import { onMounted, reactive, watch } from 'vue';
import { isEmpty } from '@/utils';

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  query: {
    type: String,
    default: '',
  },
});

// 此处数据需要按照类目的重要程度顺序排列
let dataList = reactive([]);

let titles = reactive([]);
let values = reactive([]);
let max = reactive([]);
let maxData = reactive([]);

let barData = reactive([]);

const getValue = () => {
  let arr = [];
  for (let i = 0; i < dataList.length; i++) {
    arr.push(dataList[i].value);
  }
  return arr;
};
const getName = () => {
  let arr = [];
  for (let i = 0; i < dataList.length; i++) {
    arr.push(dataList[i].name);
  }
  return arr;
};

watch(
  () => props.data,
  (val) => {
    if (!isEmpty(val)) {
      dataList = val;
      titles = getName();
      values = getValue();
      console.log(titles);
      console.log(values);
      max = Math.max(...values);
      maxData = dataList.map((item, index) => {
        return {
          value: [max, index],
          name: titles[index],
        };
      });
      console.log(max);
      console.log(maxData);
      barData = dataList.map((item, index) => {
        return {
          value: [item, index],
          name: titles[index],
        };
      });
      console.log(barData);
    }
  },
  { deep: true, immediate: true }
);

const state = reactive({
  option: {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '5%',
      top: '10%',
      containLabel: true,
    },
    tooltip: {
      show: false,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      className: 'custom-tooltip-container', // 自定义父容器类名
      backgroundColor: 'rgba(0,0,0,0.5)',
      borderColor: '#35d0c0',
      formatter: (data) => {
        const params = data[0];
        let str = `<div class="custom-echarts-tips">
                    <span>${params.name}</span><br/>
                    <span>${params.marker} ${params.data}吨</span>
                   </div>`;
        return str;
      },
    },
    barStyle: {
      barWidth: 14,
      showBackground: true,
      itemStyle: {
        borderWidth: 14,
        borderRadius: [10, 10, 10, 10], // 设置柱子的圆角半径
      },
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          { offset: 0, color: 'rgba(1,254,253,0)' },
          { offset: 1, color: '#01fefd' },
        ],
        global: false,
      },
    },
    xAxis: {
      type: 'value',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#eee',
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#ffffff',
        },
      },
      show: false,
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        // 左侧title
        type: 'category',
        data: [...titles].reverse(),
        axisLabel: {
          textStyle: {
            color: '#ffffff',
            fontSize: '16',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      {
        // 右侧数量
        type: 'category',
        inverse: true,
        offset: 10,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#ffffff',
            fontSize: '16',
          },
          formatter: function (value) {
            let str = '{title|' + value + '吨}';
            return str;
          },
          rich: {
            title: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
        data: values,
      },
    ],
  },
});
</script>
