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

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

const kgtqktjtRef = $ref()

const option = {
  grid: {
    x: 60,
    y: 90,
    x2: 100,
    y2: 60,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    textStyle: {
      fontSize: 14, // 字体大小
      color: '#fff', // 字体颜色
    },
    itemGap: 30,
    x: 'right',
    padding: [10, 70, 0, 0],
    data: [
      {
        name: '总人数',
        itemStyle: {
          color: '#228FFE',
        },
      },
      {
        name: '正确人数',
        itemStyle: {
          color: '#6DFE22',
        },
      },
      {
        name: '正确率',
      },
    ],
  },
  xAxis: {
    type: 'category',
    axisTick: false,
    name: '题目名称',
    nameTextStyle: {
      color: '#fff',
      fontSize: '12px',
      verticalAlign: 'top',
      padding: [8, 0, 0, 10],
    },
    axisLabel: {
      textStyle: {
        color: '#fff',
        fontSize: '12px',
      },
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: 'rgba(83,198,222,0.24)', // 左边线的颜色
        width: '1', // 坐标线的宽度
      },
    },
    data: ['第一题', '第二题', '第三题', '第四题', '第五题', '第六题', '第七题', '第八题', '第九题', '第十题'],
  },
  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',
        },
      },
    },
    {
      type: 'value',
      name: '（%）',
      nameTextStyle: {
        color: '#68D5EA',
        fontSize: '14px',
        padding: [0, 0, 15, 40],
      },
      splitLine: {
        show: false,
      },
      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: [120, 200, 150, 80, 120, 200, 150, 80, 120, 80],
      type: 'bar',
      barWidth: 15,
      barGap: 0,
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: 'rgba(34,143,254,0.19)',
        },
        {
          offset: 1,
          color: '#00d3ff',
        },
      ]),
    },
    {
      name: '正确人数',
      data: [100, 100, 50, 80, 100, 80, 50, 10, 60, 40],
      type: 'bar',
      barWidth: 15,
      barGap: 0,
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        {
          offset: 0,
          color: 'rgba(109,254,34,0.19)',
        },
        {
          offset: 1,
          color: '#6dfe22',
        },
      ]),
    },
    {
      name: '正确率',
      type: 'line',
      yAxisIndex: 1,
      symbol: 'circle',
      symbolSize: 5,
      itemStyle: {
        normal: {
          color: '#00ffff', // 改变折线点的颜色
          lineStyle: {
            color: '#00ffff', // 改变折线颜色
          },
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: 'rgba(0, 255, 255, 0.3)' },
              { offset: 1, color: 'rgba(0, 255, 255, 0.01)' },
            ],
          ),
        },
      },
      data: [50, 60, 80, 60, 30, 50, 80, 90, 70, 75],
    },
  ],
}

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

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

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

<template>
  <div class="kgtqktjtDiv">
    <div ref="kgtqktjtRef" class="w-full h-full" />
  </div>
</template>
