import React, { useCallback, useEffect } from 'react'
import styles from './index.module.scss'
import { Select } from 'antd'
import { iconUrl } from '@/utils/http'
import * as echarts from 'echarts'

const chartData1 = [
  { name: '啤酒产品类', value: 2500 },
  { name: '饮用器皿类', value: 1800 },
  { name: '品牌文化与节庆类', value: 1200 },
  { name: '企业文化与档案类', value: 800 },
  { name: '艺术与礼品类', value: 1000 },
  { name: '工具与设备类', value: 900 },
  { name: '其他综合类', value: 2500 }
]

const chartData2 = [
  { name: '酒类实物', value: 2500 },
  { name: '包装与标识', value: 1800 },
  { name: '杯子', value: 1200 },
  { name: '品牌节庆活动', value: 1300 },
  { name: '品牌视觉传播', value: 1600 },
  { name: '文书档案', value: 1700 },
  { name: '影像资料', value: 2200 },
  { name: '荣誉与表彰', value: 1800 },
  { name: '企业藏品', value: 1800 },
  { name: '其他', value: 1900 }
]

const DEFAULT_COLORS = ['#c11b2d', '#243220', '#24664b', '#8acfb2', '#806e4c', '#988364', '#972d00']

const binData1 = [
  {
    name: '啤酒产品类',
    value: 2500
  },
  {
    name: '饮用器皿类',
    value: 1800
  },
  {
    name: '品牌文化与节庆类',
    value: 1200
  },
  {
    name: '企业历史与档案类',
    value: 800
  },
  {
    name: '艺术与礼品类',
    value: 1000
  },
  {
    name: '工具与设备类',
    value: 900
  },
  {
    name: '其他综合类',
    value: 600
  }
]

const binData2 = [
  {
    name: '酒起',
    value: 400
  },
  {
    name: '杯子',
    value: 100
  },
  {
    name: '护肤品',
    value: 100
  },
  {
    name: '冰箱贴',
    value: 100
  },
  {
    name: '衣服',
    value: 100
  }
]

// 先写一些静态的
function A1statistics() {
  // 生成柱状图
  const initEchFu = useCallback((data: any[], dom: any) => {
    if (!dom) return

    // 计算总数用于百分比
    const total = data.reduce((sum, item) => sum + item.value, 0)
    const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)

    const option: echarts.EChartsOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: any) => {
          const param = params[0]
          return `
                  <div style="font-weight: bold;">${param.name}</div>
                  <div>数量: ${param.value}</div>
                  <div>占比: ${((param.value / total) * 100).toFixed(1) + '%'}</div>
                `
        },
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#ddd',
        textStyle: {
          color: '#000'
        }
      },
      grid: {
        left: '5%',
        right: '5%',
        // 减小底部距离 - 调整这个值可以让柱子更靠近底部
        bottom: '5%',
        top: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: data.map(item => item.name),
        axisLabel: {
          interval: 0,
          rotate: 30,
          fontSize: 12,
          color: '#000',
          margin: 15 // 调整标签与柱子的距离
        },
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        },
        axisTick: {
          show: true,
          alignWithLabel: true,
          length: 4
        },
        // 调整X轴位置，使其更靠近柱子底部
        offset: 10
      },
      yAxis: {
        type: 'value',
        name: '',
        nameTextStyle: {
          fontSize: 14,
          color: '#000',
          padding: [0, 0, 0, 10]
        },
        axisLabel: {
          fontSize: 12,
          color: '#000',
          formatter: (value: number) => {
            if (value >= 1000) {
              return `${value / 1000}k`
            }
            return value.toString()
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#e0e0e0'
          }
        },
        // 设置Y轴最大值
        max: 3000,
        min: 0,
        // 调整Y轴刻度
        interval: 500
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: data.map((item, index) => ({
            value: item.value,
            percentage: ((item.value / total) * 100).toFixed(1) + '%',
            // 为每个柱子设置独立的渐变
            itemStyle: {
              // 关键修改：使用线性渐变实现单个柱子的渐变效果
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 0,0表示起点，0,1表示终点（垂直方向渐变）
                [
                  { offset: 0, color: '#bb1e2e' }, // 顶部颜色
                  { offset: 1, color: '#29644a' } // 底部颜色（更浅/白色）
                ]
              ),
              borderRadius: [10, 10, 10, 10],
              // 添加阴影效果增强立体感
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 4,
              shadowOffsetY: 2
            }
          })),
          barWidth: '50%', // 稍微调窄柱子
          // 调整标签位置和样式
          label: {
            show: true,
            position: 'top',
            formatter: (params: any) => {
              const itemData = params.data
              return `${itemData.value}\n${((itemData.value / total) * 100).toFixed(1) + '%'}`
            },
            fontSize: 10,
            fontWeight: 'bold',
            color: '#000',
            lineHeight: 16
          },

          emphasis: {
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 10,
              shadowOffsetY: 3
            }
          }
        }
      ]
    }

    myChart.setOption(option)
  }, [])

  // 生成饼图
  const binInitFu = useCallback((data: any[], dom: any) => {
    if (!dom) return

    // 计算总数用于百分比
    const total = data.reduce((sum, item) => sum + item.value, 0)

    const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)
    const option = {
      color: DEFAULT_COLORS, // 设置颜色方案
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        left: '52%',
        top: 'center',
        itemGap: 15,
        textStyle: {
          fontSize: 12
        },
        formatter: function (name: string) {
          const item = data.find(d => d.name === name)
          if (item) {
            const percent = ((item.value / total) * 100).toFixed(1)
            return `${name}  ${item.value}  ${percent}%`
          }
          return name
        }
      },
      series: [
        {
          name: '品类分布',
          type: 'pie',
          center: ['25%', '50%'], // 设置饼图中心位置
          radius: ['50%', '90%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 0,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: data.map(item => ({
            name: item.name,
            value: item.value
          }))
        }
      ]
    }
    myChart.setOption(option)
  }, [])

  useEffect(() => {
    initEchFu(chartData1, document.querySelector('#echBox1'))
    initEchFu(chartData2, document.querySelector('#echBox2'))

    binInitFu(binData1, document.querySelector('#echBox3'))
    binInitFu(binData2, document.querySelector('#echBox4'))
  }, [binInitFu, initEchFu])

  return (
    <div className={styles.A1statistics}>
      <div className='pageTitle'>数据统计</div>

      <div className='A1_1'>
        <div>
          <div>
            <img src={iconUrl + '/a11.png'} alt='' />
            <h3>藏品总数</h3>
          </div>
          <p>
            <span>3741</span>（件/套）
          </p>
        </div>
        <div>
          <div>
            <img src={iconUrl + '/a22.png'} alt='' />
            <h3>藏品总数量</h3>
          </div>
          <p>
            <span>5834</span>（个）
          </p>
        </div>

        <div className='A1_1_3'>
          <div>
            <img src={iconUrl + '/a33.png'} alt='' />
            <h3>定级文物数量</h3>
          </div>
          <p>
            <span>120</span>（件/套）
            <i>
              一级<i>20</i>
            </i>
            <i>
              二级<i>30</i>
            </i>
            <i>
              三级<i>40</i>
            </i>
            <i>
              一般<i>30</i>
            </i>
          </p>
        </div>

        <div className='A1_1_4'>
          <div>
            <img src={iconUrl + '/a44.png'} alt='' />
            <h3>年度新增产品数量</h3>
            <div className='A1_1_4_1'>
              <Select
                defaultValue={2026}
                options={[
                  { value: 2026, label: '2026年度' },
                  { value: 2025, label: '2025年度' },
                  { value: 2024, label: '2024年度' }
                ]}
              />
            </div>
          </div>
          <p>
            <span>123</span>（件/套）
          </p>
        </div>
      </div>

      <div className='A1_box'>
        <div className='A1_2'>
          <div className='A1_2row'>
            <div className='A1tit'>一级分类</div>
            <div className='A1_2ech' id='echBox1'></div>
          </div>
          <div className='A1_2row'>
            <div className='A1tit'>二级分类</div>
            <div className='A1_2ech' id='echBox2'></div>
          </div>
        </div>
        <div className='A1_3'>
          <div className='A1_3row'>
            <div className='A1tit2'>
              <div>材质统计</div>
              <Select defaultValue={'杯子'} options={[{ value: '杯子', label: '杯子' }]} />
            </div>
            <div className='A1_3ech' id='echBox3'></div>
          </div>

          <div className='A1_3row'>
            <div className='A1tit2'>
              <div>品类统计</div>
              <Select
                defaultValue={'文创产品'}
                options={[{ value: '文创产品', label: '文创产品' }]}
              />
            </div>
            <div className='A1_3ech' id='echBox4'></div>
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoA1statistics = React.memo(A1statistics)

export default MemoA1statistics
