import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useParams } from 'react-router-dom'
import { FourTableType } from '@/pages/B_enterTibet/B1collect/type'
import { C1GoodType } from '@/pages/A3_ledger/C1ledger/type'
import {
  D6_APIcreate,
  D6_APIdel,
  D6_APIgetInfo,
  D6_APIrevocation,
  D6_APIsaveApply,
  D6_APIsaveAudit,
  D6_APIsaveCreate,
  D6_APIsaveDraft
} from '@/store/action/D6putsStor'
import { API_goodsInfo } from '@/store/action/C1ledger'
import { pageTitTxtObj } from '../../D4impStor/D4edit'
import dayjs from 'dayjs'
import { MessageFu } from '@/utils/message'
import history, { btnFlagFu2, openGoodsInfoFu } from '@/utils/history'
import classNames from 'classnames'
import TextArea from 'antd/es/input/TextArea'
import { Button, DatePicker, Input, Modal, Radio, Select } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { EXbtnFu } from '@/utils/EXBtn'
import X3auditInfo from '@/pages/X_stock/X3auditInfo'
import { D6tableCgoods, statusObj } from '@/utils/tableData'
import { useDispatch, useSelector } from 'react-redux'
import { D2_APIgetList } from '@/store/action/D2storSet'
import { RootState } from '@/store'
import MyTable from '@/components/MyTable'
import ZflowTable from '@/components/ZflowTable'
import ZupFileTable from '@/components/ZupFileTable'
import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'
import ZGaddNow from '@/components/ZGaddNow'
import D6batchInput from './D6batchInput'

function D6edit() {
  // 获取库房设置列表/入馆凭证号-用于分库缩写下拉
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(D2_APIgetList({ pageNum: 1, pageSize: 99999 }))
  }, [dispatch])

  const { list: storageIdArr } = useSelector((state: RootState) => state.D2storSet.tableInfo)

  const { key, id } = useParams<any>()
  // key:1 新增 2编辑 3审批 4查看
  // 滚到顶部
  const sollrDom = useRef<HTMLDivElement>(null)
  // 顶部数据
  const [topInfo, setTopInfo] = useState({} as FourTableType)

  // 藏品清单快照数据
  const [snaps, setSnaps] = useState<C1GoodType[]>([])
  const delSnapIdsRef = useRef<number[]>([])

  const snapsID2ref = useRef<{ goodsId: number; id: number }[]>([])

  // 创建订单
  const creatFu = useCallback(async () => {
    const res = await D6_APIcreate()
    if (res.code === 0) {
      // 从藏品详情点击按钮进来
      const urlAll = window.location.href
      if (urlAll.includes('?id=')) {
        const urlId = urlAll.split('?id=')[1]
        const res2 = await API_goodsInfo(Number(urlId))
        if (res2.code === 0) {
          setTopInfo({ ...res.data, storageId: res2.data.storageId, sonTypeName: '1' })
          setSnaps([res2.data])
        }
      } else setTopInfo({ ...res.data, sonTypeName: '1' })
    }
  }, [])

  // 获取详情
  const getInfoFu = useCallback(async () => {
    const res = await D6_APIgetInfo(id)
    if (res.code === 0) {
      const data = res.data
      setTopInfo(data)
      // 藏品清单快照信息id对比
      const arrTemp: any = []
      const snapsTemp = data.snaps || []

      snapsTemp.forEach((v: any) => {
        snapsID2ref.current.push({ goodsId: v.goodsId, id: v.id })

        const obj = JSON.parse(v.snap || '{}')
        if (obj.id) obj.id2 = v.id

        arrTemp.push(obj)
      })
      setSnaps(arrTemp)
    }
  }, [id])

  useEffect(() => {
    if (key === '1') creatFu()
    else getInfoFu()

    if (sollrDom.current) sollrDom.current.scrollTop = 0
  }, [creatFu, getInfoFu, key])

  const pageTitTxt = useMemo(() => {
    return Reflect.get(pageTitTxtObj, key)
  }, [key])

  const timeChange = useCallback(
    (e: any, key: 'date' | 'returnDate') => {
      setTopInfo({ ...topInfo, [key]: dayjs(e).format('YYYY-MM-DD') })
    },
    [topInfo]
  )

  // 审批意见的ref
  const ZAuditRef = useRef<any>(null)

  // 审批的sta
  const [auditSta, setAuDitSta] = useState('')

  // 字段的校验
  const checkFu = useCallback(() => {
    if (!topInfo.sonTypeName) {
      MessageFu.warning('请选择提退类型')
      return true
    }
    if (!topInfo.num) {
      MessageFu.warning('请输入提退单编号')
      return true
    }

    if (topInfo.sonTypeName === '3' && !topInfo.borrowInUnit) {
      MessageFu.warning('请输入借出单位')
      return true
    }

    if (!topInfo.sonUnit) {
      MessageFu.warning(
        `请输入${
          topInfo.sonTypeName === '1'
            ? '提用单位（部门）'
            : topInfo.sonTypeName === '2'
            ? '提用部门'
            : '借入单位'
        }`
      )
      return true
    }
    if (!topInfo.date) {
      MessageFu.warning(`请选择${topInfo.sonTypeName === '3' ? '借用日期' : '提用日期'}`)
      return true
    }

    if (topInfo.sonTypeName === '3') {
      if (!topInfo.returnDate) {
        MessageFu.warning('请选择归还日期')
        return true
      }
      if (!topInfo.receiveUnit) {
        MessageFu.warning('请输入接收单位')
        return true
      }
      if (!topInfo.returnUnit) {
        MessageFu.warning('请输入归还单位')
        return true
      }
    } else {
      if (!topInfo.effect) {
        MessageFu.warning(`请输入${topInfo.sonTypeName === '2' ? '提用原因' : '提用目的'}`)
        return true
      }
    }

    if (!topInfo.storageId) {
      MessageFu.warning('请输入请选择分库缩写')
      return true
    }
  }, [topInfo])

  // 新增的底部按钮点击
  const btnClickFu = useCallback(
    async (val: '草稿' | '创建' | '保存' | '审批') => {
      if (checkFu()) {
        if (sollrDom.current) sollrDom.current.scrollTop = 0
        return
      }

      if (val !== '草稿') {
        if (snaps.length === 0) return MessageFu.warning('请添加藏品')
      }

      if (val === '审批') {
        // console.log('审批信息富文本', rtf2)
        if (!auditSta) {
          if (sollrDom.current) sollrDom.current.scrollTop = 0
          return MessageFu.warning('请选择审批结果')
        }
        const rtf2 = ZAuditRef.current?.resData()

        const res: any = await D6_APIsaveAudit({
          orderId: topInfo.id,
          rtfOpinion: rtf2,
          status: auditSta === '同意' ? 1 : 2
        })

        if (res.code === 0) {
          MessageFu.success('审批成功')
          // 跳详情页
          history.push(`/putsStor_edit/4/${topInfo.id}`)
        }
      } else {
        const obj = {
          ...topInfo,
          goodsIds: snaps.map(v => v.id).join(','),
          delSnapIds: delSnapIdsRef.current.length ? delSnapIdsRef.current : '',
          snaps: snaps.map(v => ({
            goodsId: v.id,
            id: v.id2 ? v.id2 : null,
            orderId: topInfo.id,
            snap: JSON.stringify(v)
          }))
        }
        // console.log(123, obj.snaps)

        // if (1 + 1 === 2) return

        if (val === '草稿') {
          // 存草稿 当前页保存 不跳转
          const res = await D6_APIsaveDraft(obj)
          if (res.code === 0) {
            MessageFu.success('草稿保存成功')
          }
        } else {
          const res: any = val === '创建' ? await D6_APIsaveCreate(obj) : await D6_APIsaveApply(obj)
          if (res.code === 0) {
            MessageFu.success(`${val}成功`)
            // 跳到详情页
            history.push(`/putsStor_edit/4/${topInfo.id}`)
          }
        }
      }
    },
    [auditSta, checkFu, snaps, topInfo]
  )

  // 打开侧边栏
  const [cathet, setCathet] = useState(0)

  const startBtn = useMemo(() => {
    const arr: any[] = [
      {
        title: '藏品编号',
        render: (item: C1GoodType) => {
          return (
            <span
              onClick={() => setCathet(item.id)}
              className={classNames('D1GtNum', item.id === cathet ? 'D1GtNumAc' : '')}
            >
              {item.num || '（空）'}
            </span>
          )
        }
      },
      {
        title: '编号类型',
        render: (item: C1GoodType) => item.numName || '（空）'
      }
    ]

    if (topInfo.sonTypeName === '1') {
      arr.push({
        title: '藏品分库号',
        render: (item: C1GoodType) => item.siteNum
      })
    }

    return arr
  }, [cathet, topInfo.sonTypeName])

  const tableLastBtn = useMemo(() => {
    const arr: any[] = []

    if (topInfo.sonTypeName !== '3') {
      arr.push({
        title: `${topInfo.sonTypeName === '1' ? '退还人' : '退回者'}`,
        width: 150,
        render: (item: C1GoodType) => {
          const keyTxt = topInfo.sonTypeName === '1' ? 'txt1' : 'txt3'

          return (
            <TextArea
              readOnly={['3', '4'].includes(key)}
              placeholder={
                ['3', '4'].includes(key) && !item[keyTxt] ? '（空）' : '请输入内容，不超过200字'
              }
              maxLength={200}
              value={item[keyTxt]}
              onChange={e =>
                setSnaps(
                  snaps.map(v => ({
                    ...v,
                    [keyTxt]: v.id === item.id ? e.target.value.trim() : v[keyTxt]
                  }))
                )
              }
            />
          )
        }
      })
      arr.push({
        title: `${topInfo.sonTypeName === '1' ? '点收人' : '库保员'}`,
        width: 150,
        render: (item: C1GoodType) => {
          const keyTxt = topInfo.sonTypeName === '1' ? 'txt2' : 'txt4'
          return (
            <TextArea
              readOnly={['3', '4'].includes(key)}
              placeholder={
                ['3', '4'].includes(key) && !item[keyTxt] ? '（空）' : '请输入内容，不超过200字'
              }
              maxLength={200}
              value={item[keyTxt]}
              onChange={e =>
                setSnaps(
                  snaps.map(v => ({
                    ...v,
                    [keyTxt]: v.id === item.id ? e.target.value.trim() : v[keyTxt]
                  }))
                )
              }
            />
          )
        }
      })
      arr.push({
        title: `${topInfo.sonTypeName === '1' ? '退库时间' : '退库日期'}`,
        width: 130,
        render: (item: C1GoodType) => (
          <DatePicker
            placeholder={['3', '4'].includes(key) ? '（空）' : '请选择'}
            disabled={['3', '4'].includes(key)}
            allowClear={true}
            value={item.date ? dayjs(item.date) : null}
            onChange={e =>
              setSnaps(
                snaps.map(v => ({
                  ...v,
                  date: v.id === item.id ? (e ? dayjs(e).format('YYYY-MM-DD') : '') : v.date
                }))
              )
            }
          />
        )
      })
    }

    arr.push({
      title: '备注',
      width: 150,
      render: (item: C1GoodType) => (
        <TextArea
          readOnly={['3', '4'].includes(key)}
          placeholder={
            ['3', '4'].includes(key) && !item.beiZhu ? '（空）' : '请输入内容，不超过200字'
          }
          maxLength={200}
          value={item.beiZhu}
          onChange={e =>
            setSnaps(
              snaps.map(v => ({
                ...v,
                beiZhu: v.id === item.id ? e.target.value.trim() : v.beiZhu
              }))
            )
          }
        />
      )
    })
    arr.push({
      title: '操作',
      render: (item: C1GoodType) => {
        return (
          <>
            <Button size='small' type='text' onClick={() => openGoodsInfoFu(item.id)}>
              查看
            </Button>
            {['3', '4'].includes(key) ? null : (
              <MyPopconfirm
                txtK='删除'
                onConfirm={() => {
                  if (item.id2 && !delSnapIdsRef.current.includes(item.id2))
                    delSnapIdsRef.current.push(item.id2)
                  setSnaps(snaps.filter(v => v.id !== item.id))
                }}
              />
            )}
          </>
        )
      }
    })

    return arr
  }, [key, snaps, topInfo.sonTypeName])

  // 点击添加按钮
  const [nowSta, setNowSta] = useState({ key: '', id: '' })

  // 查看的按钮创建-提交-撤回
  const lookBtnFu = useCallback(
    async (val: '创建' | '提交' | '撤回') => {
      if (val !== '撤回') {
        if (snaps.length === 0) return MessageFu.warning('请添加藏品')
      }
      const obj = {
        ...topInfo,
        goodsIds: snaps.map(v => v.id).join(','),
        delSnapIds: delSnapIdsRef.current.length ? delSnapIdsRef.current : '',
        snaps: snaps.map(v => ({
          goodsId: v.id,
          id: v.id2 ? v.id2 : null,
          orderId: topInfo.id,
          snap: JSON.stringify(v)
        }))
      }

      // console.log(123, obj.snaps)

      // if (1 + 1 === 2) return

      const res =
        val === '创建'
          ? await D6_APIsaveCreate(obj)
          : val === '提交'
          ? await D6_APIsaveApply(obj)
          : await D6_APIrevocation(id)

      if (res.code === 0) {
        if (sollrDom.current) sollrDom.current.scrollTop = 0
        MessageFu.success(val + '成功')
        getInfoFu()
      }
    },
    [getInfoFu, id, snaps, topInfo]
  )

  // 查看模式点击删除
  const delFu = useCallback(async () => {
    const res = await D6_APIdel(id)
    if (res.code === 0) {
      MessageFu.success('删除成功')
      history.push('/putsStor')
    }
  }, [id])

  // 查看模式点击审批 编辑
  const lookJumpFu = useCallback(
    (val: '审批' | '编辑') => {
      history.push(`/putsStor_edit/${val === '审批' ? 3 : 2}/${id}`)
      MessageFu.success(`已跳转至${val}页面`)
    },
    [id]
  )

  // 查看模式下的按钮
  const lookBtn = useMemo(() => {
    return (
      <>
        {btnFlagFu2(topInfo)['创建'] ? (
          <Button type='primary' onClick={() => lookBtnFu('创建')}>
            创建
          </Button>
        ) : null}
        {btnFlagFu2(topInfo)['提交'] ? (
          <Button type='primary' onClick={() => lookBtnFu('提交')}>
            提交
          </Button>
        ) : null}

        {btnFlagFu2(topInfo)['撤回'] ? (
          <MyPopconfirm
            txtK='撤回'
            onConfirm={() => lookBtnFu('撤回')}
            Dom={
              <Button type='primary' danger>
                撤回
              </Button>
            }
          />
        ) : null}

        {btnFlagFu2(topInfo)['审批'] ? (
          <Button type='primary' onClick={() => lookJumpFu('审批')}>
            审批
          </Button>
        ) : null}
        {btnFlagFu2(topInfo)['编辑'] ? (
          <Button type='primary' onClick={() => lookJumpFu('编辑')}>
            编辑
          </Button>
        ) : null}

        {btnFlagFu2(topInfo)['重新提交'] ? (
          <Button type='primary' onClick={() => lookBtnFu('提交')}>
            重新提交
          </Button>
        ) : null}

        {EXbtnFu(topInfo)}

        {btnFlagFu2(topInfo)['删除'] ? (
          <MyPopconfirm
            txtK='删除'
            onConfirm={() => delFu()}
            Dom={
              <Button type='primary' danger>
                删除
              </Button>
            }
          />
        ) : null}

        <Button onClick={() => history.push('/putsStor')}>返回</Button>
      </>
    )
  }, [delFu, lookBtnFu, lookJumpFu, topInfo])

  // 申请记录
  const [auditsShow, setAuditsShow] = useState(false)

  // 变更分库缩写 清空 藏品清单
  const [isModalOpen, setIsModalOpen] = useState(0)

  // 批量填写
  const [batch, setBatch] = useState(false)

  return (
    <div className={styles.D6edit}>
      <div className='pageTitle'>藏品出库-{pageTitTxt}</div>

      <div className='D6main' ref={sollrDom}>
        {['3'].includes(key) ? (
          <X3auditInfo
            dirCode='D6putsStor'
            myUrl='cms/goodsFile/upload'
            auditSta={auditSta}
            auditStaFu={val => setAuDitSta(val)}
            ref={ZAuditRef}
          />
        ) : null}

        {/* 表单字段、附件等 */}
        <div className='D6Tit'>
          申请信息
          {key === '1' ? null : (
            <Button type='dashed'>{Reflect.get(statusObj, topInfo.status)}</Button>
          )}
        </div>

        <div className='D6rowAll'>
          <div className='D6row'>
            <div className='D6rowll'>
              <span> * </span>提退类型：
            </div>
            <div className='D6rowrr'>
              <Radio.Group
                value={topInfo.sonTypeName}
                disabled={['3', '4'].includes(key)}
                onChange={e => {
                  setTopInfo({
                    ...topInfo,
                    sonTypeName: e.target.value
                  })
                }}
                options={[
                  { value: '1', label: '分库藏品提退' },
                  { value: '2', label: '藏品馆内提退' },
                  { value: '3', label: '借用藏品点交' }
                ]}
              />
            </div>
          </div>

          {['1', '2'].includes(topInfo.sonTypeName) ? (
            <div className='D6row'>
              <div className='D6rowll'>
                <span> * </span>提退单编号：
              </div>
              <div className='D6rowrr'>
                <Input
                  value={topInfo.num}
                  onChange={e => setTopInfo({ ...topInfo, num: e.target.value.trim() })}
                  readOnly={['3', '4'].includes(key)}
                  placeholder='请输入内容'
                  maxLength={30}
                  showCount
                />
              </div>
            </div>
          ) : null}

          {topInfo.sonTypeName === '3' ? (
            <div className='D6row'>
              <div className='D6rowll'>
                <span> * </span>借出单位：
              </div>
              <div className='D6rowrr'>
                <Input
                  value={topInfo.borrowInUnit}
                  onChange={e => setTopInfo({ ...topInfo, borrowInUnit: e.target.value.trim() })}
                  readOnly={['3', '4'].includes(key)}
                  placeholder='请输入内容'
                  maxLength={30}
                  showCount
                />
              </div>
            </div>
          ) : null}

          <div className='D6row'>
            <div className='D6rowll'>
              <span> * </span>
              {topInfo.sonTypeName === '1'
                ? '提用单位（部门）'
                : topInfo.sonTypeName === '1'
                ? '提用部门'
                : '借入单位'}
              ：
            </div>
            <div className='D6rowrr'>
              <Input
                value={topInfo.sonUnit}
                onChange={e => setTopInfo({ ...topInfo, sonUnit: e.target.value.trim() })}
                readOnly={['3', '4'].includes(key)}
                placeholder='请输入内容'
                maxLength={30}
                showCount
              />
            </div>
          </div>

          <div className='D6row'>
            <div className='D6rowll'>
              <span> * </span>
              {topInfo.sonTypeName === '3' ? '借用日期' : '提用日期'}：
            </div>
            <div className='D6rowrr'>
              <DatePicker
                disabled={['3', '4'].includes(key)}
                allowClear={false}
                value={topInfo.date ? dayjs(topInfo.date) : null}
                onChange={e => timeChange(e, 'date')}
              />
            </div>
          </div>

          {['1', '2'].includes(topInfo.sonTypeName) ? (
            <div className='D6row'>
              <div className='D6rowll'>
                <span> * </span>
                {topInfo.sonTypeName === '2' ? '提用原因' : '提用目的'}：
              </div>
              <div className='D6rowrr'>
                <Input
                  value={topInfo.effect}
                  onChange={e => setTopInfo({ ...topInfo, effect: e.target.value.trim() })}
                  readOnly={['3', '4'].includes(key)}
                  placeholder='请输入内容'
                  maxLength={30}
                  showCount
                />
              </div>
            </div>
          ) : (
            <>
              <div className='D6row'>
                <div className='D6rowll'>
                  <span> * </span>
                  归还日期：
                </div>
                <div className='D6rowrr'>
                  <DatePicker
                    disabled={['3', '4'].includes(key)}
                    allowClear={false}
                    value={topInfo.returnDate ? dayjs(topInfo.returnDate) : null}
                    onChange={e => timeChange(e, 'returnDate')}
                  />
                </div>
              </div>
              <div className='D6row'>
                <div className='D6rowll'>
                  <span> * </span>
                  接收单位：
                </div>
                <div className='D6rowrr'>
                  <Input
                    value={topInfo.receiveUnit}
                    onChange={e => setTopInfo({ ...topInfo, receiveUnit: e.target.value.trim() })}
                    readOnly={['3', '4'].includes(key)}
                    placeholder='请输入内容'
                    maxLength={30}
                    showCount
                  />
                </div>
              </div>
              <div className='D6row'>
                <div className='D6rowll'>
                  <span> * </span>
                  归还单位：
                </div>
                <div className='D6rowrr'>
                  <Input
                    value={topInfo.returnUnit}
                    onChange={e => setTopInfo({ ...topInfo, returnUnit: e.target.value.trim() })}
                    readOnly={['3', '4'].includes(key)}
                    placeholder='请输入内容'
                    maxLength={30}
                    showCount
                  />
                </div>
              </div>
            </>
          )}

          <div className='D6row'>
            <div className='D6rowll'>
              <span> * </span>分库缩写：
            </div>
            <div className='D6rowrr'>
              <Select
                disabled={['3', '4'].includes(key)}
                placeholder='请搜索选择'
                showSearch
                filterOption={(input, option) => {
                  const txt = option!.label
                  return txt.toLowerCase().includes(input.toLowerCase())
                }}
                options={storageIdArr.map(v => ({ label: v.num + ' - ' + v.name, value: v.id }))}
                // fieldNames={{ label: 'num', value: 'num' }}
                allowClear={false}
                value={topInfo.storageId || null}
                onChange={e => {
                  if (topInfo.storageId && topInfo.storageId !== e && snaps.length) {
                    setIsModalOpen(e)
                  } else setTopInfo({ ...topInfo, storageId: e ? e : null })
                }}
              />
            </div>
          </div>
        </div>

        {/* 藏品清单 */}
        <div className='D6googsBox'>
          <div className='D6Tit2'>
            <div className='D6Tit2ll'>藏品清单</div>
            <div className='D6Tit2rr'>
              {['3', '4'].includes(key) ? null : (
                <>
                  {['1', '2'].includes(topInfo.sonTypeName) ? (
                    <>
                      <Button
                        type='primary'
                        disabled={snaps.length === 0}
                        onClick={() => setBatch(true)}
                      >
                        批量填写
                      </Button>
                      &emsp;
                    </>
                  ) : null}

                  <Button
                    type='primary'
                    onClick={() => {
                      if (!topInfo.storageId) return MessageFu.warning('请先选择分库缩写')
                      setNowSta({
                        key: '藏品入库',
                        id: 'cms/orderOut/goods/getList'
                      })
                    }}
                  >
                    新增
                  </Button>
                </>
              )}
            </div>
          </div>

          {/* 表格 */}
          <MyTable
            list={snaps}
            columnsTemp={D6tableCgoods(topInfo.sonTypeName as '1')}
            startBtn={startBtn}
            lastBtn={tableLastBtn}
            pagingInfo={false}
          />
        </div>

        {/* 申请流程 */}
        {auditsShow ? (
          <ZflowTable tableArr={topInfo.audits || []} closeFu={() => setAuditsShow(false)} />
        ) : null}

        {/* 底部按钮 */}
        <div className='D6btn'>
          {['3', '4'].includes(key) && topInfo.audits && topInfo.audits.length ? (
            <Button type='primary' onClick={() => setAuditsShow(true)}>
              申请记录
            </Button>
          ) : null}

          {key === '4' ? (
            lookBtn
          ) : (
            <>
              {key === '3' ? (
                <Button type='primary' onClick={() => btnClickFu('审批')}>
                  审批
                </Button>
              ) : (
                <Button type='primary' onClick={() => btnClickFu(key === '1' ? '创建' : '保存')}>
                  {key === '1' ? '创建' : '保存'}
                </Button>
              )}

              {key === '1' ? (
                <Button type='primary' onClick={() => btnClickFu('草稿')}>
                  存草稿
                </Button>
              ) : null}

              <MyPopconfirm txtK='取消' onConfirm={() => history.push('/putsStor')} />
            </>
          )}
        </div>

        {/* 附件归档 */}
        {topInfo.status === 4 ? (
          <ZupFileTable
            listTemp={topInfo.filing || []}
            dirCode='D6putsStor'
            myUrl='cms/orderOut/upload'
            fromData={{ moduleId: topInfo.id }}
          />
        ) : null}
      </div>

      {/* 打开侧边栏 */}
      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />

      {nowSta.id ? (
        <ZGaddNow
          canObj={{ storageId: topInfo.storageId }}
          nowSta={nowSta}
          closeFu={() => setNowSta({ key: '', id: '' })}
          dataResFu={data => {
            const dataTemp = [...data]
            dataTemp.forEach(v => {
              // id2表示的是自己这条数据的id id才是goodsId
              const obj = snapsID2ref.current.find(c => c.goodsId === v.id)

              if (obj) v.id2 = obj.id
            })
            setSnaps(dataTemp)
          }}
          oldCheckArr={snaps}
        />
      ) : null}

      {/* 分库缩写改变的时候校验一下 */}
      <Modal
        wrapClassName={styles.D6editMo}
        title='变更分库后，将清空当前的藏品清单'
        open={!!isModalOpen}
        footer={[]}
      >
        <div className='D6editMoBtn'>
          <Button
            type='primary'
            onClick={() => {
              setTopInfo({ ...topInfo, storageId: isModalOpen })

              snaps.forEach(v => {
                if (!delSnapIdsRef.current.includes(v.id)) delSnapIdsRef.current.push(v.id)
              })
              setSnaps([])
              setIsModalOpen(0)
            }}
          >
            继续
          </Button>
          &emsp;
          <Button onClick={() => setIsModalOpen(0)}>取消</Button>
        </div>
      </Modal>

      {/* 批量填写 */}
      {batch ? (
        <D6batchInput
          type={topInfo.sonTypeName as '1'}
          closeFu={() => setBatch(false)}
          succFu={arr => {
            setSnaps(
              snaps.map(v => {
                // 动态合并所有 arr 中的键值对
                return {
                  ...v,
                  ...Object.fromEntries(arr.map(item => [item.key, item.value]))
                }
              })
            )
          }}
        />
      ) : null}
    </div>
  )
}

const MemoD6edit = React.memo(D6edit)

export default MemoD6edit