import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import A1echarts from '../A1echarts'
import { A1_APIgetInfo, A1_APIgetList } from '@/store/action/A1record'
import { A1ListSelectType, A1ListType, jiGuanFu } from '../data'
import ZupTypes from '@/components/ZupTypes'
import ZupVideos from '@/components/ZupVideos'
import { Button } from 'antd'
import A1tab1life from '../A1tab/A1tab1life'
import A2tab2clan from '../A1tab/A2tab2clan'
import A3tab3clue from '../A1tab/A3tab3clue'
import A4tab4antique from '../A1tab/A4tab4antique'

const tabList = [
  { id: 1, name: '生平信息' },
  { id: 2, name: '亲属信息' },
  { id: 3, name: '寻亲线索' },
  { id: 4, name: '相关文物' }
]

type Props = {
  sId: number
}

function A1look({ sId }: Props) {
  // 获取所有烈士信息
  const [listAllRes, setListAllRes] = useState<A1ListSelectType>([])

  const getListAllFu = useCallback(async () => {
    const res = await A1_APIgetList(
      {
        pageNum: 1,
        pageSize: 99999
      },
      true
    )
    if (res.code === 0) {
      const list: A1ListType[] = res.data.records || []
      setListAllRes(
        list.map(c => ({
          value: c.id,
          label: c.name
        }))
      )
    }
  }, [])

  useEffect(() => {
    getListAllFu()
  }, [getListAllFu])
  // 获取所有烈士信息-end

  // 多张图片的ref
  const ZupImgsRef = useRef<any>(null)

  // 多个视频的ref
  const ZupVideosRef = useRef<any>(null)

  const [info, setInfo] = useState({} as A1ListType)

  useEffect(() => {
    const file = info.img || []
    // 传给 附件 组件的
    const sonInfo = {
      type: 'img',
      fileList: file
    }
    ZupImgsRef.current?.setFileComFileFu(sonInfo)
    ZupVideosRef.current?.setFileComFileFu(info.video || [])
  }, [info])

  const [loding, setLoding] = useState(false)

  // 编辑进来获取详情
  const getInfoFu = useCallback(async (id: number) => {
    const res = await A1_APIgetInfo(id)
    if (res.code === 0) {
      setInfo(res.data)
      setLoding(true)
    }
  }, [])

  useEffect(() => {
    getInfoFu(sId)
  }, [getInfoFu, sId])

  // 下面4个tab切换
  const [tabAc, setTabAc] = useState(1)

  return (
    <div className={styles.A1look}>
      {loding ? (
        <>
          <div className='A1Top'>
            <div className='A1Top1'>
              <div className='A1topRow'>
                <div className='A1top1LL'>基本信息：</div>
                <div className='A1top1RR'>
                  {info.name} | {info.gender === 1 ? '男' : '女'}{' '}
                  {info.nation ? ` | ${info.nation}` : ''}&emsp;&emsp;
                  {info.dateStart || info.dateEnd
                    ? (info.dateStart || '（空）') + ' ~ ' + (info.dateEnd || '（空）')
                    : ''}
                </div>
              </div>
              <div className='A1topRow'>
                <div className='A1top1LL'>牺牲时所在单位：</div>
                <div className='A1top1RR'>{info.intro || '（空）'}</div>
              </div>
              <div className='A1topRow'>
                <div className='A1top1LL'>籍贯：</div>
                <div
                  className='A1top1RR'
                  dangerouslySetInnerHTML={{ __html: jiGuanFu(info, true) }}
                ></div>
              </div>
              <div className='A1topRow'>
                <div className='A1top1LL'>牺牲地：</div>
                <div
                  className='A1top1RR'
                  dangerouslySetInnerHTML={{ __html: jiGuanFu(info, true, '牺牲地') }}
                ></div>
              </div>
              {/* <div className='A1topRow'>
                <div className='A1top1LL'>个人介绍：</div>
                <div className='A1top1RR'>{info.intro || '（空）'}</div>
              </div> */}
              <div className='A1topRow'>
                <div className='A1top1LL'>图片：</div>
                <div className='A1top1RR'>
                  {info.img.length === 0 ? '（空）' : ''}
                  <ZupTypes
                    multipleImg={true}
                    ref={ZupImgsRef}
                    isLook={true}
                    fileCheck={false}
                    selecFlag='图片'
                    imgSize={5}
                    imgLength={99999}
                    dirCode='A1record'
                    myUrl='cms/martyr/upload'
                    isTypeShow={true}
                    oneIsCover={true}
                  />
                </div>
              </div>

              <div className='A1topRow'>
                <div className='A1top1LL'>视频：</div>
                <div className='A1top1RR'>
                  <ZupVideos
                    isLook={true}
                    size={500}
                    fileNum={50}
                    dirCode='A1recordVideo'
                    myUrl='cms/martyr/upload'
                    upTxt='；数量不超过50个。'
                    ref={ZupVideosRef}
                  />
                </div>
              </div>

              <div className='A1topRow'>
                <div className='A1top1LL'>场景链接：</div>
                <div className='A1top1RR'>
                  {info.link ? (
                    <a href={info.link} target='_blank' rel='noreferrer'>
                      {info.link}
                    </a>
                  ) : (
                    '（空）'
                  )}
                </div>
              </div>

              <div className='A1topRow'>
                <div className='A1top1LL'>备注：</div>
                <div className='A1top1RR'>{info.remark || '（空）'}</div>
              </div>
            </div>
            <div className='A1Top2'>
              <A1echarts listAllRes={listAllRes} sId={info.id} sName={info.name} />
            </div>
          </div>

          <div className='A1Tab'>
            <div className='A1Tab1'>
              {tabList.map(v => (
                <Button
                  key={v.id}
                  onClick={() => setTabAc(v.id)}
                  type={tabAc === v.id ? 'primary' : 'default'}
                  size='large'
                >
                  {v.name}
                </Button>
              ))}
            </div>

            {tabAc === 1 ? <A1tab1life sId={sId} /> : null}
            {tabAc === 2 ? <A2tab2clan sId={sId} listAllRes={listAllRes} /> : null}
            {tabAc === 3 ? <A3tab3clue sId={sId} listAllRes={listAllRes} /> : null}
            {tabAc === 4 ? <A4tab4antique sId={sId} listAllRes={listAllRes} /> : null}
          </div>
        </>
      ) : null}
    </div>
  )
}

const MemoA1look = React.memo(A1look)

export default MemoA1look
