<script setup>
import * as echarts from 'echarts'

const props = defineProps({
  data: [],
})

const bjpjftjRef = $ref()

const option = {
  grid: {
    x: 60,
    y: 80,
    x2: 80,
    y2: 60,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  xAxis: {
    type: 'category',
    axisTick: false,
    axisLabel: {
      // rotate: 45,
      textStyle: {
        color: '#fff',
        fontSize: '12px',
      },
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: 'rgba(83,198,222,0.24)', // 左边线的颜色
        width: '1', // 坐标线的宽度
      },
    },
    data: ['1班', '2班', '3班', '4班', '5班', '6班', '7班', '8班', '9班', '10班'],
  },
  yAxis: {
    type: 'value',
    name: '（人）',
    nameTextStyle: {
      color: '#68D5EA',
      fontSize: '14px',
      padding: [0, 0, 15, -40],
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(83,198,222,0.24)',
        width: 1,
        type: 'solid',
      },
    },
    axisLabel: {
      textStyle: {
        color: '#68D5EA',
        fontSize: '16px',
      },
    },
  },
  dataZoom: [{
    type: 'inside',
    start: 0,
    end: 100,
  }, {
    start: 0,
    end: 100,
    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
    handleSize: '80%',
    handleStyle: {
      color: '#fff',
      shadowBlur: 3,
      shadowColor: '#d5a563',
      shadowOffsetX: 2,
      shadowOffsetY: 2,
    },
    height: 20,
    bottom: '5%',
  }],
  series: [
    {
      data: [120, 200, 150, 80, 120, 200, 150, 80, 120, 80],
      type: 'bar',
      barWidth: 15,
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: 'rgba(0,209,200,0.09)',
        },
        {
          offset: 1,
          color: '#00eae6',
        },
      ]),
    },
  ],
}
let myChart = null

const allData = ref([])
function initData() {
  const arr1 = []
  const arr2 = []
  allData.value.map((item) => {
    arr1.push(item.name)
    arr2.push(item.value)
  })
  option.xAxis.data = [...arr1]
  option.series[0].data = [...arr2]
  nextTick(() => {
    init()
  })
}

function init() {
  myChart = echarts.init(bjpjftjRef)
  option && myChart.setOption(option)
}

watch(
  () => props.data,
  (newVal, oldVal) => {
    if (newVal) {
      allData.value = newVal
      initData()
    }
  },
  { immediate: true },
)

window.addEventListener('resize', async () => {
  myChart?.resize()
})
</script>

<template>
  <div class="bjpjftjDiv">
    <div ref="bjpjftjRef" class="w-full h-full" />
  </div>
</template>
