import styles from './index.module.scss'
import { Button } from 'antd'
import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState
} from 'react'
import { GuShiType } from './data'
import MyTable from '@/components/MyTable'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { guShiAPI_dels, guShiAPI_getList } from '@/store/action/Cledger/C1ledger'
import GuShiMo from './GuShiMo'

type Props = {
  moduleId: number
  // 外层藏品id
  goodsId: number
  ref: any
}

function GuShi({ moduleId, goodsId }: Props, ref: any) {
  // 故事数据
  const [guShiList, setGuShiList] = useState<GuShiType[]>([])

  const getListFu = useCallback(async (goodsId: number) => {
    const res = await guShiAPI_getList(goodsId)
    if (res.code === 0) {
      setGuShiList(res.data.records || [])
    }
  }, [])

  useEffect(() => {
    if (goodsId > 0) {
      getListFu(goodsId)
    }
  }, [getListFu, goodsId])

  // 把删除的id存起来
  const delIds = useRef<number[]>([])

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      setGuShiList(guShiList.filter(v => v.id !== id))
      if (goodsId > 0) delIds.current.push(id)
      else {
        // 外层藏品是新增的时候-真的删除数据
        await guShiAPI_dels([id])
      }
      MessageFu.success('删除成功')
    },
    [goodsId, guShiList]
  )

  // 打开弹窗
  const [addInfo, setAddInfo] = useState({} as GuShiType)

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: GuShiType) => {
          return (
            <>
              <Button size='small' type='text' onClick={() => setAddInfo(item)}>
                编辑
              </Button>
              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
            </>
          )
        }
      }
    ]
  }, [delTableFu])

  // 给父组件调用
  const setGuShiListBySon = useCallback((list: GuShiType[]) => {
    setGuShiList(list || [])
  }, [])

  const getGuShiListBySon = useCallback(() => {
    return {
      guShiList: guShiList || [],
      delIds: delIds.current || []
    }
  }, [guShiList])
  useImperativeHandle(ref, () => ({
    setGuShiListBySon,
    getGuShiListBySon
  }))

  return (
    <div className={styles.GuShi}>
      <Button onClick={() => setAddInfo({ id: -1 } as GuShiType)}>新增</Button>
      <MyTable
        classKey='GuShiTable'
        list={guShiList}
        columnsTemp={[['txt', '故事标题', 'name']]}
        lastBtn={tableLastBtn}
        pagingInfo={false}
      />
      {addInfo.id ? (
        <GuShiMo
          moduleId={moduleId}
          guShiInfo={addInfo}
          closeFu={() => setAddInfo({} as GuShiType)}
          succFu={(val, info) => {
            if (val === '新增') setGuShiList([info, ...guShiList])
            else {
              setGuShiList(
                guShiList.map(v => {
                  if (v.id === info.id) return info
                  else return v
                })
              )
            }
          }}
        />
      ) : null}
    </div>
  )
}

export default forwardRef(GuShi)
