import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { A0listType } from '../data'
import { A0_APIsaveI } from '@/store/action/A0home'
import { MessageFu } from '@/utils/message'
import { Button, Input, InputNumber, Modal, Radio } from 'antd'
import ZRichTexts from '@/components/ZRichTexts'
import MyPopconfirm from '@/components/MyPopconfirm'
import classNames from 'classnames'
import ZupOne from '@/components/ZupOne'

const baseForm = {
  sort: 999,
  type: null,
  name: ''
} as A0listType

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

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

  // 封面图的ref
  const ZupThumbRef = useRef<any>(null)

  const [formInfo, setFormInfo] = useState(baseForm)

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

      // 设置封面图
      ZupThumbRef.current?.setFileComFileFu({
        fileName: '',
        filePath: info.thumbPc,
        thumb: info.thumb
      })
    } else {
      setFormInfo({ ...baseForm, type: 0 })
    }
  }, [info])

  const [check, setCheck] = useState(true)

  // 点击确定
  const btnOk = useCallback(async () => {
    setCheck(true)
    const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
    if (!coverUrl1.filePath) return MessageFu.warning('请上传封面图')

    if (!formInfo.sort) return MessageFu.warning('请输入排序值')
    if (formInfo.type === 1 && !formInfo.name) return MessageFu.warning('请输入标题')

    // 富文本校验不通过
    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }

    const obj = {
      ...formInfo,
      id: formInfo.id > 0 ? formInfo.id : null,
      rtf: rtf.val || '',
      thumb: coverUrl1.thumb || '',
      thumbPc: coverUrl1.filePath || ''
    }
    // if (1 + 1 === 2) {
    //   console.log(123, obj)
    //   return
    // }

    const res = await A0_APIsaveI(obj)
    if (res.code === 0) {
      MessageFu.success(formInfo.id > 0 ? '编辑成功' : '新增成功')
      succFu()
      closeFu()
    }
  }, [closeFu, formInfo, succFu])

  return (
    <Modal
      wrapClassName={styles.A0imgAdd}
      open={true}
      title={formInfo.id > 0 ? '编辑BANNER' : '新增BANNER'}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A0IMain'>
        <div className='A0IRowAll'>
          <div className='A0IRow'>
            <div className='A0IRowll'>
              <span>* </span>图片：
            </div>
            <div className='A0IRowrr'>
              <ZupOne
                ref={ZupThumbRef}
                isLook={false}
                fileCheck={check}
                size={5}
                dirCode='A0homeIhumb'
                myUrl='cms/banner/upload'
                format={['image/jpeg', 'image/png']}
                formatTxt='png、jpg和jpeg'
                checkTxt='请上传图片'
                upTxt='最多1张；建议上传 500 X 460 分辨率的图片'
                myType='thumb'
                otherArr={[{ key: 'moduleName', value: 'banner' }]}
              />
            </div>
          </div>

          <div className='A0IRow'>
            <div className='A0IRowll'>
              <span>* </span>排序值：
            </div>
            <div className='A0IRowrr'>
              <InputNumber
                value={formInfo.sort}
                onChange={e => setFormInfo({ ...formInfo, sort: e as number })}
                min={1}
                max={999}
                precision={0}
                placeholder='请输入'
              />
              <div className='A3_6Frow'>
                请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
              </div>
            </div>
          </div>
        </div>

        <div className='A0IRow A0IRow2'>
          <div className='A0IRowll'>
            <span>* </span>跳转类型：
          </div>
          <div className='A0IRowrr'>
            <Radio.Group
              value={formInfo.type}
              onChange={e => setFormInfo({ ...formInfo, type: e.target.value })}
              options={[
                { value: 0, label: '无' },
                { value: 1, label: '详情页' }
              ]}
            />
          </div>
        </div>

        <div className='A0IRow' hidden={formInfo.type === 0}>
          <div className='A0IRowll'>
            <span>* </span>标题：
          </div>
          <div className='A0IRowrr'>
            <Input
              placeholder='请输入'
              maxLength={30}
              showCount
              value={formInfo.name}
              onChange={e => setFormInfo({ ...formInfo, name: e.target.value.trim() })}
            />
          </div>
        </div>

        <div className='A0IRow' hidden={formInfo.type === 0}>
          <div className='A0IRowll'>正文：</div>
          <div className='A0IRowrr'>
            <ZRichTexts
              check={false}
              dirCode='A0homeI'
              isLook={false}
              ref={ZRichTextRef}
              myUrl='cms/banner/upload'
              isOne={true}
              upAudioBtnNone={true}
              otherArr={[{ key: 'moduleName', value: 'banner' }]}
            />
          </div>
        </div>
      </div>

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

const MemoA0imgAdd = React.memo(A0imgAdd)

export default MemoA0imgAdd
