<template>
  <Box :title="propsData.name" v-bind="$attrs">
    <div class="h-full flex flex-col w-full">
      <div class="flex-1" ref="chartRef"> </div>
    </div>
  </Box>
</template>

<script lang="ts">
  import { defineComponent, onBeforeMount, unref, reactive, Ref, ref } from 'vue'
  import { getCropYieldQuarterStatics } from '/@/api/sys/other'
  import { useECharts } from '/@/hooks/web/useECharts'
  import Box from './Box.vue'
  import { computed } from '@vue/reactivity'
  import { chartBarColors, chartLineColors } from './colors'
  export default defineComponent({
    components: {
      Box,
    },
    props: {
      data: {
        type: Object,
      },
      index: {
        type: Number,
      },
    },
    setup(props) {
      const propsData: any = computed(() => props.data)

      const chartRef = ref<HTMLDivElement | null>(null)

      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

      const Data = reactive({
        list: [] as any,
      })

      async function getData() {
        const { id } = unref(props.data) as any
        if (!id) return
        const resData = await getCropYieldQuarterStatics({
          crop_id: id,
        })
        const list: any[] = []
        for (const key in resData) {
          if (Object.prototype.hasOwnProperty.call(resData, key)) {
            const obj = resData[key]
            list.push({
              name: obj.name,
              list: Object.keys(obj.list).map((e) => obj.list[e]),
              axis: Object.keys(obj.list).map((e) => e),
            })
          }
        }
        Data.list = list
        chartsInit()
      }

      function chartsInit() {
        const obj = {
          legendData: [] as any,
          series: [] as any,
        }
        const i = Number(props.index) % 2
        const colors = i == 1 ? chartBarColors : chartLineColors
        const type = i == 1 ? 'bar' : 'line'
        Data.list.forEach(({ name, list }, index) => {
          const color = colors[index % colors.length]

          obj.legendData.push(name)

          obj.series.push({
            name: name,
            data: list,
            type: type,
            itemStyle: {
              color: color.itemColor,
            },
          })
        })

        setOptions({
          grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
          legend: {
            show: false,
            data: obj.legendData,
            top: '0%',
            right: '0',
            textStyle: {
              color: '#ffffff',
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          xAxis: {
            type: 'category',
            data: Data.list[0]?.axis,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: '#fff',
            },
          },
          yAxis: [
            {
              type: 'value',
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#8EEEFF',
                  opacity: 0.3,
                },
              },
              axisLabel: {
                color: '#fff',
              },
            },
          ],
          series: obj.series,
        })
      }

      onBeforeMount(() => {
        getData()
      })
      return {
        propsData,
        chartRef,
      }
    },
  })
</script>

<style scoped></style>
