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

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

const jqxxclqkRef = $ref()

const option = {
  grid: {
    x: 60,
    y: 90,
    x2: 30,
    y2: 60,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    icon: 'circle',
    textStyle: {
      fontSize: 14, // 字体大小
      color: '#fff', // 字体颜色
    },
    itemGap: 30,
    x: 'right',
    padding: [10, 30, 0, 0],
    data: [
      {
        name: '已处理',
        itemStyle: {
          color: '#54FFD9',
        },
      },
      {
        name: '未处理',
        itemStyle: {
          color: '#FFF57B',
        },
      },
    ],
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: '12px',
      },
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: 'rgba(83,198,222,0.24)', // 左边线的颜色
        width: '1', // 坐标线的宽度
      },
    },
    data: ['2022年10月1日', '2022年10月2日', '2022年10月3日', '2022年10月4日', '2022年10月5日'],
  },
  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: [
    {
      name: '已处理',
      data: [50, 60, 80, 60, 30],
      type: 'bar',
      barWidth: 10,
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: 'rgba(141,255,238,0.20)',
        },
        {
          offset: 1,
          color: '#54ffd9',
        },
      ]),
    },
    {
      name: '未处理',
      data: [10, 30, 50, 30, 15],
      type: 'bar',
      barWidth: 10,
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: 'rgba(255,251,178,0.20)',
        },
        {
          offset: 1,
          color: '#fff57b',
        },
      ]),
    },
  ],
}
let myChart = null

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

function init() {
  myChart = echarts.init(jqxxclqkRef)
  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="jqxxclqkDiv">
    <div ref="jqxxclqkRef" class="w-full h-full" />
  </div>
</template>
