import React, { useEffect, useRef, useState } from 'react'
import { Button, message } from 'antd'
import { useDispatch } from 'react-redux'
import styles from './index.module.scss'
import ZRichTexts from '@/components/ZRichTexts'
import { A2_APIaddOrEdit, A2_APIgetInfo, A2_APIpublish } from '@/store/action/A2introduction'
import { A2AddType, A2editType } from '@/types/api/A2introduction'
import { SectionArrType } from '@/components/ZRichTexts'
import { editPreview } from '@/store/action/layout'

const A2introduction = () => {
  const [isEdit, setIsEdit] = useState(false)
  const [data, setData] = useState<any>({})
  const ZRichTextRef = useRef<any>(null)

  const dispatch = useDispatch()

  const getInfo = async () => {
    const res = await A2_APIgetInfo(1)
    if (res.data) {
      const arr: SectionArrType[] = [
        {
          id: res.data.contextId,
          name: '克博简介',
          txt: res.data.status === 1 ? res.data.context : res.data.contextB,
          fileInfo: { fileName: '', filePath: '' }
        }
      ]
      setData(res.data)
      ZRichTextRef.current?.ritxtShowFu({ txtArr: arr })
    }
  }

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

  const editFu = () => {
    setIsEdit(true)
    getInfo()
  }

  const submitFu = (isPre: boolean) => {
    const obj = ZRichTextRef.current?.fatherBtnOkFu()
    const contentParams = isPre
      ? {
          context: '',
          contextB: obj.val.txtArr[0].txt as string,
          status: 0
        }
      : {
          context: obj.val.txtArr[0].txt as string,
          contextB: '',
          status: 1
        }
    const addObj: A2AddType = {
      ...contentParams,
      type: 1
    }
    const editObj: A2editType = {
      contextId: data.contextId,
      ...contentParams,
      type: 1
    }
    const params = data.contextId ? editObj : addObj
    // 添加与修改是同一个接口，区别在于是否传入carouselId
    if (!obj.flag) {
      A2_APIaddOrEdit(params).then((res: any) => {
        if (res.code === 0) {
          message.success('发布成功')
          setIsEdit(false)
          getInfo()
        }
      })
    }
  }

  const publishFu = (contextId: number) => {
    A2_APIpublish(contextId).then((res: any) => {
      if (res.code === 0) {
        message.success('发布成功')
        getInfo()
      }
    })
  }

  return (
    <div className={styles.A2introduction}>
      <div className='pageTitle'>克博简介</div>
      <div className='A2containerBox'>
        <div className='introduction'>
          <div className='introTitle'>克博简介</div>
          {!isEdit && (
            <div className='introButton'>
              <Button type='primary' onClick={editFu}>
                修改
              </Button>
              <Button
                type='primary'
                disabled={data.status === 1}
                onClick={() =>
                  dispatch(
                    editPreview({
                      isOpenPreview: true,
                      src: `/allDetailsShow?id=${data.contextId}&type=museum&preview=1&isFromPage=indexPage`
                    })
                  )
                }
              >
                预览
              </Button>
              <Button
                type='primary'
                disabled={data.status === 1}
                onClick={() => publishFu(data.contextId)}
              >
                发布
              </Button>
            </div>
          )}
        </div>
        {!isEdit ? (
          <div className='introBox'>
            <div className='introLeft'>
              <div>内容：</div>
            </div>
            <div
              className='introRight'
              dangerouslySetInnerHTML={{
                __html: data.status === 1 ? data.context : data.contextB || '暂无内容'
              }}
            ></div>
          </div>
        ) : (
          <>
            <div className='introBox'>
              <div className='introLeft'>
                <div>内容：</div>
              </div>
              <div className='introRight'>
                <ZRichTexts
                  check={true}
                  dirCode={'A2introduction'}
                  isLook={false}
                  ref={ZRichTextRef}
                  myUrl='museum/upload/upload'
                  isOne={true}
                  upAudioBtnNone={true}
                  video={false}
                />
              </div>
            </div>
            <div className='btnBox'>
              <Button type='primary' onClick={() => submitFu(false)}>
                发布
              </Button>
              <Button type='primary' onClick={() => submitFu(true)}>
                预发布
              </Button>
              <Button onClick={() => setIsEdit(false)}>取消</Button>
            </div>
          </>
        )}
      </div>
    </div>
  )
}

const MemoA2introduction = React.memo(A2introduction)

export default MemoA2introduction
