import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'

import * as echarts from 'echarts/core'
import { TitleComponent, TooltipComponent } from 'echarts/components'
import { GraphChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { Button } from 'antd'
import A1relation from '../A1relation'
import { A1_APIgetRRlist } from '@/store/action/A1record'
import { A1ListSelectType, A1RRlistType } from '../data'

echarts.use([TitleComponent, TooltipComponent, GraphChart, CanvasRenderer])

type Props = {
  sId: number
  sName: string
  listAllRes: A1ListSelectType
}

function A1echarts({ sId, sName, listAllRes }: Props) {
  const [oldList, setOldList] = useState<A1RRlistType[]>([])

  const initFu = useCallback(async () => {
    const res = await A1_APIgetRRlist(sId)
    if (res.code === 0) {
      const listTemp: A1RRlistType[] = res.data || []

      setOldList(listTemp)

      const list1: any[] = []
      const list2: any[] = []

      listTemp.forEach((v, i) => {
        list1.push({ name: v.moduleName, symbolSize: [60, 60] })

        list2.push({ source: 0, target: i + 1, value: v.relationModule })
        list2.push({ source: i + 1, target: 0, value: v.relationMartyr })
      })

      setTimeout(() => {
        const dom: HTMLDivElement = document.querySelector('#A1echarts')!
        const myChart = echarts.getInstanceByDom(dom) || echarts.init(dom)

        const option = {
          series: [
            {
              type: 'graph', // 图表类型为关系图
              layout: 'force', // 使用力导向布局
              emphasis: { focus: 'adjacency' }, // 高亮时显示相邻节点和边
              force: {
                repulsion: 1000, // 节点之间的斥力大小
                edgeLength: 150 // 边的理想长度
              },
              symbolSize: 70, // 默认节点大小
              roam: true, // 允许缩放和平移
              // draggable: true, // 允许节点拖动（已注释）
              edgeSymbol: ['arrow'], // 边的箭头样式
              label: {
                show: true, // 显示节点标签
                position: 'inside', // 标签显示在节点内部
                color: 'black' // 标签默认颜色
              },
              edgeLabel: {
                show: true, // 显示边标签
                fontSize: 14, // 边标签字体大小
                color: 'red', // 边标签颜色
                formatter: '{c}', // 显示边的value值
                rotate: 0 // 强制边标签文字水平显示（新增）
              },
              itemStyle: {
                borderColor: '#d9622c', // 节点边框颜色
                borderWidth: 2, // 节点边框宽度
                shadowBlur: 10, // 阴影模糊大小
                shadowColor: '#d9622c', // 阴影颜色
                color: '#fff' // 节点默认颜色
              },
              lineStyle: {
                opacity: 0.9, // 边透明度
                width: 2, // 边宽度
                curveness: 0.3, // 边弯曲度
                color: {
                  // 边颜色使用线性渐变
                  type: 'linear',
                  colorStops: [
                    {
                      offset: 0,
                      color: '#e99a75ff'
                    },
                    {
                      offset: 1,
                      color: '#d9622c'
                    }
                  ]
                }
              },
              data: [
                // 节点数据
                {
                  name: sName, // 节点名称
                  symbolSize: [80, 80], // 节点大小（宽高）
                  label: {
                    color: '#fff', // 标签颜色
                    fontSize: 16, // 标签字体大小
                    fontWeight: 'bold' // 标签字体粗细
                  },
                  itemStyle: {
                    color: '#d9622c' // 节点颜色
                  }
                },
                ...list1
              ],
              links: list2
            }
          ]
        }

        option && myChart.setOption(option)
      }, 200)
    }
  }, [sId, sName])

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

  // 编辑关系图
  const [showId, setShowId] = useState(0)

  return (
    <div className={styles.A1echarts}>
      <div id='A1echarts'></div>

      <div className='A1ECtop'>
        <div>人物关系图</div>
        <Button type='primary' onClick={() => setShowId(sId)}>
          编辑
        </Button>
      </div>

      {showId ? (
        <A1relation
          sId={showId}
          sName={sName}
          closeFu={() => setShowId(0)}
          upDataFu={initFu}
          oldList={oldList}
          listAllResTemp={listAllRes}
        />
      ) : null}
    </div>
  )
}

const MemoA1echarts = React.memo(A1echarts)

export default MemoA1echarts
