import React, { useMemo, useCallback } from 'react'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import { E2_APIgetList, E2_APIdel, E2_APIgetListAll } from '@/store/action/Eculture/E2story'
import { MessageFu } from '@/utils/message'
import TableList from '@/pages/Zother/TableList'
import { baseFormData } from '@/pages/Zother/data'
import MyPopconfirm from '@/components/MyPopconfirm'
import { storyTableC } from '@/utils/tableData'
import { Button } from 'antd'
import history from '@/utils/history'
import { useDispatch } from 'react-redux'
import { exportExcelFile } from '@/utils/xlsxExport'

const E2topSearch = [
  {
    type: 'input',
    key: 'searchKey',
    placeholder: `请输入故事标题、关联藏品`
  },
  {
    type: 'input',
    key: 'searchTagName',
    placeholder: '搜索藏品标签'
  },
  {
    type: 'time',
    key: ['startTime', 'endTime'],
    placeholder: [`录入日期开始`, `录入日期结束`]
  }
]

const D1baseFormData = baseFormData()

function D1register() {
  const dispatch = useDispatch()
  // 从仓库拿数据
  const tableInfo = useSelector((state: RootState) => state.E2story.tableInfo)

  const getListFu = useCallback(() => {
    dispatch(E2_APIgetList(D1baseFormData))
  }, [dispatch])

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

  // 数据导出
  const dataExport = async () => {
    const allData = await E2_APIgetListAll()
    const listData = allData.data.records.map((item: any) => {
      return {
        故事标题: item.name,
        关联藏品: item.goodName,
        藏品标签: item.tagName,
        录入人: item.creatorName,
        录入日期: item.createTime
      }
    })
    exportExcelFile(listData, [100, 200, 100, 100, 150], '故事管理数据')
  }

  // 故事管理定制右侧内容
  const storyTableListToprr = ({
    clickSearch,
    resetSelectFu
  }: {
    clickSearch: () => void
    resetSelectFu: () => void
  }) => {
    return (
      <>
        <Button type='primary' onClick={() => history.push(`/story_edit/1/null`)}>
          新增故事
        </Button>
        <Button type='primary' onClick={dataExport}>
          数据导出
        </Button>
        <Button type='primary' onClick={clickSearch}>
          查询
        </Button>
        <Button onClick={resetSelectFu}>重置</Button>
      </>
    )
  }
  // 故事管理定制右侧操作按钮
  // 点击各种操作按钮
  const tableBtnFu = useCallback((id: number, key: string) => {
    history.push(`/story_edit/${key}/${id}`)
  }, [])

  const storyTableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: any) => (
          <>
            <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '4')}>
              查看
            </Button>
            <Button size='small' type='text' onClick={() => tableBtnFu(item.id, '2')}>
              编辑
            </Button>
            <MyPopconfirm txtK='删除' onConfirm={() => delFu(item.id)} />
          </>
        )
      }
    ]
  }, [delFu, tableBtnFu])

  return (
    <div className={styles.E2story}>
      <div className='pageTitle'>故事管理</div>

      <TableList
        baseFormData={D1baseFormData}
        getListAPI={E2_APIgetList}
        pageKey='story'
        tableInfo={tableInfo}
        columnsTemp={storyTableC}
        rightBtnWidth={350}
        yHeight={585}
        searchDom={E2topSearch}
        storyTableListToprr={storyTableListToprr}
        storyTableLastBtn={storyTableLastBtn}
      />
    </div>
  )
}

const MemoD1register = React.memo(D1register)

export default MemoD1register
