import React, { useCallback, useEffect, useMemo, useState } from 'react'
import classNames from 'classnames'
import { Button, Modal, Select, Table } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import ImageLazy from '../ImageLazy'
import { getInfoInAPI } from '@/store/action/object1'
import './index.css'

type Props = {
  show: boolean
  closeShow: any
  id: number
}

function LookModal({ show, closeShow, id }: Props) {
  const dispatch = useDispatch()
  // 根据id发送请求把数据存到仓库

  const getInfoInAPIFu = useCallback(async () => {
    const res = await getInfoInAPI(id)
    const info = res.data.entity
    const fileList = {
      img: [],
      video: [],
      audio: [],
      model: [],
      doc: []
    } as any
    res.data.file.forEach((v: any) => {
      fileList[v.type].push(v)
    })

    dispatch({
      type: 'object1/getOneGoodsInfo',
      payload: { info, fileList }
    })
  }, [dispatch, id])

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

  // 选择商品信息还是附近（默认商品信息）
  const [titSelect, setTitSelect] = useState('tit1')

  // 附件类型下拉框
  const { info, fileList } = useSelector((state: RootState) => state.object1Store.oneGoodsInfo)

  // 外形尺寸和具体质量
  let sizeRes = ''
  if (info.size && info.size.length) {
    const sizeArr = info.size.split(',')
    sizeRes = `(通长)${sizeArr[0]}cm&emsp;(通宽)${sizeArr[1]}cm&emsp;(通高)${sizeArr[2]}cm`
  }

  let qualityRes = '-'
  if (info.quality && info.quality.length) {
    const qualityArr = info.quality.split(',')
    qualityRes = qualityArr[0] + qualityArr[1]
  }

  const fileSelectList = useMemo(() => {
    return [
      { id: 1, value: 'img', label: '高清图片' },
      { id: 2, value: 'video', label: '视频文件' },
      { id: 3, value: 'audio', label: '音频文件' },
      { id: 4, value: 'model', label: '三维模型' },
      { id: 5, value: 'doc', label: '文档资料' }
    ]
  }, [])
  const [fileSelect, setFileSelect] = useState('img')
  const fileSelectChangeFu = (value: string) => {
    setFileSelect(value)
  }

  // 里面表格格式
  const columns2 = useMemo(() => {
    const tempArr = [
      {
        title: '附件名称',
        dataIndex: 'name'
      },
      {
        title: '上传时间',
        dataIndex: 'createTime'
      }
    ] as any
    if (fileSelect === 'img') {
      tempArr.unshift({
        title: '缩略图',
        render: (item: any) => <ImageLazy width={120} height={70} src={item.filePath} />
      })
    }
    return tempArr
  }, [fileSelect])

  return (
    <>
      <Modal
        wrapClassName='lookObjTable'
        destroyOnClose
        open={show}
        title='查看藏品'
        onCancel={closeShow}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        {/* 商品信息和附件切换 */}
        <div className='ObjectAddTit'>
          <div
            onClick={() => setTitSelect('tit1')}
            className={classNames(titSelect === 'tit1' ? 'active' : '')}
          >
            藏品信息
          </div>
          <div
            onClick={() => setTitSelect('tit2')}
            className={classNames('ObjectAddTitTow', titSelect === 'tit2' ? 'active' : '')}
          >
            附件
          </div>
        </div>

        {/* 藏品信息 */}
        <div className='goodsInfo' hidden={titSelect !== 'tit1'}>
          <div className='row'>
            <div>
              <span>藏品名称：</span>
              <p>{info.name}</p>
            </div>
            <div>
              <span>原名：</span>
              <p>{info.namePrimitive ? info.namePrimitive : '-'}</p>
            </div>
          </div>
          <div className='row'>
            <div>
              <span>藏品编号名称：</span>
              <p>{info.dictNum}</p>
            </div>
            <div>
              <span>藏品编号：</span>
              <p>{info.num ? info.num : '-'}</p>
            </div>
          </div>
          <div className='row'>
            <div>
              <span>年代：</span>
              <p>{info.dictAge}</p>
            </div>
            <div>
              <span>文物质地：</span>
              <p>{info.dictTexture}</p>
            </div>
          </div>
          <div className='row'>
            <div>
              <span>具体年代：</span>
              <p>{info.ageSpecific ? info.ageSpecific : '-'}</p>
            </div>
            <div>
              <span>文物类别：</span>
              <p>{info.dictGoodType}</p>
            </div>
          </div>

          <div className='row'>
            <div>
              <span>实际数量：</span>
              <p>{info.pcs}</p>
            </div>
            <div>
              <span>文物级别：</span>
              <p>{info.dictLevel}</p>
            </div>
          </div>
          <div className='rowFull'>
            <span>外形尺寸：</span>
            <p dangerouslySetInnerHTML={{ __html: sizeRes }}></p>
          </div>
          <div className='rowFull'>
            <span>具体尺寸：</span>
            <p>{info.sizeSpecific}</p>
          </div>

          <div className='row'>
            <div>
              <span>质量范围：</span>
              <p>{info.dictQualityScope}</p>
            </div>
            <div>
              <span>具体质量：</span>
              <p>{qualityRes}</p>
            </div>
          </div>

          <div className='row'>
            <div>
              <span>完残程度：</span>
              <p>{info.complete}</p>
            </div>
            <div>
              <span>保存状态：</span>
              <p>{info.repair ? info.repair : '-'}</p>
            </div>
          </div>

          <div className='row'>
            <div>
              <span>入藏时间范围：</span>
              <p>{info.dictCheckInScope}</p>
            </div>
            <div>
              <span>入藏年度：</span>
              <p>{info.checkInYear ? info.checkInYear : '-'}</p>
            </div>
          </div>

          <div className='row'>
            <div>
              <span>著者：</span>
              <p>{info.author ? info.author : '-'}</p>
            </div>
            <div>
              <span>版本：</span>
              <p>{info.vision ? info.vision : '-'}</p>
            </div>
          </div>

          <div className='rowFull'>
            <span>存卷：</span>
            <p>{info.onFile ? info.onFile : '-'}</p>
          </div>
          <div className='rowFull'>
            <span>来源说明：</span>
            <p>{info.description ? info.description : '-'}</p>
          </div>
          <div className='rowFull'>
            <span>备注：</span>
            <p>{info.remark ? info.remark : '-'}</p>
          </div>
          <div className='rowFull'>
            <span>展示状态：</span>
            <p>{info.display ? '是' : '否'}</p>
          </div>
        </div>

        <div className='goodsFile' hidden={titSelect !== 'tit2'}>
          <div className='row'>
            <div className='rowTit'>藏品图片：</div>
            <div className='rowRr'>
              <ImageLazy width={120} height={120} src={info.thumb} />
            </div>
          </div>

          <div className='row'>
            <div className='rowTit'>附件类型：</div>
            <div className='rowRr'>
              <Select
                style={{ width: 150 }}
                value={fileSelect}
                onChange={fileSelectChangeFu}
                options={fileSelectList}
              />
            </div>
          </div>

          {/* 表格主体 */}
          <Table
            size='small'
            scroll={{ y: 300 }}
            dataSource={fileList[fileSelect]}
            columns={columns2}
            rowKey='id'
            pagination={false}
          />
        </div>

        {/* 确定按钮 */}
        <div className='goodsBtn'>
          <Button type='primary' onClick={closeShow}>
            确定
          </Button>
        </div>
      </Modal>
    </>
  )
}

const MemoLookModal = React.memo(LookModal)

export default MemoLookModal
