import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { DownloadOutlined, EyeOutlined } from '@ant-design/icons'
import { A4_APIauth, A4_APIgetInfo } from '@/store/action/A4proveSuo'
import { FileType } from '@/types'
import store from '@/store'
import { baseURL } from '@/utils/http'

type Props = {
  sId: number
  closeFu: () => void
  editTableFu: () => void
}

export const btnArr = [
  {
    value: 0,
    label: '待审核'
  },
  {
    value: 1,
    label: '审核通过'
  },
  {
    value: 2,
    label: '已拒绝'
  }
  // {
  //   value: 3,
  //   label: '已失效'
  // }
]

function A4auth({ sId, closeFu, editTableFu }: Props) {
  // 附件信息
  const [fileArr, setFileArr] = useState<FileType[]>([])

  const [btnAc, setBtnAc] = useState(-1)

  const getInfo = useCallback(async (id: number) => {
    const res = await A4_APIgetInfo(id)
    if (res.code === 0) {
      setFileArr(res.data.file || [])
      setBtnAc(res.data.status)
    }
  }, [])

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

  // 点击提交
  const btnOk = useCallback(async () => {
    const res = await A4_APIauth(sId, btnAc)
    if (res.code === 0) {
      MessageFu.success('提交成功!')
      editTableFu()
      closeFu()
    }
  }, [btnAc, closeFu, editTableFu, sId])

  return (
    <Modal
      wrapClassName={styles.A4auth}
      open={true}
      title='审核'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A4Arow'>
        <div className='A4Arowll'>授权或同意文件：</div>
        {fileArr.length ? (
          <div className='A4Arowrr A4Arowrr0'>
            {fileArr.map(item => (
              <div className='A4Arowrr1Down' title={item.filePath} key={item.id}>
                <a
                  href={baseURL + item.filePath}
                  target='_blank'
                  rel='noopener noreferrer'
                  download={item.fileName}
                >
                  <DownloadOutlined />
                </a>
                {item.fileName.endsWith('.pdf') ||
                item.fileName.endsWith('.PDF') ? null : (
                  <span className='A4lookImg'>
                    <EyeOutlined
                      onClick={() =>
                        store.dispatch({
                          type: 'layout/lookBigImg',
                          payload: { url: baseURL + item.filePath, show: true }
                        })
                      }
                      rev={undefined}
                    />
                  </span>
                )}

                <div>{item.fileName}</div>
              </div>
            ))}
          </div>
        ) : (
          <div className='A4ArowrrNo'>（空）</div>
        )}
      </div>

      <div className='A4Arow'>
        <div className='A4Arowll'>审核状态：</div>
        <div className='A4Arowrr'>
          {btnArr.map(item => (
            <Button
              key={item.value}
              type={btnAc === item.value ? 'primary' : 'default'}
              onClick={() => setBtnAc(item.value)}
            >
              {item.label}
            </Button>
          ))}
        </div>
      </div>

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

const MemoA4auth = React.memo(A4auth)

export default MemoA4auth
