import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { A61_APIdel, A61_APIgetList } from '@/store/action/A6_1codeSuo'
import { A61FromDataType, A61tableType } from '../type'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import MyPopconfirm from '@/components/MyPopconfirm'
import { Button, Select } from 'antd'
import { A61selectArr } from '../data'
import MyTable from '@/components/MyTable'
import { A61tableC } from '@/utils/tableData'
import A61Mcode from './A61Mcode'

const fromDataBase: A61FromDataType = {
  status: '',
  pageNum: 1,
  pageSize: 10
}

type Props = {
  type: 'live' | 'neighbour'
}

function A61main({ type }: Props) {
  const dispatch = useDispatch()

  const [fromData, setFromData] = useState(fromDataBase)

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

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

  const { tableInfo1, tableInfo2 } = useSelector((state: RootState) => state.A6_1codeSuo)

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

  // 点击复制邀请码
  const copyCode = useCallback((code: string) => {
    let newInput = document.createElement('input')
    newInput.value = code
    // newInput.style.display='none'
    document.body.appendChild(newInput)
    newInput.select()
    document.execCommand('Copy')
    newInput.remove()
    MessageFu.success('复制成功!')
  }, [])

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: A61tableType) => (
          <>
            <Button size='small' type='text' onClick={() => copyCode(item.code)}>
              复制邀请码
            </Button>
            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
          </>
        )
      }
    ]
  }, [copyCode, delTableFu])

  // 点击生成邀请码
  const [openCode, setOpenCode] = useState(false)

  return (
    <div className={styles.A61main}>
      <div className='pageTitle'>认证邀请码</div>

      <div className='A61top'>
        <div className='A61top1'>
          <div className='A61topRow'>
            <span>核销状态：</span>
            <Select
              style={{ width: 200 }}
              value={fromData.status}
              onChange={e => setFromData({ ...fromData, pageNum: 1, status: e })}
              options={A61selectArr}
            />
          </div>
        </div>
        <div className='A61top1'>
          <Button type='primary' onClick={() => setOpenCode(true)}>
            生成邀请码
          </Button>
        </div>
      </div>

      <MyTable
        yHeight={626}
        list={type === 'live' ? tableInfo1.list : tableInfo2.list}
        columnsTemp={A61tableC}
        lastBtn={tableLastBtn}
        pageNum={fromData.pageNum}
        pageSize={fromData.pageSize}
        total={type === 'live' ? tableInfo1.total : tableInfo2.total}
        onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
      />

      {openCode ? (
        <A61Mcode type={type} closeFu={() => setOpenCode(false)} addTableFu={getListFu} />
      ) : null}
    </div>
  )
}

const MemoA61main = React.memo(A61main)

export default MemoA61main
