import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal, Select } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { FileListType } from '@/components/Z3upFiles/data'
import { selectObj } from '@/utils/dataChange'
import { API_GIfileType } from '@/store/action/Cledger/C1ledger'
import { MessageFu } from '@/utils/message'

type Props = {
  infoTemp: FileListType
  succFu: () => void
  closeFu: () => void
}

function SetFileType({ infoTemp, succFu, closeFu }: Props) {
  const [info, setInfo] = useState({} as FileListType)

  useEffect(() => {
    setInfo(infoTemp)
  }, [infoTemp])

  const changeData = useCallback(
    (key: 'type' | 'effect', value: string) => {
      setInfo({ ...info, [key]: value })
    },
    [info]
  )

  const btnOk = useCallback(async () => {
    const obj = {
      effect: info.effect || '',
      ids: [info.id],
      type: info.type
    }
    const res = await API_GIfileType(obj)
    if (res.code === 0) {
      MessageFu.success('设置成功')
      succFu()
      closeFu()
    }
  }, [closeFu, succFu, info])

  return (
    <Modal wrapClassName={styles.SetFileType} title='类型设置' open={true} footer={[]}>
      <div className='GI3Mrow'>
        <div className='GI3Mrow1'>
          <span>* </span>附件类型：
        </div>
        <Select
          style={{ width: 300 }}
          options={selectObj['附件类型']}
          value={info.type}
          onChange={e => changeData('type', e)}
        />
      </div>
      {info.type === 'img' ? (
        <div className='GI3Mrow'>
          <div className='GI3Mrow1'>图片类型：</div>
          <Select
            allowClear
            style={{ width: 300 }}
            placeholder='请选择'
            options={selectObj['图片类型']}
            value={info.effect || null}
            onChange={e => changeData('effect', e)}
          />
        </div>
      ) : null}

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

const MemoSetFileType = React.memo(SetFileType)

export default MemoSetFileType
