import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input } from 'antd'
import { E2_APIgetList } from '@/store/action/Eculture/E2story'
import MyTable from '@/components/MyTable'
import { GI4tableC } from '@/utils/tableData'
import { GuShiType } from '@/pages/Zother/GuShi/data'
import GuShiMo from '@/pages/Zother/GuShi/GuShiMo'
import history from '@/utils/history'

const baseFormData = {
  searchKey: '',
  pageNum: 1,
  pageSize: 99999
}

type Props = {
  goodId: number
}

function GItab4({ goodId }: Props) {
  const [tableObj, setTableObj] = useState<{ list: GuShiType[]; total: number }>({
    list: [],
    total: 0
  })

  const [formData, setFormData] = useState({ ...baseFormData })

  const formDataRef = useRef({ ...baseFormData })

  useEffect(() => {
    formDataRef.current = formData
  }, [formData])

  // 点击搜索的 时间戳
  const [timeKey, setTimeKey] = useState(0)

  // 点击搜索
  const clickSearch = useCallback(() => {
    setFormData({ ...formData, pageNum: 1 })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [formData])

  // 封装发送请求的函数
  const getListFu = useCallback(async () => {
    if (goodId) {
      const params = {
        ...formDataRef.current,
        goodId
      }

      const res = await E2_APIgetList(params, true)
      if (res.code === 0) {
        const obj = {
          list: res.data.records || [],
          total: res.data.total
        }
        setTableObj(obj)
      }
    }
  }, [goodId])

  useEffect(() => {
    getListFu()
  }, [getListFu, timeKey])

  // 输入框的改变
  const txtChangeFu = useCallback(
    (txt: string, key: any) => {
      setFormData({
        ...formData,
        [key]: txt
      })
    },
    [formData]
  )
  // 点击重置
  const resetSelectFu = useCallback(() => {
    setFormData({ ...baseFormData })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [])

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: GuShiType) => (
          <>
            <Button size='small' type='text' onClick={() => setAddInfo(item)}>
              编辑
            </Button>
            <Button
              size='small'
              type='text'
              onClick={() => history.push(`/story_edit/4/${item.id}`)}
            >
              查看
            </Button>
          </>
        )
      }
    ]
  }, [])

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

  return (
    <div className={styles.GItab4}>
      <div className='GI4top'>
        <div>
          <Input
            style={{ width: 300 }}
            placeholder='请输入故事名称'
            maxLength={30}
            value={formData.searchKey}
            onChange={e => txtChangeFu(e.target.value, 'searchKey')}
          />
          <Button type='primary' onClick={clickSearch}>
            查询
          </Button>
          <Button onClick={resetSelectFu}>重置</Button>
        </div>
        <Button type='primary' onClick={() => setAddInfo({ id: -1 } as GuShiType)}>
          新增故事
        </Button>
      </div>

      <MyTable
        classKey='GItab4'
        yHeight={560}
        list={tableObj.list}
        columnsTemp={GI4tableC}
        lastBtn={tableLastBtn}
        pagingInfo={false}
        widthSet={{ remark: 800 }}
      />

      {addInfo.id ? (
        <GuShiMo
          goodIds={goodId}
          moduleId=''
          guShiInfo={addInfo}
          closeFu={() => setAddInfo({} as GuShiType)}
          succFu={(val, info) => {
            if (val === '新增') resetSelectFu()
            else clickSearch()
          }}
        />
      ) : null}
    </div>
  )
}

const MemoGItab4 = React.memo(GItab4)

export default MemoGItab4
