import React from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'

import ImageLazy from '@/components/ImageLazy'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import noImg from '@/assets/img/noImg.png'
import { MartyrItem } from '@/types/api/martyr'

type RightProps = {
  classN: string
  handleItemClick: (cityId: string, name: string, martyrId: number) => void
}
function Right(props: RightProps) {
  const { list: listAll } = useSelector((state: RootState) => state.Martyr.tableInfo)
  console.log(listAll.length, 'right')

  // const handleItemClick = useCallback(
  //   (cityId: string, name: string) => {
  //     props.setIsAddClassName(true)
  //     props.focusOnCity(cityId)
  //     props.changeTooltipText(cityId, name)
  //     props.setEnableTooltipEvents(false)
  //     props.drawArrows('tap-jinan', ['tap-weifang', 'tap-linyi', 'tap-binzhou', 'tap-dezhou', 'tap-heze', 'tap-jining'])
  //   },
  //   [props]
  // )
  return (
    <div className={classNames(styles.Right, props.classN)}>
      <div className='infoContainner'>
        <div className='mainInfoList'>
          {listAll.map((item: MartyrItem, index: number) => {
            return (
              <div
                className='infoItem'
                onClick={() => props.handleItemClick(item.cityId, item.name, item.id)}
                key={index}
              >
                <div className='mainInfo'>
                  <div className='left'>
                    <div className='name'>
                      <div className='Name'>{item.name}</div>
                      <div className='other'>{item.dictPanName}</div>
                    </div>
                    <div className='gender'>
                      {item.gender} | {item.nation}
                    </div>
                    <div className='birth'>
                      {item.dateStart} - {item.dateEnd}
                    </div>
                    <div className='home'>{`籍贯：${item.nativeProvince}-${item.nativeCity}-${item.nativeRegion}`}</div>
                    <div className='tombAddress'>{` 墓区位置：${item.tombAddress}`}</div>
                  </div>

                  <div className='right' onClick={e => e.stopPropagation()}>
                    <ImageLazy
                      width={'100%'}
                      height={'100%'}
                      src={item.thumb}
                      srcBig={item.thumbPc}
                      imgError={noImg}
                    />
                  </div>
                </div>
                <div className='tag'>
                  <div className='label'>{item?.clueType || '寻亲线索'}</div>
                  <div>{item.clueRemark}</div>
                </div>
                {/* <div className='tag'>
                  <div className='label'>线索类型名称</div>
                  <div>这是一段线索说明</div>
                </div> */}
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

const MemoRight = React.memo(Right)

export default MemoRight
