import React, { Component } from 'react'
import { Spin, Divider, Modal, Row } from 'antd'
import { api } from 'common/api'
import { AntIcon } from 'components'

export default class form extends Component {
    state = {
        detailVisible: false,
        detailLoading: false,
        detailData: {},
    }

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

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

    render() {
        const { detailLoading, detailVisible, detailData } = this.state
        return (
            <Modal
                width={1000}
                footer={false}
                visible={detailVisible}
                onCancel={() => this.setState({ detailVisible: false, detailData: {} })}
            >
                <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 />
                    <Row justify="space-between" className="text-gray">
                        <span>发布人：{detailData.publicUserName}</span>
                        <span>发布时间：{detailData.publicTime} </span>
                    </Row>
                </Spin>
            </Modal>
        )
    }
}