<template>
  <view class="relative w-full box-border h-[604rpx] p-4">
    <slot name="default" />
    <view :id="id" class="w-full box-border" style="height: 100%"></view>
  </view>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { ref } from 'vue'
  import { onLoad, onReady } from '@dcloudio/uni-app'

  defineOptions({
    name: 'REcharts',
  })

  // 时间前七天
  function getLastWeekDates() {
    const datesArray = []

    // 获取今天的日期
    const today = new Date()

    // 循环过去7天，包括今天
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(today)
      currentDate.setDate(today.getDate() - i) // 设置为今天之前的第i天

      // 获取当前日期的月份和日期
      const month = currentDate.getMonth() + 1 // 月份从0开始，需加1
      const date = currentDate.getDate()

      // 组装成 [月.日] 格式，并推入数组
      datesArray.unshift(`${month}.${date}`)
    }

    return datesArray
  }

  const props = defineProps({
    yAxisData: {
      type: Array,
      default: [],
    },
    seriesData: {
      type: Array,
      default: [],
    },
    unit: {
      type: String,
      default: '(cm)',
    },
    id: {
      type: String,
      required: true,
    },
  })
  const { unit, seriesData } = toRefs(props)
  const colorList = ['#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#FFAC78', '#F88842']
  const option = ref({
    title: {
      subtext: unit, // 图表标题下方显示单位
      // subtext: unit.value, // 图表标题下方显示单位
      subtextStyle: {
        fontSize: 12,
        color: '#666',
      },
    },
    xAxis: {
      type: 'category',
      data: getLastWeekDates(),
      axisLabel: {
        interval: 0, // 每隔一个标签显示一次
        show: true, // 显示 X 轴标签
        color: '#666', // 设置字体颜色为红色
        fontSize: 12, // 设置字体大小
        // fontWeight: 'bold', // 设置字体加粗
      },
      axisLine: {
        // show: false, // 隐藏 X 轴的线
        alignWithLabel: true,
        lineStyle: {
          color: '#f2f2f2', // 设置 X 轴线的颜色为红色
          width: 2, // 设置线的宽度
          type: 'solid', // 设置线的类型，'solid', 'dashed', 'dotted'
        },
      },
      axisTick: {
        show: false, // 隐藏 X 轴的刻度线（短线）
      },
      boundaryGap: true, // 不让第一个和最后一个数据点贴着轴的两端
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        barWidth: 24, // 设置柱子的宽度为 30px

        itemStyle: {
          color: '#FFAC78', // 设置柱子的颜色为绿色
          color: (params) => {
            return colorList[params.dataIndex] // 根据柱子的索引设置不同的颜色
          },
          borderRadius: [16, 16, 0, 0], // 设置柱子的圆角，上两个角为10px，下两个角不圆角
        },
        // barGap: '30%',
      },
    ],
    barCategoryGap: '100%', // 增加系列之间的间隔
    grid: {
      right: 0,
      bottom: '10%',
    },
  })
  function initChart() {
    console.log(props.id, 'props.id')

    // 获取 DOM 元素
    const chartDom = document.getElementById(props.id)

    // 初始化 Echarts 实例
    const myChart = echarts.init(chartDom)
    // 指定图表的配置项和数据

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option.value)
  }

  watch(
    props,
    () => {
      nextTick(() => {
        // option.value.title.subtext = props.unit
        // option.value.series.data = props.seriesData
        initChart()
      })
    },
    {
      deep: true,
      immediate: true,
    },
  )

  onLoad(() => {
    nextTick(() => {
      initChart()
    })
  })
</script>

<style lang="scss" scoped></style>
