<template>
  <div class="alarmToday" :id="id" />
</template>

<script setup>
  import { fitChartSize } from '@/utils/dataUtil'
  import { useEchart } from '@/hooks/echart'

  const props = defineProps({
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: () => 123456
    },
    colors: {
      type: Array,
      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
    }
  })

  const { id, setOption } = useEchart()

  const color = ['#409eff', '#29c9c8', '#f6b936']

  var params = {
    color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
    // legend: {
    //   data: ['1月', '2月', '3月', '4月', '5月'],
    //   itemGap: 15,
    //   itemWidth: 10, // 设置宽度
    //   itemHeight: 10,
    //   top: '40',
    //   right: '30',
    //   textStyle: {
    //     color: '#595959'
    //   }
    // },
    grid: {
      left: '4%',
      right: '4%',
      bottom: '5%',
      top: '12%',
      containLabel: true
    },
    xAxis: [
      {
        name: '月份',
        type: 'category',
        axisTick: {
          alignWithLabel: false
        },
        axisLabel: {
          padding: [25, 0, 0, 0]
        },
        data: ['1月', '2月', '3月', '4月', '5月']
      }
    ],
    yAxis: [
      {
        type: 'value',

        axisLabel: {
          formatter: function (params) {
            return params
          }
        }
      }
    ],
    series: []
  }
  var datas = [
    [
      [10, 1, 1, 2, 3],
      [2, 11, 7, 1, 1],
      [5, 7, 5, 1, 1]
    ],
    [
      [1, 1, 1, 2, 3],
      [2, 5, 7, 1, 1],
      [5, 7, 5, 1, 1]
    ],
    [
      [1, 1, 1, 2, 3],
      [2, 5, 7, 1, 1],
      [5, 7, 5, 1, 1]
    ]
  ]

  // 变量和循环处理
  var categories = ['1月', '2月', '3月']
  var years = ['应完成xxx']
  for (var i = 0; i < years.length; i++) {
    var yearData = datas[i] // 获取对应年份的数据
    var seriesData = [] // 用于存储每个年份对应的系列数据
    for (var j = 0; j < categories.length; j++) {
      var itemData = []
      for (var k = 0; k < yearData[j].length; k++) {
        itemData.push(yearData[j][k])
      }
      seriesData.push({
        type: 'bar',
        stack: 'stack' + (i + 1),
        barGap: 0.5,
        barWidth: 20,
        label: {
          show: true,
          // position: 'insideTop',
          align: 'center',
          formatter: function (param) {
            return param.value
          }
        },
        data: itemData,
        name: categories[j]
      })
    }
    Array.prototype.push.apply(params.series, seriesData)
  }

  const init = () => {
    setOption(params)
  }
  //   watch(
  //     () => props.dataList,
  //     (newVal) => {
  //       if (newVal.length > 0) {
  //         nextTick(() => {
  //           defaultCofig.color = props.colors
  //           defaultCofig.series[0].data = props.dataList
  //           defaultCofig.series[0].label.formatter = () => {
  //             return `{value|${props.total}}` + '\n' + `{name|工单总数}`
  //           }
  //           setOption({
  //             ...defaultCofig,
  //             ...props.config
  //           })
  //         })
  //       }
  //     },
  //     { immediate: true }
  //   )
  onMounted(() => {
    init()
  })
</script>

<style scoped lang="scss">
  .alarmToday {
    width: vw(400);
    height: vh(200);
  }
</style>
