import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { A2_APIdel, A2_APIgetList } from '@/store/action/A2clue'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import MyTable from '@/components/MyTable'
import { A2tableC } from '@/utils/tableData'
import MyPopconfirm from '@/components/MyPopconfirm'
import { Button, Select } from 'antd'
import { A2select1, A2select2 } from './data'
import { A1_APIgetList } from '@/store/action/A1record'
import A2add from './A2add'
import { A1ListSelectType, A1ListType } from '../A1record/data'

const baseFromData = {
  pageNum: 1,
  pageSize: 10,
  type: '',
  martyrId: '',
  status: ''
}

function A2clue() {
  const dispatch = useDispatch()

  // 获取所有烈士信息
  const [listAllRes, setListAllRes] = useState<A1ListSelectType>([])

  const getListAllFu = useCallback(async () => {
    const res = await A1_APIgetList(
      {
        pageNum: 1,
        pageSize: 99999
      },
      true
    )
    if (res.code === 0) {
      const list: A1ListType[] = res.data.records || []
      setListAllRes(
        list.map(c => ({
          value: c.id,
          label: c.name
        }))
      )
    }
  }, [])

  useEffect(() => {
    getListAllFu()
  }, [getListAllFu])
  // 获取所有烈士信息-end

  const [fromData, setFromData] = useState(baseFromData)

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

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

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

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setFromData({ ...baseFromData })
  }, [])

  // 下拉框的改变
  const selectChangeFu = useCallback(
    (value: any, key: 'type' | 'martyrId' | 'status') => {
      setFromData({ ...fromData, [key]: value, pageNum: 1 })
    },
    [fromData]
  )

  // 点击新增、编辑
  const [editId, setEditId] = useState(0)

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

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

  return (
    <div className={styles.A2clue}>
      <div className='pageTitle'>线索管理{editId ? (editId > 0 ? ' - 编辑' : ' - 新增') : ''}</div>

      {/* 顶部筛选 */}
      <div className='A2top'>
        <div className='A2topLeft'>
          <div>
            <Select
              allowClear
              style={{ width: 150 }}
              placeholder='线索类型'
              value={fromData.type || null}
              onChange={e => selectChangeFu(e, 'type')}
              options={A2select1}
            />
          </div>

          <div>
            <Select
              style={{ width: 240 }}
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              allowClear
              placeholder='搜索并选择关联烈士'
              showSearch
              options={listAllRes}
              value={fromData.martyrId || null}
              onChange={e => selectChangeFu(e, 'martyrId')}
            />
          </div>

          <div>
            <Select
              allowClear
              style={{ width: 150 }}
              placeholder='线索状态'
              value={fromData.status || null}
              onChange={e => selectChangeFu(e, 'status')}
              options={A2select2}
            />
          </div>
        </div>

        <div>
          <Button onClick={resetSelectFu}>重置</Button>
          &emsp;
          <Button type='primary' onClick={() => setEditId(-1)}>
            新增
          </Button>
        </div>
      </div>

      {/* 表格主体 */}
      <div className='A2tableBox'>
        <MyTable
          yHeight={645}
          list={tableInfo.list}
          columnsTemp={A2tableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
        />
      </div>
      {editId ? (
        <A2add
          sId={editId}
          closeFu={() => setEditId(0)}
          addTableFu={resetSelectFu}
          upTableFu={getListFu}
          listAllRes={listAllRes}
        />
      ) : null}
    </div>
  )
}

const MemoA2clue = React.memo(A2clue)

export default MemoA2clue
