import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Cascader, Input, Select } from 'antd'
import {
  C1InputKeyArr1,
  C1InputKeyArr2,
  C1InputKeyArr3,
  C1baseFormData,
  C1baseFormData2
} from './data'
import { C1InputKeyType } from './type'
import history, { openGoodsInfoFu } from '@/utils/history'
import MyTable from '@/components/MyTable'
import { C1tableC } from '@/utils/tableData'
import classNames from 'classnames'
import Y1cathet from '@/pages/Y_goodsDetails/Y1cathet'

function C1ledger() {
  const [formData, setFormData] = useState(C1baseFormData)
  const formDataRef = useRef(C1baseFormData)

  useEffect(() => {
    formDataRef.current = formData
  }, [formData])

  // 点击搜索的 时间戳
  const [timeKey, setTimeKey] = useState(0)

  // 点击搜索
  const clickSearch = useCallback(() => {
    setFormData({ ...formData, pageNum: 1 })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [formData])

  // 封装发送请求的函数
  const getListFu = useCallback(() => {
    console.log('发送请求', formDataRef.current)
  }, [])

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

  // 输入框的改变
  const txtChangeFu = useCallback(
    (txt: string, key: C1InputKeyType) => {
      setFormData({
        ...formData,
        [key]: txt
      })
    },
    [formData]
  )

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setFormData(C1baseFormData)
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [])

  // 页码变化
  const paginationChange = useCallback(
    (pageNum: number, pageSize: number) => {
      setFormData({ ...formData, pageNum, pageSize })
      setTimeout(() => {
        setTimeKey(Date.now())
      }, 50)
    },
    [formData]
  )
  // 待完善 各种参数 接口

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: any) => {
          return (
            <Button size='small' type='text' onClick={() => openGoodsInfoFu(item.id)}>
              查看
            </Button>
          )
        }
      }
    ]
  }, [])

  // 高级搜索的切换
  const [advanced, setAdvanced] = useState(false)

  // 点击收起高级搜索
  const advancedFu = useCallback(
    (flag: boolean) => {
      setAdvanced(flag)
      if (!flag) {
        setFormData({ ...formData, ...C1baseFormData2 })
      }
    },
    [formData]
  )

  // 打开侧边栏
  const [cathet, setCathet] = useState(0)

  const startBtn = useMemo(() => {
    return [
      {
        title: '藏品编号',
        render: (item: any) => {
          return (
            <span
              onClick={() => setCathet(item.id)}
              className={classNames('D1GtNum', item.id === cathet ? 'D1GtNumAc' : '')}
            >
              {item.num}
            </span>
          )
        }
      }
    ]
  }, [cathet])

  return (
    <div className={styles.C1ledger}>
      <div className='pageTitle'>藏品总账</div>
      {/* 第一行 */}
      <div className='C1top'>
        <div className='C1topll C1topllAll'>
          {C1InputKeyArr1.map(item => (
            <div key={item.name}>
              <span>{item.name}：</span>

              {item.type === '下拉框' ? <Select placeholder='全部' /> : null}
              {item.type === '输入框' ? (
                <Input
                  placeholder='请输入'
                  maxLength={30}
                  value={formData[item.key]}
                  onChange={e => txtChangeFu(e.target.value, item.key)}
                />
              ) : null}

              {item.type === '级联' ? (
                <Cascader
                  changeOnSelect
                  options={[]}
                  placeholder='全部'
                  // fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                  allowClear={false}
                />
              ) : null}
            </div>
          ))}
        </div>
      </div>

      {/* 第二行 */}
      <div className='C1top C1top2'>
        {advanced ? (
          <div className='C1topll'>
            {C1InputKeyArr2.map(item => (
              <div key={item.name}>
                <span>{item.name}：</span>

                {item.type === '下拉框' ? <Select placeholder='全部' /> : null}
                {item.type === '输入框' ? (
                  <Input
                    placeholder='请输入'
                    maxLength={30}
                    value={formData[item.key]}
                    onChange={e => txtChangeFu(e.target.value, item.key)}
                  />
                ) : null}

                {item.type === '级联' ? (
                  <Cascader
                    changeOnSelect
                    options={[]}
                    placeholder='全部'
                    // fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                    allowClear={false}
                  />
                ) : null}
              </div>
            ))}
          </div>
        ) : (
          <div className='C1topll'></div>
        )}

        <div className='C1toprr'>
          <Button danger={advanced} onClick={() => advancedFu(!advanced)}>
            {advanced ? '收起' : ''}高级搜索
          </Button>
          &emsp;
          <Button type='primary'>批量导出</Button>&emsp;
          <Button type='primary' onClick={() => history.push('/register_edit/1/null/3')}>
            藏品登记
          </Button>
          {advanced ? null : (
            <>
              &emsp;
              <Button type='primary' onClick={clickSearch}>
                查询
              </Button>
              &emsp;
              <Button onClick={resetSelectFu}>重置</Button>
            </>
          )}
        </div>
      </div>

      {/* 第三行 */}
      {advanced ? (
        <div className='C1top C1top2'>
          <div className='C1topll'>
            {C1InputKeyArr3.map(item => (
              <div key={item.name}>
                <span>{item.name}：</span>

                {item.type === '下拉框' ? <Select placeholder='全部' /> : null}
                {item.type === '输入框' ? (
                  <Input
                    placeholder='请输入'
                    maxLength={30}
                    value={formData[item.key]}
                    onChange={e => txtChangeFu(e.target.value, item.key)}
                  />
                ) : null}

                {item.type === '级联' ? (
                  <Cascader
                    changeOnSelect
                    options={[]}
                    placeholder='全部'
                    // fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                    allowClear={false}
                  />
                ) : null}
              </div>
            ))}
          </div>
          <div className='C1toprr'>
            <Button type='primary' onClick={clickSearch}>
              查询
            </Button>
            &emsp;
            <Button type='primary' onClick={resetSelectFu}>
              重置
            </Button>
          </div>
        </div>
      ) : null}

      {/* 表格 */}
      <MyTable
        yHeight={advanced ? 540 : 595}
        list={[{ id: 66, thumb: '', num: 'xxx' }]}
        columnsTemp={C1tableC}
        lastBtn={tableLastBtn}
        startBtn={startBtn}
        pageNum={formData.pageNum}
        pageSize={formData.pageSize}
        total={0}
        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
      />

      {/* 打开侧边栏 */}
      <Y1cathet sId={cathet} closeFu={() => setCathet(0)} />
    </div>
  )
}

const MemoC1ledger = React.memo(C1ledger)

export default MemoC1ledger
