<template>
  <div
    :style="{ width: '100%', height: '100%' }"
    ref="chartDom"
  ></div>
  <!-- :style="{ width: props.option.width, height: props.option.height }" -->
</template>

<script>
export default {
  name: 'HsBarChart',
}
</script>
<script setup>
import {
  ref,
  // inject,
  onMounted,
  onBeforeUnmount,
  defineProps,
  watch,
  reactive,
} from 'vue'
import * as echarts from 'echarts'
import merge from 'deepmerge'

// const echarts = inject('echarts')
const chartDom = ref()
let myChart = null
const props = defineProps({
  option: Object,
  data: {
    columns: [],
    rows: [],
  },
})
console.log('ppppp', props.data)
// 横坐标
// let xData = reactive([])
// props.data.rows.map((item) => {
//   xData.push(item.分组字段)
// })
// eslint-disable-next-line vue/no-setup-props-destructure
let keyName = props.data.columns[0]
let xData = reactive([])
props.data.rows.map((item) => {
  xData.push(item[keyName])
})

// series
let series = reactive([])
for (let i = 1; i < props.data.columns.length; i++) {
  series[i - 1] = {
    name: props.data.columns[i],
    type: 'bar',
    emphasis: {
      focus: 'series',
    },
    data: [],
  }
  props.data.rows.map((item) => {
    // console.log("+++", item[chartData.columns[i]]);
    series[i - 1].data.push(item[props.data.columns[i]])
  })
}
console.log('aseries', series, series[1].data)

const defalutOption = reactive({
  color: [
    '#1890FF',
    '#13C2C2',
    '#2EC25B',
    '#FACC14',
    '#EF4864',
    '#8543E0',
    '#d87a80',
    '#9cbbff',
    '#d9d0c7',
    '#87a997',
    '#d49ea2',
    '#5b4947',
    '#1890FF',
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#6f6f6f',
    axisPointer: {
      type: 'shadow',
      // type: "none",
    },
    textStyle: {
      color: '#fff',
    },
    // show: false,
    // showCoent: false,
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  // animation: false,
  yAxis: [
    {
      type: 'value',
    },
  ],
  xAxis: [
    {
      type: 'category',
      data: xData,
      // triggerEvent: true,
    },
  ],
  series: series,
})

// let option = merge(defalutOption, props.option || {})
let option = reactive(merge(defalutOption, props.option || {}))
console.log('----', option)

//重绘图表函数
const resizeHandler = () => {
  console.log('重会  ')
  myChart.resize()
}

const debounce = (fn, delay) => {
  let timer = null //因为闭包 所以变量不会被销毁
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.call(this)
    }, delay)
  }
}
const cancalDebounce = debounce(resizeHandler, 0)

onMounted(() => {
  //配置为 svg 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 Canvas
  myChart = echarts.init(chartDom.value, null, { renderer: 'svg' })
  console.log('chartDom.value', chartDom.value)
  // myChart = echarts.init(chartDom.value);
  myChart.setOption(option, true)
  //自适应不同屏幕时改变图表尺寸
  window.addEventListener('resize', cancalDebounce)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', cancalDebounce)
  myChart.dispose()
})

watch(
  () => option,
  () => {
    myChart.setOption(option, true)
  },
  { deep: true }
)
</script>

<style scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>
