import React, { useCallback, useEffect, 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 { C1_APIgetList, C1_APIsavebk, C1_APIgetbk, C1_APIdelbk } from '@/store/action/C1reserveOpt'
import { C1tableC } from '@/utils/tableData'
import B1edit from './C1edit'
import { MessageFu } from '@/utils/message'
import C1NoTime from './C1NoTime'
import C1xuZhi from './C1xuZhi'
function C1reserveOpt() {
  const dispatch = useDispatch()

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

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

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

  // 编辑
  const [edit, setEdit] = useState(false)
  const [isShowNo, setIsShowNo] = useState(false)
  // 1111111111111不可预约日期--------------开始
  const [noList, setNoList] = useState<string>('')

  const getNoListFu = useCallback(async () => {
    const res = await C1_APIgetbk({ type: 'stopDate' })
    if (res.code === 0) {
      setNoList(res.data?.rtf || '')
    }
  }, [])

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

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

      if (val && val[0] !== '') {
        str = val.join(',')
      }

      let res
      if (str === '') {
        res = await C1_APIdelbk({
          type: 'stopDate'
        })
      } else {
        res = await C1_APIsavebk({
          rtf: str,
          type: 'stopDate'
        })
      }
      if (res.code === 0) {
        MessageFu.success('设置不可预约日期成功!')
        getNoListFu()
        setIsShowNo(false)
      }
    },
    [getNoListFu]
  )
  // 1111111111111不可预约日期--------------结束

  // 2222222222------------- 预约须知---------开始
  // 17：场馆介绍 16:预约须知
  const [configId, setConfigId] = useState(0)
  // 2222222222------------- 预约须知---------结束

  return (
    <div className={styles.C1reserveOpt}>
      <div className='pageTitle'>展馆预约设置{edit ? ' - 编辑' : null}</div>
      <div className='C1top'>
        <Button type='primary' onClick={() => setIsShowNo(true)}>
          设置不可预约日期
        </Button>
        &emsp;
        <Button type='primary' onClick={() => setConfigId(16)}>
          设置预约需知
        </Button>
        &emsp;
        <Button type='primary' onClick={() => setEdit(true)}>
          编辑
        </Button>
      </div>
      <MyTable list={list} columnsTemp={C1tableC} pagingInfo={false} isNull='闭馆' />

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

      {/* 不可预约日期设置 */}
      {isShowNo ? (
        <C1NoTime
          num={20}
          baseTime={noList}
          editFu={val => A2NoBtn(val)}
          closeFu={() => setIsShowNo(false)}
        />
      ) : null}

      {/*预约须知 */}
      {configId ? <C1xuZhi closeFu={() => setConfigId(0)} /> : null}
    </div>
  )
}

const MemoC1reserveOpt = React.memo(C1reserveOpt)

export default MemoC1reserveOpt
