import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Input, Modal } from 'antd'
import { GuShiType } from '../data'
import MyPopconfirm from '@/components/MyPopconfirm'
import ZRichTextOne from '@/components/ZRichTextOne'
import TextArea from 'antd/es/input/TextArea'
import Z3upFilesRef from '@/components/Z3upFilesRef'
import { MessageFu } from '@/utils/message'
import { guShiAPI_add } from '@/store/action/Cledger/C1ledger'
import { API_getFileListByIds } from '@/store/action/Cledger/C4file'

type Props = {
  guShiInfo: GuShiType
  closeFu: () => void
  succFu: (val: '新增' | '编辑', info: GuShiType) => void
  moduleId: number | ''
  isLook?: boolean
  goodIds?: number
}
function GuShiMo({ guShiInfo, closeFu, succFu, moduleId, isLook = false, goodIds }: Props) {
  const [info, setInfo] = useState<GuShiType>({
    id: -1,
    name: '',
    remark: '',
    rtf: ''
  })

  const getFileListByIdsFu = useCallback(async (ids: string[]) => {
    const res = await API_getFileListByIds(ids)
    if (res.code === 0) {
      // 设置附件
      fileRef.current?.sonSetListFu(res.data)
    }
  }, [])

  useEffect(() => {
    if (guShiInfo.id > 0) {
      setInfo(guShiInfo)
      if (guShiInfo.fileIds) {
        getFileListByIdsFu(guShiInfo.fileIds.split(','))
      }
      // 设置富文本
      ZRichTextRef.current?.ritxtShowFu(guShiInfo.rtf)
    }
  }, [getFileListByIdsFu, guShiInfo])

  // 附件模块的ref
  const fileRef = useRef<any>(null)

  // 富文本的ref
  const ZRichTextRef = useRef<any>(null)

  // 点击提交
  const btnOk = useCallback(async () => {
    if (!info.name) return MessageFu.warning('请输入故事标题')

    // 获取附件
    const { list: flieList } = fileRef.current?.sonResListFu()

    // 获取富文本
    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }

    const obj: any = {
      name: info.name,
      remark: info.remark,
      id: info.id > 0 ? info.id : null,
      fileIds: flieList.map((v: any) => v.id).join(','),
      rtf: rtf.val
    }

    if (goodIds) obj.goodIds = goodIds

    const res = await guShiAPI_add(obj)

    if (res.code === 0) {
      MessageFu.success(info.id > 0 ? '编辑成功' : '新增成功')
      succFu(info.id > 0 ? '编辑' : '新增', res.data)
      closeFu()
    }
  }, [closeFu, goodIds, info.id, info.name, info.remark, succFu])

  return (
    <Modal
      wrapClassName={styles.GuShiMo}
      destroyOnClose
      open={true}
      title={guShiInfo.id > 0 ? '编辑故事' : '新增故事'}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='GSMmain'>
        <div className='GSMrow'>
          <div className='GSMrowll'>
            <span>* </span>故事标题：
          </div>
          <div className='GSMrowrr'>
            <Input
              placeholder='请输入'
              maxLength={30}
              showCount
              value={info.name}
              onChange={e => setInfo({ ...info, name: e.target.value.trim() })}
            />
          </div>
        </div>

        <div className='GSMrow'>
          <div className='GSMrowll'>故事正文：</div>
          <div className='GSMrowrr'>
            <ZRichTextOne
              moduleId={moduleId}
              dirCode='guShiText'
              check={false}
              myUrl='cms/story/upload'
              isLook={false}
              ref={ZRichTextRef}
            />
          </div>
        </div>

        <div className='GSMrow'>
          <div className='GSMrowll'>备注：</div>
          <div className='GSMrowrr'>
            <TextArea
              placeholder='请输入'
              maxLength={500}
              showCount
              value={info.remark}
              onChange={e => setInfo({ ...info, remark: e.target.value.trim() })}
            />
          </div>
        </div>

        <div className='GSMrow'>
          <div className='GSMrowll'>附件：</div>
          <div className='GSMrowrr'>
            <Z3upFilesRef
              ref={fileRef}
              moduleId={moduleId}
              dirCode='guShiTextFile'
              myUrl='cms/story/upload'
            />
          </div>
        </div>

        <div className='GSMbtn'>
          <Button type='primary' onClick={btnOk}>
            提交
          </Button>
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </Modal>
  )
}

const MemoGuShiMo = React.memo(GuShiMo)

export default MemoGuShiMo
