import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { A1_APIgetInfo } from '@/store/action/A1record'
import { Button } from 'antd'
import { A1ListType, cityResFu } from '../data'
import ImageLazy from '@/components/ImageLazy'
import A1edit from '../A1edit'
import A1tab1introduce from '../A1tab1introduce'
import A1tab2file from '../A1tab2file'
import A1tab3log from '../A1tab3log'

type Props = {
  sId: number
  closeFu: (flag: boolean) => void
}

function A1look({ sId, closeFu }: Props) {
  const [info, setInfo] = useState({} as A1ListType)

  const getInfoFu = useCallback(async () => {
    const res = await A1_APIgetInfo(sId)
    if (res.code === 0) {
      setInfo(res.data)
    }
  }, [sId])

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

  // 返回的时候是否更新列表
  const upTableRef = useRef(false)

  const [btnAc, setBtnAc] = useState('古桥介绍')

  // 新增 编辑
  const [sInfo, setSInfo] = useState({} as A1ListType)

  return (
    <div className={styles.A1look}>
      {/* 顶部 */}
      <div className='A1l1'>
        <div>
          <Button onClick={() => closeFu(upTableRef.current)}>返回</Button>{' '}
          <span className='A1l1Txt'>{info.name}</span>
        </div>
        <Button type='primary' onClick={() => setSInfo(info)}>
          编辑
        </Button>
      </div>

      {/* 信息和底部 */}
      <div className='A1Lmain'>
        <div className='A1Ltop'>
          {info.id ? (
            <div className='A1lTopInfo'>
              <div className='A1LrowBox'>
                <div className='A1Lrow'>
                  <div>建造年代：</div>
                  <div>{info.age || '（空）'}</div>
                </div>
                <div className='A1Lrow'>
                  <div>结构形式：</div>
                  <div>{info.type || '（空）'}</div>
                </div>

                <div className='A1Lrow A1LrowAll'>
                  <div>所在位置：</div>
                  <div>
                    {cityResFu(info)}&emsp;&emsp;{info.lat || '（空）'}° ，{info.lng || '（空）'}
                    °&emsp;&emsp;
                    {info.address}
                  </div>
                </div>

                <div className='A1Lrow'>
                  <div>所属村委会：</div>
                  <div>{info.village || '（空）'}</div>
                </div>
                <div className='A1Lrow'>
                  <div>所属乡镇：</div>
                  <div>{info.villageName || '（空）'}</div>
                </div>

                <div className='A1Lrow A1Lrow2'>
                  <div>场景链接：</div>

                  <div>
                    {info.sceneLink ? (
                      <a target='_blank' href={info.sceneLink} rel='noreferrer'>
                        {info.sceneLink}
                      </a>
                    ) : (
                      '（空）'
                    )}
                  </div>
                </div>
                <div className='A1Lrow A1Lrow2'>
                  <div>模型链接：</div>
                  <div>
                    {info.moduleLink ? (
                      <a target='_blank' href={info.moduleLink} rel='noreferrer'>
                        {info.moduleLink}
                      </a>
                    ) : (
                      '（空）'
                    )}
                  </div>
                </div>
              </div>

              <div className='A1LrowImg'>
                <ImageLazy
                  width={200}
                  height={200}
                  src={info.thumb || info.thumbPc}
                  srcBig={info.thumbPc || info.thumb}
                />
              </div>
            </div>
          ) : null}
        </div>

        {/* 底部 */}
        <div className='A1LbtnBox'>
          <div className='A1Lbtn1'>
            {['古桥介绍', '附件管理', '维护记录'].map(v => (
              <Button
                key={v}
                type={btnAc === v ? 'primary' : 'default'}
                size='large'
                onClick={() => setBtnAc(v)}
              >
                {v}
              </Button>
            ))}
            <span>附件管理/维护记录中的内容仅供内部使用，不对用户端公开展示。</span>
          </div>

          <div className='A1Lbtn2'>
            {btnAc === '古桥介绍' ? <A1tab1introduce sInfo={info} upInfoFu={getInfoFu} /> : null}
            {btnAc === '附件管理' ? <A1tab2file sId={sId} /> : null}
            {btnAc === '维护记录' ? <A1tab3log sId={sId} /> : null}
          </div>
        </div>
      </div>

      {/* 编辑 */}
      {sInfo.id ? (
        <A1edit
          sInfo={sInfo}
          closeFu={() => setSInfo({} as A1ListType)}
          upTableFu={() => {
            upTableRef.current = true
            getInfoFu()
          }}
        />
      ) : null}
    </div>
  )
}

const MemoA1look = React.memo(A1look)

export default MemoA1look
