import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { D2_APIdel, D2_APIgetInfo } from '@/store/action/D2storSet'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import history from '@/utils/history'
import { TypeD2list } from '../type'
import D2edit from '../D2edit'
import MyTable from '@/components/MyTable'
import { D2tableCSon } from '@/utils/tableData'

const topArr = [
  { name: '仓库名称', key: 'name' },
  { name: '仓库编码', key: 'num' },
  { name: '仓库负责人', key: 'managerUser' },
  { name: '仓库说明', key: 'description' },
  { name: '库保员', key: 'memberUser' }
]

function D2look() {
  const { id: sId } = useParams<any>()

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

  const getInfoFu = useCallback(async () => {
    const res = await D2_APIgetInfo(sId)
    if (res.code === 0) {
      setInfo(res.data)
    }
  }, [sId])

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

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

  const [editId, setEditId] = useState(0)

  return (
    <div className={styles.D2look}>
      <div className='pageTitle'>库房设置-查看</div>

      <div className='D2Ltop'>
        <div className='D2Ltop1'>
          <div className='D2Ltop1_1'>库房信息</div>
          <div>
            <Button type='primary' onClick={() => setEditId(sId)}>
              编辑
            </Button>
            &emsp;
            <MyPopconfirm
              txtK='删除'
              onConfirm={() => delTableFu()}
              Dom={<Button danger>删除</Button>}
            />
            &emsp;
            <Button onClick={() => history.go(-1)}>返回</Button>
          </div>
        </div>
        {info.id ? (
          <div className='D2Ltop2'>
            {topArr.map(item => (
              <div className='D2Ltop2_1' key={item.name}>
                <div>{item.name}：</div>
                <p>{info[item.key as 'name'] || '（空）'}</p>
              </div>
            ))}
            <div className='D2Ltop2_1'>
              <div>仓库状态：</div>
              <p>{info.enable ? '启用' : '禁用'}</p>
            </div>
          </div>
        ) : null}
      </div>

      {/* 下面的表格 */}
      <div className='D2Ltable'>
        <div className='D2Ltop1'>
          <div className='D2Ltop1_1'>库位信息</div>
          <div>
            <Button
              type='primary'
              onClick={() => history.push(`/storSet_site/${sId}/${info.name}`)}
            >
              设置
            </Button>
          </div>
        </div>
        <MyTable
          list={info.site || []}
          columnsTemp={D2tableCSon}
          lastBtn={[]}
          pagingInfo={false}
          widthSet={{ description: 700 }}
        />
      </div>

      {/* 编辑弹窗 */}
      {editId ? (
        <D2edit
          sId={editId}
          isLook={true}
          succToLookFu={() => getInfoFu()}
          closeFu={() => setEditId(0)}
        />
      ) : null}
    </div>
  )
}

const MemoD2look = React.memo(D2look)

export default MemoD2look