import React, { Component } from 'react'
import { Col, Divider, Modal, Row, Spin, Upload } from 'antd'
import { AntIcon } from 'components'
import { api } from 'common/api'
import { BlobToBase64, GetFileName, PreviewFile } from 'util/file'
import store from 'store'

const { dispatch } = store

export default class index extends Component {
    state = {
        detailVisible: false,
        detailLoading: false,
        detailData: {},
        fileList: [],
    }

    onOpenDetail = async id => {
        this.setState({ detailLoading: true, detailVisible: true })
        const { data } = await api.sysNoticeDetail({ id })

        let fileList = []
        if (data) {
            const { attachments } = data
            if (attachments) {
                const fileIds = attachments.split(',')
                for (const fileId of fileIds) {
                    try {
                        const file = await PreviewFile(fileId)
                        const base64 = await BlobToBase64(file)
                        fileList.push({
                            uid: fileId,
                            response: fileId,
                            name: file.name,
                            url: base64,
                            status: 'done',
                        })
                    } catch {
                        const { data: file } = await api.sysFileInfoDetail({ id: fileId })
                        fileList.push({
                            uid: fileId,
                            response: '文件已丢失',
                            name: file.fileOriginName,
                            status: 'error',
                        })
                    }
                }
            }
        }

        dispatch({
            type: 'READ_NOTICE',
            id,
        })

        this.setState({
            detailLoading: false,
            detailData: data,
            fileList,
        })
    }

    onCloseDetail() {
        this.setState({ detailVisible: false, detailData: {}, fileList: [] })
    }

    async onFileDownload(file) {
        const { data, headers } = await api.sysFileInfoDownload({ id: file.response })
        const url = window.URL.createObjectURL(data)
        const fileName = GetFileName(headers['content-disposition'])
        const a = document.createElement('a')
        a.href = url
        a.download = fileName
        a.click()
        window.URL.revokeObjectURL(url)
        a.remove()
    }

    render() {
        const { detailLoading, detailVisible, detailData, fileList } = this.state

        return (
            <Modal
                width={1000}
                footer={false}
                visible={detailVisible}
                onCancel={() => this.onCloseDetail()}
            >
                <Spin spinning={detailLoading} indicator={<AntIcon type="loading" />}>
                    <div className="h3 mt-lg">{detailData.title}</div>
                    <Divider />
                    <div
                        className="pt-lg pb-lg"
                        dangerouslySetInnerHTML={{ __html: detailData.content }}
                    ></div>
                    <Divider />
                    {!!fileList.length && (
                        <>
                            <Row align="top">
                                <span className="text-gray mt-sm mr-xs">附件</span>
                                <Col flex="1">
                                    <Upload
                                        fileList={fileList}
                                        showUploadList={{
                                            showDownloadIcon: true,
                                        }}
                                        onDownload={file => this.onFileDownload(file)}
                                    />
                                </Col>
                            </Row>
                            <Divider />
                        </>
                    )}
                    <Row justify="space-between" className="text-gray">
                        <span>发布人：{detailData.publicUserName}</span>
                        <span>发布时间：{detailData.publicTime} </span>
                    </Row>
                </Spin>
            </Modal>
        )
    }
}
