import React, { useMemo } from 'react'
import styles from './index.module.scss'
import { selectObj, getDictFu } from '@/utils/dataChange'
import { openLink } from '@/utils/history'
import TableList from '@/pages/Zother/TableList'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import { API_getGoodsList } from '@/store/action/Cledger/C1ledger'
import { baseFormData } from '@/pages/Zother/data'
import { goodsSonTableC } from '@/utils/tableData'
import { Button } from 'antd'

const C1topSearch = [
  {
    type: 'input',
    key: 'searchKey',
    placeholder: '搜索藏品登记号、藏品名称'
  },
  {
    type: 'input',
    key: 'searchTagName',
    placeholder: `搜索藏品标签`
  },
  {
    type: 'select',
    key: 'level',
    placeholder: '级别',
    options: selectObj['藏品级别']
  },
  // // 待完善sg
  // {
  //   type: 'cascader',
  //   key: 'typeDictId',
  //   placeholder: '类别',
  //   options: getDictFu('藏品类别')
  // },
  {
    type: 'cascader',
    key: 'ageDictId',
    placeholder: '年代',
    options: getDictFu('藏品年代')
  },
  {
    type: 'cascader',
    key: 'textureDictId',
    placeholder: '质地',
    options: getDictFu('质地')
  },
  {
    type: 'select',
    key: 'tornLevel',
    placeholder: '完残程度',
    options: selectObj['完残程度']
  },
  // TODO
  {
    type: 'select',
    key: 'status',
    placeholder: '入藏状态',
    options: selectObj['藏品入藏状态']
  },
  {
    type: 'select',
    key: 'siteStatus',
    placeholder: '库存状态',
    options: selectObj['藏品库存状态']
  },
  {
    type: 'select',
    key: 'siteLoc',
    placeholder: `搜索库房位置`
  }
]

const C1baseFormData = {
  ...baseFormData,
  typeDictId: '',
  ageDictId: '',
  textureDictId: ''
}

const columnsTempAdd = [
  ...goodsSonTableC(false),
  ['select', '入藏状态', 'status', selectObj['藏品入藏状态']],
  ['select', '库存状态', 'siteStatus', selectObj['藏品库存状态']],
  ['connectTxt', '库房位置', 'storageName', 'siteLoc']
]

function C3goodsInfo() {
  const tableInfo = useSelector((state: RootState) => state.C1ledger.tableInfo)

  // 故事管理/藏品总账定制右侧内容
  const storyTableListToprr = ({
    clickSearch,
    resetSelectFu
  }: {
    clickSearch: () => void
    resetSelectFu: () => void
  }) => {
    return (
      <>
        <Button type='primary' onClick={clickSearch}>
          查询
        </Button>
        <Button onClick={resetSelectFu}>重置</Button>
      </>
    )
  }

  // 故事管理/藏品总账定制右侧操作按钮
  const storyTableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: any) => (
          <Button size='small' type='text' onClick={() => openLink(`/goodsLook/${item.id}`)}>
            查看
          </Button>
        )
      }
    ]
  }, [])

  return (
    <div className={styles.C3goodsInfo}>
      <div className='pageTitle'>藏品信息</div>

      <TableList
        baseFormData={C1baseFormData}
        getListAPI={API_getGoodsList}
        pageKey='ledger'
        tableInfo={tableInfo}
        columnsTemp={columnsTempAdd}
        rightBtnWidth={140}
        leftRowWidth={'20%'}
        yHeight={592}
        searchDom={C1topSearch}
        storyTableListToprr={storyTableListToprr}
        storyTableLastBtn={storyTableLastBtn}
      />
    </div>
  )
}

const MemoC3goodsInfo = React.memo(C3goodsInfo)

export default MemoC3goodsInfo
