<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-full 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"
    >
      总产值：
      <CountTo
        :startVal="0"
        :endVal="2200202"
        class="font-bold text-18px bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
      />
      万元
    </div>

    <div class="grid grid-cols-2 gap-y-20px gap-x-10px mx-10px mt-18px">
      <div class="flex items-center" v-for="item in cityData" :key="item.slug">
        <!-- <SvgIcon :name="item.slug" :size="40" color="transparent" /> -->
        <img :src="item.icon" alt="" class="w-40px h-40px" srcset="" />
        <div class="text-white ml-6px">
          <div class="text-12px font-bold">{{ item.name }}</div>
          <div class="text-10px font-bold mt-4px">
            <CountTo :startVal="0" :endVal="item.value" class="text-10px font-bold" />
            <span>{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Ref, ref, defineComponent, onBeforeMount, reactive, toRefs, watch } from 'vue'
  import { useECharts } from '/@/hooks/web/useECharts'
  import { getCitydataStatistics, getCropYieldCategoryStatics } from '/@/api/sys/other'
  import { CountTo } from '/@/components/CountTo'
  import { useVContext } from '../useVContext'
  import { deepMerge } from '/@/utils'
  import cityIcon1 from '/@/assets/images/city-1.png'
  import cityIcon2 from '/@/assets/images/city-2.png'
  import cityIcon3 from '/@/assets/images/city-3.png'
  import cityIcon4 from '/@/assets/images/city-4.png'

  interface cityDataType {
    name: string
    slug: string
    unit: string
    value: number
    icon: string
  }

  const cityDefaultData = [
    {
      slug: 'city_data_area',
      name: '面积',
      value: '0',
      unit: '平方公里',
      icon: cityIcon1,
    },
    {
      slug: 'city_data_population',
      name: '人口',
      value: '0',
      unit: '万人',
      icon: cityIcon2,
    },
    {
      slug: 'city_data_street',
      name: '镇街',
      value: '0',
      unit: '个',
      icon: cityIcon3,
    },
    {
      slug: 'city_data_cultivated_area',
      name: '耕地',
      value: '0',
      unit: '万亩',
      icon: cityIcon4,
    },
  ]

  export default defineComponent({
    components: {
      CountTo,
    },
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null)
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
      const Data = reactive({
        cityData: [] as cityDataType[],
        lyqkData: [] as any,
      })

      const { rootEmitter } = useVContext()

      function chatInit() {
        setOptions({
          legend: {
            show: false,
          },
          series: [
            {
              name: '隆昌农业产业情况',
              type: 'pie',
              radius: '70%',
              color: ['#c487ee', '#deb140', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
              label: {
                show: true,
              },
              data: Data.lyqkData,
            },
          ],
        })
      }

      async function getCropYieldCategory(params = { year: '2022', base_id: null }) {
        const { list } = await getCropYieldCategoryStatics(params)
        const arr = [] as { value: string; name: string }[]
        for (const key in list) {
          if (Object.prototype.hasOwnProperty.call(list, key)) {
            arr.push({
              value: list[key],
              name: key,
            })
          }
        }
        Data.lyqkData = arr
      }

      //获取所有
      async function getCitydata() {
        const resData = await getCitydataStatistics()
        const temp = [] as cityDataType[]
        cityDefaultData.forEach((e) => {
          const obj = deepMerge({}, e)
          const item: cityDataType = resData.find((r) => r.slug == e.slug)
          if (item) {
            obj.value = Number(item.value)
            obj.unit = item.unit
          }
          temp.push(obj)
        })
        Data.cityData = temp
      }

      function onChangeMap(el) {
        const keys = ['city_data_street']
        const temp = [] as cityDataType[]
        cityDefaultData.forEach((e) => {
          const obj = deepMerge({}, e)
          if (!keys.includes(e.slug)) {
            //面积
            if (e.slug == 'city_data_area') {
              obj.value = Number(el.areas)
              obj.unit = '亩'
            } else if (e.slug == 'city_data_population') {
              obj.value = el.workforce
            } else if (e.slug == 'city_data_cultivated_area') {
              obj.value = el.cultivated
            }
            temp.push(obj)
          }
        })
        Data.cityData = temp
      }

      onBeforeMount(() => {
        getCitydata()
        getCropYieldCategory()
        //地图点击
        rootEmitter.on('map:click', (e) => {
          onChangeMap(e)
        })
        //地图返回
        rootEmitter.on('map:back', () => {
          getCitydata()
        })
      })

      watch(
        () => Data.lyqkData,
        () => {
          chatInit()
        },
      )

      return {
        chartRef,
        ...toRefs(Data),
      }
    },
  })
</script>

<style scoped></style>
