<template>
  <div class="w-314px">
    <div
      class="text-18px mt-19px text-center bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
      >隆昌农业产业情况</div
    >
    <div class="w-200px h-200px mx-auto mt-10px" ref="chartRef"> </div>
    <div
      class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] text-center mt-10px"
    >
      总产值：2200202万元
    </div>

    <div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
      <div class="flex items-center">
        <SvgIcon name="mj-icon" :size="40" color="transparent" />
        <div class="text-white ml-6px">
          <div class="text-12px font-bold">面积</div>
          <div class="text-10px font-bold mt-4px">794.41 平方公里</div>
        </div>
      </div>
      <div class="flex items-center">
        <SvgIcon name="mj-icon" :size="40" color="transparent" />
        <div class="text-white ml-6px">
          <div class="text-12px font-bold">人口</div>
          <div class="text-10px font-bold mt-4px">794.41 万人</div>
        </div>
      </div>
      <div class="flex items-center">
        <SvgIcon name="mj-icon" :size="40" color="transparent" />
        <div class="text-white ml-6px">
          <div class="text-12px font-bold">镇街</div>
          <div class="text-10px font-bold mt-4px">13个</div>
        </div>
      </div>
      <div class="flex items-center">
        <SvgIcon name="mj-icon" :size="40" color="transparent" />
        <div class="text-white ml-6px">
          <div class="text-12px font-bold">耕地</div>
          <div class="text-10px font-bold mt-4px">794.41 平方公里</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue'
  import { useECharts } from '/@/hooks/web/useECharts'
  import { SvgIcon } from '/@/components/Icon'
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
  })
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
  watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return
      }
      setOptions({
        legend: {
          show: false,
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '90%',
            label: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
          },
        ],
      })
    },
    {
      immediate: true,
    },
  )
</script>

<style scoped></style>
