import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import { B1_APIgetList } from '@/store/action/B1exhibit'
import { B1tableC } from '@/utils/tableData'
import B1edit from './B1edit'
import { A2_APIgetConfig, A2_APIsetConfig } from '@/store/action/A2orderSet'
import { MessageFu } from '@/utils/message'
import A2NoTime from '../A2orderSet/A2NoTime'
import A2xuZhi from '../A2orderSet/A2xuZhi'
function B1exhibit() {
  const dispatch = useDispatch()

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

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

  const { list } = useSelector((state: RootState) => state.B1exhibit)

  // 编辑
  const [edit, setEdit] = useState(false)

  // 1111111111111不可预约日期--------------开始
  const noListRef = useRef('')

  const getNoListFu = useCallback(async () => {
    const res = await A2_APIgetConfig('cms/configExhibition/getConfig', 15)
    if (res.code === 0) {
      noListRef.current = res.data.rtf
    }
  }, [])

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

  const [noTxt, setNoTxt] = useState('')

  // 点击提交或者取消
  const A2NoBtn = useCallback(
    async (val: string[] | null) => {
      let str = ''

      if (val) {
        const arr = val.map(v => v.replaceAll('-', '月') + '日')
        str = arr.join(',')
      }

      const res = await A2_APIsetConfig('cms/configExhibition/setConfig', { id: 15, rtf: str })
      if (res.code === 0) {
        MessageFu.success('设置不可预约日期成功!')
        getNoListFu()
        setNoTxt('')
      }
    },
    [getNoListFu]
  )
  // 1111111111111不可预约日期--------------结束

  // 2222222222------------- 预约须知---------开始
  const [xuZhi, setXuZhi] = useState(false)
  // 2222222222------------- 预约须知---------结束

  return (
    <div className={styles.B1exhibit}>
      <div className='pageTitle'>展馆预约设置{edit ? ' - 编辑' : null}</div>
      <div className='B1top'>
        <Button type='primary' onClick={() => setNoTxt(noListRef.current || '空')}>
          设置不可预约日期
        </Button>
        &emsp;
        <Button type='primary' onClick={() => setXuZhi(true)}>
          设置预约需知
        </Button>
        &emsp;
        <Button type='primary' onClick={() => setEdit(true)}>
          编辑
        </Button>
      </div>
      <MyTable list={list} columnsTemp={B1tableC} pagingInfo={false} isNull='闭馆' />

      {/* 编辑 */}
      {edit ? <B1edit list={list} closeFu={() => setEdit(false)} editTableFu={getListFu} /> : null}

      {/* 不可预约日期设置 */}
      {noTxt ? (
        <A2NoTime
          num={20}
          baseTime={noTxt}
          editFu={val => A2NoBtn(val)}
          closeFu={() => setNoTxt('')}
        />
      ) : null}

      {/*预约须知 */}
      {xuZhi ? (
        <A2xuZhi
          setSrc='cms/configExhibition/setConfig'
          getSrc='cms/configExhibition/getConfig'
          sId={16}
          closeFu={() => setXuZhi(false)}
        />
      ) : null}
    </div>
  )
}

const MemoB1exhibit = React.memo(B1exhibit)

export default MemoB1exhibit