import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { A2B_APIgetInfo, A2B_APIremove } from '@/store/action/A2Blogistics'
import { MessageFu } from '@/utils/message'
import history from '@/utils/history'
import { A2AListCamerasType, A2BListType } from '@/types'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import LookTable from '../components/LookTable'
import { lookTable2 } from '../components/LookTable/tableData'
import AddLogistics from '@/pages/A2Blogistics/AddLogistics'
import { A2BaddType } from '@/pages/A2Blogistics/data'
function A2BLog() {
  const urlObj: any = useParams()

  const [urlId, setUrlId] = useState(0)

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

  // 通过id获取详情
  const getInfoFu = useCallback(async (id: number) => {
    const res = await A2B_APIgetInfo(id)
    if (res.code === 0) {
      const data = res.data
      setInfo({
        ...data,
        orders: data.orders || []
      })
    }
  }, [])

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

  // 详情信息
  const [info, setInfo] = useState({} as A2BListType)

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

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

  return (
    <div className={styles.A2BLog}>
      <div className='pageTitle'>物流订单-查看（{info.type === 'CK' ? '出库' : '入库'}）</div>
      <div className='lookLogtBtn'>
        <Button
          type='primary'
          onClick={() => setOpenInfo({ id: urlId, txt: '编辑', type: info.type })}
        >
          编辑
        </Button>
        &emsp;
        <MyPopconfirm
          txtK='删除'
          loc='bottom'
          onConfirm={() => delFu()}
          Dom={<Button danger>删除</Button>}
        />
      </div>

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

          <div className='lLtxt'>
            <div className='lLtxtLeft'>
              <span>*</span> {info.type === 'CK' ? '发货日期' : '收货日期'}：
            </div>
            <div className='lLtxtRight'>{info.dateStart}</div>
          </div>

          <div className='lLtxt'>
            <div className='lLtxtLeft'>{info.type === 'CK' ? '收货地址' : '发货地址'}：</div>
            <div className='lLtxtRight'>{info.address || '（空）'}</div>
          </div>

          <div className='lLtxt'>
            <div className='lLtxtLeft'>
              <span>*</span> 物流编号：
            </div>
            <div className='lLtxtRight'>{info.logisticsNum}</div>
          </div>

          <div className='lLtxt'>
            <div className='lLtxtLeft'>备注：</div>
            <div className='lLtxtRight'>{info.rtf || '（空）'}</div>
          </div>

          <div className='lookTit lookTit2'>业务订单</div>

          <div className='lLtxt'>
            <div className='lLtxtLeft'>关联业务订单：</div>
            <div className='lLtxtRight'>{info.orderNum || '（空）'}</div>
          </div>
          <br />

          <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>
      ) : null}

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

const MemoA2BLog = React.memo(A2BLog)

export default MemoA2BLog
