<template>
  <div class="w-314px flex h-full flex-col">
    <div
      class="text-18px h-60px leading-60px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
      >城镇农业产业情况</div
    >
    <div class="text-right text-11px leading-17px text-white mr-42px"> 单位：万 </div>
    <div :style="{ height: chartHeight + 'px' }" class="mt-20px min-h-200px" ref="chartRef"> </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, Ref, ref, onMounted, computed, watch } from 'vue'
  import { getCropYieldTotalListt } from '/@/api/sys/other'
  // import echarts from '/@/utils/lib/echarts'
  import { useECharts } from '/@/hooks/web/useECharts'
  import { useVisualizationStore } from '/@/store/modules/visualization'
  import { sortBy } from 'lodash-es'

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

  export default defineComponent({
    setup() {
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

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

      const chartHeight = computed(() => {
        return Data.list.length * 34 + Data.list.length * 12
      })

      function chatInit() {
        setOptions({
          legend: {
            show: false,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: {
            max: 'value',
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisPointer: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'category',
            data: Data.list?.map((e) => e.y) ?? [],
            axisLabel: {
              color: '#fff',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              type: 'bar',
              data: Data.list?.map((e) => e.value) ?? [],
              label: {
                show: true,
                position: 'inside',
                color: '#fff',
                valueAnimation: true,
              },
              itemStyle: {
                color: 'rgba(117, 232, 238, 0.5)',
              },
              barWidth: 34,
            },
          ],

          grid: { left: '2%', right: '2%', top: '0%', bottom: '2%', containLabel: true },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear',
        })
      }

      async function getData() {
        const { list } = await getCropYieldTotalListt({
          year: visualizationStore.getYear,
          category_id: null,
        })
        const arr = [] as { value: string | number; y: string | number }[]
        for (const key in list) {
          if (Object.prototype.hasOwnProperty.call(list, key)) {
            arr.push({
              value: list[key],
              y: key,
            })
          }
        }
        Data.list = sortBy(arr, (e) => {
          return e.value
        })

        chatInit()
      }

      watch(
        () => visualizationStore.getYear,
        () => {
          getData()
        },
      )

      onMounted(() => {
        getData()
      })

      return {
        chartHeight,
        chartRef,
      }
    },
  })
</script>

<style scoped></style>
