import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { A3EditInfoType, A3tableType } from './type'
import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { A3_APIdel, A3_APIgetList } from '@/store/action/A3course'
import MyTable from '@/components/MyTable'
import { RootState } from '@/store'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { A3tableC } from '@/utils/tableData'
import A3typeTable from './A3typeTable'
import A3add from './A3add'
function A3course() {
  const dispatch = useDispatch()

  const [fromData, setFromData] = useState({ pageNum: 1, pageSize: 10 })

  const getListFu = useCallback(() => {
    dispatch(A3_APIgetList(fromData))
  }, [dispatch, fromData])

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

  const tableInfo = useSelector((state: RootState) => state.A3course.tableInfo)

  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A3_APIdel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A3tableType) => (
          <>
            <Button
              size='small'
              type='text'
              onClick={() => setEditInfo({ id: item.id, txt: '查看' })}
            >
              查看
            </Button>
            <Button
              size='small'
              type='text'
              onClick={() => setEditInfo({ id: item.id, txt: '编辑' })}
            >
              编辑
            </Button>

            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
          </>
        )
      }
    ]
  }, [delTableFu])

  // 类别设置
  const [typeShow, setTypeShow] = useState(false)

  //查看、新增、编辑
  const [editInfo, setEditInfo] = useState<A3EditInfoType>({
    id: 0,
    txt: ''
  })

  return (
    <div className={styles.A3course}>
      <div className='pageTitle'>课程管理 {editInfo.id ? ` - ${editInfo.txt}` : ''}</div>

      <div className='A3top'>
        <Button type='primary' onClick={() => setTypeShow(true)}>
          类别设置
        </Button>
        &emsp;
        <Button type='primary' onClick={() => setEditInfo({ id: -1, txt: '新增' })}>
          新增
        </Button>
      </div>

      <div className='A3main'>
        <MyTable
          yHeight={640}
          list={tableInfo.list}
          columnsTemp={A3tableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
        />
      </div>

      {/* 类别设置 */}
      {typeShow ? (
        <div className='A3tanBox'>
          <A3typeTable
            closeFu={() => {
              setTypeShow(false)
              getListFu()
            }}
          />
        </div>
      ) : null}

      {/* 新增 / 编辑 / 查看 */}
      {editInfo.id ? (
        <A3add
          editInfo={editInfo}
          closeFu={() => setEditInfo({ id: 0, txt: '新增' })}
          addTableFu={() => setFromData({ pageNum: 1, pageSize: 10 })}
          editTableFu={getListFu}
        ></A3add>
      ) : null}
    </div>
  )
}

const MemoA3course = React.memo(A3course)

export default MemoA3course
