import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import A1selectDate from './A1selectDate'
import { echartsFu1, echartsFu2, echartsFu3, echartsFu4 } from './data'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'

const dataTemp = [
  [
    { value: 1048, name: '瓷器 50%' },
    { value: 735, name: '钱币 50%' },
    { value: 580, name: '陶器 50%' },
    { value: 580, name: '铜器 50%' }
  ],
  [
    { value: 735, name: '不通过 50%' },
    { value: 580, name: '待审批 50%' },
    { value: 580, name: '已完成 50%' }
  ]
]

function A1dataSta() {
  // 待完善 跳转 和 数据

  // 加载折线图，固定12个月
  const echartRef1 = useRef<HTMLDivElement>(null)
  useEffect(() => {
    echartsFu1(echartRef1.current!)
  }, [])

  // 入藏数据 下拉框
  const [value1, setValue1] = useState('30')

  const getInfo1 = useCallback(async () => {
    console.log('入藏数据', value1)
  }, [value1])

  useEffect(() => {
    getInfo1()
  }, [getInfo1])

  // 加载 中间的 3个饼图
  const echartRefBin1 = useRef<HTMLDivElement>(null)
  const echartRefBin2 = useRef<HTMLDivElement>(null)
  const echartRefBin3 = useRef<HTMLDivElement>(null)

  const getInfo2 = useCallback(() => {
    echartsFu2(echartRefBin1.current!, '类别', 0, dataTemp[0])
    echartsFu2(echartRefBin2.current!, '年代', 0, dataTemp[0])
    echartsFu2(echartRefBin3.current!, '级别', 0, dataTemp[0])
  }, [])

  useEffect(() => {
    getInfo2()
  }, [getInfo2])

  // 加载2个半圆
  const echartRefYuan = useRef<HTMLDivElement>(null)

  const getInfo3 = useCallback(() => {
    echartsFu3(echartRefYuan.current!)
  }, [])

  useEffect(() => {
    getInfo3()
  }, [getInfo3])

  // 藏品维护 下拉框
  const [value2, setValue2] = useState('30')

  const getInfo4 = useCallback(async () => {
    console.log('藏品维护', value2)
  }, [value2])

  useEffect(() => {
    getInfo4()
  }, [getInfo4])

  // 流程数据饼图
  const echartRefBin4 = useRef<HTMLDivElement>(null)

  const getInfo5 = useCallback(() => {
    echartsFu2(echartRefBin4.current!, '423', 1, dataTemp[1])
  }, [])

  useEffect(() => {
    getInfo5()
  }, [getInfo5])

  // 展览数据饼图
  const echartRefBin5 = useRef<HTMLDivElement>(null)
  const echartRefBin6 = useRef<HTMLDivElement>(null)
  // 柱壮图
  const echartRefBin7 = useRef<HTMLDivElement>(null)

  const getInfo6 = useCallback(() => {
    echartsFu2(echartRefBin5.current!, '展览41场', 1, dataTemp[1])
    echartsFu2(echartRefBin6.current!, '展品9999件', 1, dataTemp[1])
    echartsFu4(echartRefBin7.current!)
  }, [])

  useEffect(() => {
    getInfo6()
  }, [getInfo6])

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

      {/* --------------- */}
      <div className='A1box1'>
        <div className='A1box1ll'>
          <div className='A1box1ll1'>
            <div className='A1tit'>入藏数据</div>
            <A1selectDate value={value1} setValue={val => setValue1(val)} />
          </div>
          <div className='A1box1ll2'>
            <div className='A1card'>
              <p>藏品征集</p>
              <div>124件</div>
            </div>
            <div className='A1card'>
              <p>藏品鉴定</p>
              <div>124件</div>
            </div>
            <div className='A1card'>
              <p>藏品入馆</p>
              <div>124件</div>
            </div>
            <div className='A1card'>
              <p>藏品入藏</p>
              <div>124件</div>
            </div>
          </div>
        </div>
        <div className='A1box1rr' ref={echartRef1}></div>
      </div>
      {/* --------------- */}
      <div className='A1box2'>
        <div className='A1tit'>藏品数据</div>
        <div className='A1box2main'>
          <div className='A1box2ll A1card'>
            <span>藏品总账件数</span>
            <p>5324件</p>
            <div className='A1_2llbs'>
              52件
              <CaretUpOutlined style={{ color: '#ff2121' }} />
              <CaretDownOutlined style={{ color: 'green' }} />
              <span>相比上周</span>
            </div>
          </div>
          <div className='A1box2rr'>
            <div ref={echartRefBin1}></div>
            <div ref={echartRefBin2}></div>
            <div ref={echartRefBin3}></div>
          </div>
        </div>
      </div>
      {/* --------------- */}
      <div className='A1box3'>
        <div className='A1box3ll'>
          <div className='A1box3ll1'>
            <div className='A1tit'>库房数据</div>
            <div className='A1box3ll1_1 A1card'>
              <div>在库数量</div>
              <p>5004件</p>
            </div>
            <div className='A1box3ll1_1 A1card'>
              <div>库位数量</div>
              <p>10044处</p>
              <span>
                <span>闲置率</span> 52%
              </span>
            </div>
          </div>
          <div className='A1box3ll2'>
            <div className='A1box3ll2Ech' ref={echartRefYuan}></div>
            <div className='A1box3ll2Txt'>2025年3月19日盘点</div>
            <div className='A1box3ll2Txt'>2025年3月20日盘点</div>
          </div>
        </div>
        <div className='A1box1ll A1box3rr'>
          <div className='A1box1ll1'>
            <div className='A1tit'>藏品维护</div>
            <A1selectDate value={value2} setValue={val => setValue2(val)} />
          </div>
          <div className='A1box1ll2'>
            <div className='A1card'>
              <p>事故登记</p>
              <div>124件</div>
            </div>
            <div className='A1card'>
              <p>残损登记</p>
              <div>124件</div>
            </div>
            <div className='A1card'>
              <p>现状登记</p>
              <div>124件</div>
            </div>
            <div className='A1card'>
              <p>文物修复</p>
              <div>124件</div>
            </div>
          </div>
        </div>
      </div>
      {/* --------------- */}
      <div className='A1box4'>
        <div className='A1box4ll'>
          <div className='A1tit'>流程数据</div>
          <div className='A1box4llEch'>
            <div ref={echartRefBin4}></div>
          </div>
        </div>
        <div className='A1box4rr'>
          <div className='A1tit'>展览数据</div>
          <div className='A1box4rr1' ref={echartRefBin5}></div>
          <div className='A1box4rr1' ref={echartRefBin6}></div>
          <div className='A1box4rr2' ref={echartRefBin7}></div>
        </div>
      </div>
    </div>
  )
}

const MemoA1dataSta = React.memo(A1dataSta)

export default MemoA1dataSta
