import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'

import { useParams } from 'react-router-dom'
import { A1_APIgetInfo, A1_APIremove } from '@/store/action/A1Camera'
import history from '@/utils/history'
import { Button } from 'antd'
import { MessageFu } from '@/utils/message'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A1addType } from '@/pages/A1Camera/data'
import AddCamera from '@/pages/A1Camera/AddCamera'
import { TopTypeType } from '@/pages/A2Abusiness/data'
import LookTable from '../components/LookTable'
import { lookTable1, lookTable3 } from '../components/LookTable/tableData'
import { A2BListType } from '@/types'

type InfoOrdersType = {
  id: number
  type: TopTypeType
  num: string
  creatorName: string
  updateTime: string
}

type InfoType = {
  id: number
  cameraSn: string
  cameraType: 'KJ' | 'KK'
  remark: string
  // 业务订单数组
  orders: InfoOrdersType[]
  // 物流订单数组
  logistics: A2BListType[]
}

function A1List() {
  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 A1_APIgetInfo(id)
    if (res.code === 0) {
      const data = res.data

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

      setInfo({
        ...data,
        orders: data.orders || [],
        logistics: logistics
      })
    }
  }, [])

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

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

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

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

  return (
    <div className={styles.A1List}>
      <div className='pageTitle'>相机列表-查看</div>

      <div className='lookListBtn'>
        <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='lookListBox'>
          <div className='lookTit'>相机信息</div>

          <div className='lLtxt'>
            <div className='lLtxtLeft'>
              <span>*</span> 相机类型：
            </div>
            <div className='lLtxtRight'>{info.cameraType === 'KJ' ? '看见' : '看看'}</div>
          </div>

          <div className='lLtxt'>
            <div className='lLtxtLeft'>
              <span>*</span> SN编码：
            </div>
            <div className='lLtxtRight'>{info.cameraSn}</div>
          </div>

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

          <div className='lookTit'>业务订单</div>
          <LookTable
            list={info.orders}
            columnsTemp={lookTable1}
            lastBtn={[
              {
                title: '操作',
                render: (item: InfoOrdersType) => (
                  <Button
                    size='small'
                    type='text'
                    onClick={() => history.push(`/look${item.type}/${item.id}`)}
                  >
                    查看
                  </Button>
                )
              }
            ]}
          />

          <div className='lookTit'>物流订单</div>

          <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='lookListBoxAdd'>
          <div>
            <AddCamera
              openInfo={openInfo}
              closeFu={() => setOpenInfo({ id: 0, txt: '' })}
              upTableFu={() => getInfoFu(urlId)}
              addTableFu={() => {}}
            />
          </div>
        </div>
      ) : null}
    </div>
  )
}

const MemoA1List = React.memo(A1List)

export default MemoA1List
