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

function A2WX() {
  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)
      setInfo({
        ...data,
        cameras: data.cameras || [],
        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])

  return (
    <div className={styles.A2WX}>
      <div className='pageTitle'>业务订单-查看（维修）</div>

      <div className='lookWXBtn'>
        <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='lookWXBox'>
          <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>
                )
              }
            ]}
          />
          {/* 待完善 */}
          <div className='lookTit'>
            <div>物流订单</div>
            <div>
              <Button type='primary'>新增出库</Button>
            </div>
          </div>
        </div>
      ) : null}

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

const MemoA2WX = React.memo(A2WX)

export default MemoA2WX