import React, { useState, useCallback, useMemo } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
// import RelationEcharts from './RelationEcharts/index'
import { Timeline, Image, Button } from 'antd'
import store from '@/store'
import { MartyrItem, RelationShipItem } from '@/types/api/martyr'
import { ClueItem } from '@/types/api/clue'
import ImageLazy from '@/components/ImageLazy/index'
// import ImageLazyList from '@/components/ImageLazyList/index'
import imgErr from '@/assets/img/IMGerror.png'
import noImg from '@/assets/img/noImg.png'
import { baseURL } from '@/utils/http'

type DetailProps = {
  classN?: string
  relationList?: RelationShipItem[]
  martyrDetail?: MartyrItem
}
function Detail({ classN, relationList, martyrDetail }: DetailProps) {
  const [currentRelic, setCurrentRelic] = useState<any>('')

  // 预览视频
  const lookFileFu = useCallback((file: string) => {
    store.dispatch({
      type: 'layout/lookDom',
      payload: { src: file, type: 'video' }
    })
  }, [])

  const clueList = useMemo(() => {
    return martyrDetail?.clue
      .map((item: ClueItem) => {
        return {
          ...item,
          status: {
            0: '待确定',
            1: '跟进中',
            2: '已找到',
            3: '未找到',
            4: '作废'
          }[item.status] as string
        }
      })
      .filter((item: ClueItem) => item.status !== '待确定' && item.status !== '作废')
  }, [martyrDetail])

  return (
    <>
      <div className={classNames(styles.detail, classN)}>
        <div
          className={classNames(
            'infoDetailBox',
            !martyrDetail?.life.length && !martyrDetail?.relic.length && 'noInfoDetail'
          )}
        >
          <div className='infoDetail'>
            <div className='scrollContainner'>
              <div className='title_img'>
                <img src={require('@/assets/img/ziliao.png')} alt='' draggable='false' />
              </div>
              <div className='mainInfo'>
                <div className='left'>
                  <img
                    src={martyrDetail?.thumb ? baseURL + martyrDetail?.thumb : noImg}
                    alt=''
                  />
                </div>
                <div className='right'>
                  <div className='name'>
                    <div className='Name'>{martyrDetail?.name}</div>
                    <div className='other'>{martyrDetail?.dictPanName}</div>
                  </div>
                  <div className='gender'>
                    {martyrDetail?.gender === 1 ? '男' : '女' || '未知'}|
                    {martyrDetail?.nation}
                  </div>
                  <div className='birth'>
                    {martyrDetail?.dateStart}-{martyrDetail?.dateEnd}
                  </div>
                  <div className='home'>
                    籍贯：{martyrDetail?.nativeProvince}-{martyrDetail?.nativeCity}-
                    {martyrDetail?.nativeRegion}，{martyrDetail?.nativeAddress}
                  </div>
                  <div className='sacrifice'>{`牺牲地：${martyrDetail?.lossProvince}-${martyrDetail?.lossCity}-${martyrDetail?.lossRegion}，${martyrDetail?.lossAddress}`}</div>
                  <div className='tombAddress'>{`墓区位置：${martyrDetail?.tombAddress}`}</div>
                </div>
              </div>
              <div className='title_img'>
                <img src={require('@/assets/img/muqu.png')} alt='' draggable='false' />
              </div>
              <div className='vr' onClick={() => window.open(`${martyrDetail?.link}`)}>
                <img src={require('@/assets/img/sceneThumb.png')} alt='' />
                <img src={require('@/assets/img/vr.png')} alt='' className='botvr' />
              </div>
              <div className='title_img'>
                <img src={require('@/assets/img/jianjie.png')} alt='' draggable='false' />
              </div>
              <div className='content'>
                <div className='text'>{martyrDetail?.intro}</div>
                {(martyrDetail?.img || martyrDetail?.video) && (
                  <div className='media'>
                    <>
                      {martyrDetail && (
                        <Image.PreviewGroup
                          preview={{
                            onChange: (current: number, prev: number) => {
                              if (current >= martyrDetail.img?.length) {
                                lookFileFu(
                                  martyrDetail?.video?.[
                                    current - martyrDetail.img?.length
                                  ].filePath
                                )
                              } else {
                                store.dispatch({
                                  type: 'layout/lookDom',
                                  payload: { src: '', type: '', flag: false }
                                })
                              }
                            },
                            onVisibleChange: (visible: boolean) => {
                              if (!visible) {
                                store.dispatch({
                                  type: 'layout/lookDom',
                                  payload: { src: '', type: '', flag: false }
                                })
                              }
                            },
                            toolbarRender: (_: any, { current }: { current: number }) => {
                              if (current >= martyrDetail.img?.length) {
                                return null
                              }
                              return _
                            }
                          }}
                        >
                          {martyrDetail.img?.map((item: any, index: number) => {
                            return (
                              <Image
                                width={'23%'}
                                height={'140px'}
                                src={baseURL + item.thumb}
                                preview={{
                                  destroyOnHidden: true,
                                  src: baseURL + item.filePath,
                                  toolbarRender: () => null
                                }}
                                placeholder={
                                  <img src={require('@/assets/img/loading.gif')} alt='' />
                                }
                                key={item.id}
                              />
                            )
                          })}
                          {martyrDetail?.video?.map((item: any, index: number) => {
                            return (
                              <Image
                                className={`video_${item.id}`}
                                width={'0'}
                                height={'0'}
                                // src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
                                preview={{
                                  src: ''
                                }}
                                onClick={() => lookFileFu(item.filePath)}
                                key={item.id}
                              />
                            )
                          })}
                        </Image.PreviewGroup>
                      )}
                      {martyrDetail?.video?.map((item: any, index: number) => {
                        return (
                          <div className='videoContainer' key={index}>
                            <video
                              src={baseURL + item.thumb}
                              onClick={e => {
                                e.stopPropagation()
                                const dom: HTMLDivElement = document.querySelector(
                                  `.video_${item.id}`
                                )!
                                if (dom) {
                                  dom.click()
                                }
                              }}
                            />
                            <div className='videoMask'>
                              <img src={require('@/assets/img/play.png')} alt='播放' />
                            </div>
                          </div>
                        )
                      })}
                    </>
                  </div>
                )}
              </div>
              {/* 亲属关系图 */}
              {/* <div className='relation'>
                <div className='title'>
                  <img src={require('@/assets/img/relationTitle.png')} alt='' />
                </div>
                <div className='relationPic'>
                  <RelationEcharts martyrName={martyrDetail?.name} relationList={relationList} />
                </div>
              </div> */}
              {clueList?.map((item: any) => (
                <div className='infoLabel' key={item.id}>
                  <div className='title'>
                    <div className='name'>烈士：{martyrDetail?.name}</div>
                    <div className='label'>
                      <div>{item.type}</div>
                      <div>{item.status}</div>
                    </div>
                  </div>
                  <div className='address'>
                    {item.province + item.city + item.region + item.address}
                  </div>
                  <div className='labelContent'>{item.remark}</div>
                  <div className='labelContent'>{item.result}</div>
                  {(item.img || item.video) && (
                    <div className='media'>
                      <>
                        {item.img?.map((item: any, index: number) => {
                          return (
                            <ImageLazy
                              width={'32%'}
                              height={'70px'}
                              src={item.thumb}
                              srcBig={item.filePath}
                              key={index}
                            />
                          )
                        })}
                        {item.video?.map((item: any, index: number) => {
                          return (
                            <video
                              onClick={e => {
                                e.stopPropagation()
                                lookFileFu(item.filePath)
                              }}
                              src={baseURL + item.thumb}
                              key={index}
                            />
                          )
                        })}
                      </>
                    </div>
                  )}
                  <div className='updateTime'>{item.updateTime}</div>
                </div>
              ))}
            </div>
          </div>

          <div className='infoDetailAdd'>
            <div className='scrollContainner'>
              <div className='title1'>
                <img src={require('@/assets/img/modelPic.png')} alt='' />
              </div>
              <div className='modelList'>
                {martyrDetail?.relic.map((item: any) => (
                  <div className='model' key={item.id}>
                    <img src={item.thumb} alt='' onClick={() => setCurrentRelic(item)} />
                    <div className='txt'>
                      <div className='dot' />
                      {item.name}
                    </div>
                  </div>
                ))}
              </div>
              <div className='title2'>
                <img src={require('@/assets/img/introPic.png')} alt='' />
              </div>
              <div className='introDetailBox'>
                <Timeline
                  items={martyrDetail?.life?.map((item: any) => {
                    let content = item.rtf
                    let flag = false
                    try {
                      content = JSON.parse(item.rtf)
                      if (content.txtArr) flag = true
                    } catch (error) {}
                    console.log(content, '123321')
                    return {
                      children: (
                        <div className='introDetail' key={item.id}>
                          <div className='year'>{item.date}</div>
                          <div
                            dangerouslySetInnerHTML={{
                              __html: flag ? content.txtArr[0].txt : content
                            }}
                          />
                        </div>
                      )
                    }
                  })}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      {currentRelic && (
        <div className={styles.modelInfo}>
          <div className='content'>
            <img src={currentRelic.thumbPc} alt='' />
          </div>
          <div className='txtBox'>
            <div className='title'>{currentRelic.name}</div>
            <div className='txt'>{currentRelic.intro}</div>
          </div>
          <div className='close' onClick={() => setCurrentRelic('')} />
        </div>
      )}
    </>
  )
}

const MemoDetail = React.memo(Detail)

export default MemoDetail
