import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { A2AListCamerasType, A2AListType, A2BListType } from '@/types'
import { A2A_APIgetInfo, A2A_APIremove } from '@/store/action/A2Abusiness'
import { MessageFu } from '@/utils/message'
import history from '@/utils/history'
import { A1addType } from '@/pages/A1Camera/data'
import { A2AtopTypeObj } from '@/pages/A2Abusiness/data'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import LookTxt from '../components/LookTxt'
import LookTxt2 from '../components/LookTxt2'
import LookTable from '../components/LookTable'
import { lookTable2, lookTable3 } from '../components/LookTable/tableData'
import AddBusiness from '@/pages/A2Abusiness/AddBusiness'
import { A2BaddType } from '@/pages/A2Blogistics/data'
import AddLogistics from '@/pages/A2Blogistics/AddLogistics'

type Props = {
  pageTit: string
}

function A2Index({ pageTit }: Props) {
  const urlObj: any = useParams()

  const [urlId, setUrlId] = useState(0)

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

  // 获取地址栏参数
  useEffect(() => {
    setUrlId(Number(urlObj.id))
  }, [urlObj])

  // 通过id获取详情
  const getInfoFu = useCallback(async (id: number) => {
    const res = await A2A_APIgetInfo(id)
    if (res.code === 0) {
      const data = res.data

      const rtf = data.rtf || '{"isSection":"true","txtArr":[{"txt":"<p></p>"}]}'
      const refObj = JSON.parse(rtf)

      const rtfDesc = data.rtfDesc || '{"isSection":"true","txtArr":[{"txt":"<p></p>"}]}'
      const rtfDescObj = JSON.parse(rtfDesc)

      let logistics: any[] = data.logistics || []
      logistics = logistics.map(v => ({
        ...v,
        RKDate: v.type === 'RK' ? v.dateStart : '/',
        CKDate: v.type === 'CK' ? v.dateStart : '/'
      }))

      setInfo({
        ...data,
        cameras: data.cameras || [],
        logistics: logistics,
        files: data.files || [],
        rtf: refObj,
        rtfDesc: rtfDescObj
      })
    }
  }, [])

  // 进页面发送请求
  useEffect(() => {
    if (urlId) {
      getInfoFu(urlId)
    }
  }, [getInfoFu, urlId])

  // 点击删除
  const delFu = useCallback(async () => {
    const res = await A2A_APIremove(urlId)
    if (res.code === 0) {
      MessageFu.success('删除成功!')
      history.go(-1)
    }
  }, [urlId])

  // 点击编辑
  const [openInfo, setOpenInfo] = useState<A1addType>({ id: 0, txt: '' })

  // 第二个信息标题
  const tit2 = useMemo(() => {
    return Reflect.get(A2AtopTypeObj, info.type)
  }, [info.type])

  // 点击编辑
  const [logAddInfo, setLogAddInfo] = useState<A2BaddType>({ id: 0, txt: '', type: '' })

  return (
    <div className={styles.A2LookIndex}>
      <div className='pageTitle'>{pageTit}</div>

      <div className='lookIndexBtn'>
        <Button type='primary' onClick={() => setOpenInfo({ id: urlId, txt: '编辑' })}>
          编辑
        </Button>
        &emsp;
        <MyPopconfirm
          txtK='删除'
          loc='bottom'
          onConfirm={() => delFu()}
          Dom={<Button danger>删除</Button>}
        />
      </div>

      {info.id ? (
        <div className='lookIndexBox'>
          <div className='lookTit'>订单信息</div>

          <LookTxt info={info} />

          <div className='lookTit'>{tit2}信息</div>

          <LookTxt2 info={info} tit2={tit2} />

          <div className='lookTit'>相机清单</div>

          <LookTable
            list={info.cameras}
            columnsTemp={lookTable2}
            lastBtn={[
              {
                title: '操作',
                render: (item: A2AListCamerasType) => (
                  <Button
                    size='small'
                    type='text'
                    onClick={() => history.push(`/lookList/${item.id}`)}
                  >
                    查看
                  </Button>
                )
              }
            ]}
          />
          <br />

          {['ZL', 'XS', 'BX', 'WX'].includes(info.type) ? (
            <div className='lookTit'>
              <div>物流订单</div>
              <div>
                {['ZL', 'XS', 'WX'].includes(info.type) ? (
                  <Button
                    type='primary'
                    onClick={() => setLogAddInfo({ id: -1, txt: '新增', type: 'CK' })}
                  >
                    新增出库
                  </Button>
                ) : null}
                {['ZL', 'BX'].includes(info.type) ? (
                  <Button
                    type='primary'
                    onClick={() => setLogAddInfo({ id: -1, txt: '新增', type: 'RK' })}
                  >
                    新增入库
                  </Button>
                ) : null}
              </div>
            </div>
          ) : null}

          <LookTable
            list={info.logistics}
            columnsTemp={lookTable3}
            isNull='/'
            lastBtn={[
              {
                title: '操作',
                render: (item: A2BListType) => (
                  <Button
                    size='small'
                    type='text'
                    onClick={() => history.push(`/lookLog/${item.id}`)}
                  >
                    查看
                  </Button>
                )
              }
            ]}
          />
        </div>
      ) : null}

      {/* 编辑 出来的页面 */}
      {openInfo.id ? (
        <div className='lookIndexBoxAdd'>
          <div>
            <AddBusiness
              topType={info.type}
              openInfo={openInfo}
              closeFu={() => setOpenInfo({ id: 0, txt: '' })}
              upTableFu={() => getInfoFu(urlId)}
              addTableFu={() => {}}
            />
          </div>
        </div>
      ) : null}

      {/* 物流订单 点击 新增出库 新增入库  出来的页面 */}
      {logAddInfo.id ? (
        <div className='lookIndexBoxAdd'>
          <div>
            <AddLogistics
              openInfo={logAddInfo}
              closeFu={() => setLogAddInfo({ id: 0, txt: '', type: '' })}
              upTableFu={() => {}}
              addTableFu={() => getInfoFu(urlId)}
              orderNumTemp={info.num}
            />
          </div>
        </div>
      ) : null}
    </div>
  )
}

const MemoA2Index = React.memo(A2Index)

export default MemoA2Index
