import React, { useMemo, useRef, useCallback, useState, useEffect } from 'react'
import styles from './index.module.scss'
import Z3upFilesRef from '@/components/Z3upFilesRef'
import MyTable from '@/components/MyTable'
import ZRichTextOne from '@/components/ZRichTextOne'
import { MessageFu } from '@/utils/message'
import { E2_APIgetInfo, E2_APIsave } from '@/store/action/Eculture/E2story'
import TextArea from 'antd/es/input/TextArea'
import MyPopconfirm from '@/components/MyPopconfirm'
import { storyAndGoodsTableC, goodsSonTableC } from '@/utils/tableData'
import { Button, Input } from 'antd'
import { backPageFu } from '@/utils/history'
import { useParams } from 'react-router-dom'
import { API_getFileListByIds } from '@/store/action/Cledger/C4file'
import { API_getGoodsLists } from '@/store/action/Cledger/C1ledger'
import SelectGoods from '@/pages/Zother/SelectGoods'
import { sgBaseFormDataGood, sgTopSelectDomGood } from '@/pages/Zother/SonGoodsList/data'

function E2edit() {
  const [storyInfo, setStoryInfo] = useState({} as any)
  const [showSelectGoods, setShowSelectGoods] = useState(false)
  const ZRichTextRef = useRef<any>(null)
  const fileRef = useRef<any>(null)
  const { key, id } = useParams<any>()
  const isEdit = useMemo(() => {
    return ['2'].includes(key)
  }, [key])
  const isView = useMemo(() => {
    return ['4'].includes(key)
  }, [key])

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

  // 获取详情
  const getInfoFu = useCallback(
    async (id: number) => {
      const res = await E2_APIgetInfo(id)
      if (res.code === 0) {
        // 设置数据和富文本和附件
        setStoryInfo(res.data)
        ZRichTextRef.current?.ritxtShowFu(res.data.rtf || '')
        if (res.data.fileIds) {
          getFileListByIdsFu(res.data.fileIds.split(',') || [])
        }
        console.log(res.data)
      }
    },
    [getFileListByIdsFu]
  )

  // 保存或修改
  const saveFu = useCallback(async () => {
    if (!storyInfo.name) return MessageFu.warning('请输入故事标题')

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

    // 获取富文本
    const rtf = ZRichTextRef.current?.fatherBtnOkFu() || { flag: true }
    const obj: any = {
      name: storyInfo.name,
      remark: storyInfo.remark,
      goodIds: storyInfo.goods.map((v: any) => v.id).join(','),
      id: storyInfo.id > 0 ? storyInfo.id : null,
      fileIds: flieList.map((v: any) => v.id).join(','),
      rtf: rtf.val
    }
    console.log(obj)
    const res = await E2_APIsave(obj)
    if (res.code === 0) {
      backPageFu('/story')
    }
  }, [storyInfo])

  // 初始获取详情
  useEffect(() => {
    if (isEdit || isView) {
      getInfoFu(id)
    }
  }, [getInfoFu, id, isEdit, key, isView])

  // table点击各种操作按钮
  // const tableBtnFu = useCallback((id: number, key: string) => {
  //   history.push(`/story_edit/${key}/${id}`)
  // }, [])

  // 提交
  const submitFu = useCallback(() => {
    saveFu()
  }, [saveFu])

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: any) => (
          <>
            <Button size='small' type='text' onClick={() => console.log('查看藏品')}>
              查看
            </Button>
            {!isView && (
              <MyPopconfirm
                txtK='删除'
                onConfirm={() =>
                  setStoryInfo({
                    ...storyInfo,
                    goods: storyInfo.goods.filter((v: any) => v.id !== item.id)
                  })
                }
              />
            )}
          </>
        )
      }
    ]
  }, [isView, storyInfo])
  return (
    <div className={styles.D1edit} id='editBox'>
      <div className='editMain'>
        <div className={styles.EditTop}>
          <div className='pageTitle'>藏品故事-{isEdit ? '编辑' : isView ? '查看' : '新增'}</div>
          <div className='EdTit'>
            <div>藏品故事</div>
          </div>
          <div className='Edtop1'>
            <div className='Edtop1row'>
              <div className='Edtop1ll'>
                <span>* </span>
                故事标题 ：
              </div>
              <div className='Edtop1rr'>
                <Input
                  readOnly={isView}
                  placeholder='请输入内容，不超过30个字'
                  value={storyInfo.name || ''}
                  onChange={e => setStoryInfo({ ...storyInfo, name: e.target.value })}
                  maxLength={30}
                  showCount
                />
              </div>
            </div>
            <div className='Edtop1row Edtop1rowFull'>
              <div className='Edtop1ll'>关联产品 ：</div>
              <div className='Edtop1rr'>
                {!isView && (
                  <Button type='primary' onClick={() => setShowSelectGoods(true)}>
                    添加藏品
                  </Button>
                )}
                <MyTable
                  classKey='storyList'
                  list={storyInfo.goods || []}
                  columnsTemp={storyAndGoodsTableC}
                  pagingInfo={false}
                  lastBtn={tableLastBtn}
                />
              </div>
            </div>
            {/* 添加藏品 */}
            {showSelectGoods && (
              <SelectGoods
                myType='藏品'
                API_getList={API_getGoodsLists}
                closeFu={() => setShowSelectGoods(false)}
                baseFormData={sgBaseFormDataGood}
                topSelectDom={sgTopSelectDomGood}
                columnsTemp={goodsSonTableC(true)}
                oldCheckArr={storyInfo.goods || []}
                dataResFu={res => setStoryInfo({ ...storyInfo, goods: res || [] })}
              />
            )}
            <div className='Edtop1row Edtop1rowFull'>
              <div className='Edtop1ll'>故事正文 ：</div>
              <div className='Edtop1rr'>
                <ZRichTextOne
                  moduleId={id !== 'null' ? Number(id) : 0}
                  dirCode='guShiText'
                  check={false}
                  myUrl='cms/story/upload'
                  isLook={isView}
                  ref={ZRichTextRef}
                />
              </div>
            </div>
            <div className='Edtop1row Edtop1rowFull'>
              <div className='Edtop1ll'>备注 ：</div>
              <div className='Edtop1rr'>
                <TextArea
                  readOnly={isView}
                  placeholder='请输入内容，不超过500个字'
                  value={storyInfo.remark || ''}
                  onChange={e => setStoryInfo({ ...storyInfo, remark: e.target.value })}
                  maxLength={500}
                  showCount
                />
              </div>
            </div>
            <div className='Edtop1row Edtop1rowFull'>
              <div className='Edtop1ll'>上传附件 ：</div>
              <div className='Edtop1rr'>
                <Z3upFilesRef
                  isLook={isView}
                  moduleId={id !== 'null' ? Number(id) : 0}
                  ref={fileRef}
                  dirCode='guShiTextFile'
                  myUrl='cms/story/upload'
                />
              </div>
            </div>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className={styles.EditBtn}>
          {isView ? (
            <div>
              <Button type='default' onClick={() => backPageFu('/story')}>
                返回
              </Button>
            </div>
          ) : (
            <div>
              <Button type='primary' onClick={() => submitFu()}>
                提交
              </Button>

              <MyPopconfirm txtK='取消' onConfirm={() => backPageFu('/story')} />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

const MemoE2edit = React.memo(E2edit)

export default MemoE2edit
