import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Modal, Radio } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { A0Ttype } from '../data'
import { DatePicker } from 'antd'
import dayjs from 'dayjs'
import classNames from 'classnames'
import ZRichTexts from '@/components/ZRichTexts'
import { A0_APIsaveT } from '@/store/action/A0home'
import { MessageFu } from '@/utils/message'
const { RangePicker } = DatePicker

const baseForm = {
  dateEnd: '',
  dateStart: '',
  deadline: null,
  name: '',
  rtf: ''
} as A0Ttype

type Props = {
  closeFu: () => void
  succFu: () => void
  info: A0Ttype
}

function A0Tedit({ closeFu, succFu, info }: Props) {
  // 富文本的ref
  const ZRichTextRef = useRef<any>(null)

  const [formInfo, setFormInfo] = useState(baseForm)

  useEffect(() => {
    setFormInfo(info)
    // 设置富文本
    ZRichTextRef.current?.ritxtShowFu(JSON.parse(info.rtf || '{}'))
  }, [info])

  // 时间选择器改变
  const timeChange = useCallback(
    (date: any, dateString: any) => {
      let dateStart = ''
      let dateEnd = ''
      if (dateString[0] && dateString[1]) {
        dateStart = dateString[0] + ' 00:00:00'
        dateEnd = dateString[1] + ' 23:59:59'
      }
      setFormInfo({ ...formInfo, dateStart, dateEnd })
    },
    [formInfo]
  )

  // 是否能点击确定
  const isOkFlag = useMemo(() => {
    let txt = ''
    if (formInfo.deadline === 0 && !formInfo.dateStart) txt = '请选择开始结束日期'
    return txt
  }, [formInfo])

  // 点击确定
  const btnOk = useCallback(async () => {
    // 富文本校验不通过
    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }

    const res = await A0_APIsaveT({
      ...formInfo,
      rtf: rtf.val || ''
    })
    if (res.code === 0) {
      MessageFu.success('编辑成功')
      succFu()
      closeFu()
    }
  }, [closeFu, formInfo, succFu])

  return (
    <Modal
      wrapClassName={styles.A0Tedit}
      open={true}
      title='编辑通知'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A0teMain'>
        <div className='A0teRow'>
          <div className='A0teRowll'>
            <span>* </span>生效期：
          </div>
          <div className='A0teRowrr'>
            <Radio.Group
              value={formInfo.deadline}
              onChange={e => setFormInfo({ ...formInfo, deadline: e.target.value })}
              options={[
                { value: 1, label: '长期' },
                { value: 0, label: '定期' }
              ]}
            />
            {formInfo.deadline === 0 ? (
              <>
                &emsp;
                <RangePicker
                  value={
                    formInfo.dateStart
                      ? [dayjs(formInfo.dateStart), dayjs(formInfo.dateEnd)]
                      : null
                  }
                  onChange={timeChange}
                />
              </>
            ) : null}
          </div>
        </div>

        <div className='A0teRow'>
          <div className='A0teRowll'>标题：</div>
          <div className='A0teRowrr'>
            <Input
              placeholder='请输入'
              maxLength={30}
              showCount
              value={formInfo.name}
              onChange={e => setFormInfo({ ...formInfo, name: e.target.value })}
            />
          </div>
        </div>

        <div className='A0teRow'>
          <div className='A0teRowll'>正文：</div>
          <div className='A0teRowrr'>
            <ZRichTexts
              check={false}
              dirCode='A0homeT'
              isLook={false}
              ref={ZRichTextRef}
              myUrl='cms/notice/upload'
              isOne={true}
              upAudioBtnNone={true}
              otherArr={[{ key: 'moduleName', value: 'notice' }]}
            />
          </div>
        </div>
      </div>

      <div className='A0teBtn'>
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        &emsp;
        <Button type='primary' onClick={btnOk} disabled={!!isOkFlag}>
          提交
        </Button>
        <div className={classNames('A0teBtnErr', isOkFlag ? 'A0teBtnErrShow' : '')}>
          {isOkFlag}
        </div>
      </div>
    </Modal>
  )
}

const MemoA0Tedit = React.memo(A0Tedit)

export default MemoA0Tedit
