import React, { useState, useEffect } from 'react';
import { connect, history } from 'umi';
import { Button, Row, Col, Descriptions, Image, Badge ,Tag} from 'antd';
import { LeftOutlined, EyeOutlined, } from '@ant-design/icons';
import './ann.less';
import moment from 'moment';
import imgs from '@/assets/logo_icon_bg.png';

const module = 'CommunityAnnouncement';

const Detail = (props: any) => {
    const { dispatch, loading, DataSave } = props;

    // 返回
    const goToReturn = () => {
        history.go(-1);
    };

    // 监听传递过来的值
    useEffect(() => {
        if (DataSave == null) {
            history.push('/CommunityManagement/CommunityAnnouncement');
        } 
    }, [DataSave]);

    return (
        <>
        {DataSave != null ?
            <div className="form">
                {/* 头部 */}
                <h3>
                    <EyeOutlined />
                    &nbsp;Notice Details
                    <div className="back">
                        <Button onClick={goToReturn}>
                            <LeftOutlined /> Back
                        </Button>
                    </div>
                </h3>
                <hr />
                {/* 内容 */}
                <Row>
                    <Col span={12}>
                        <Descriptions title="Notice Info" layout="vertical" bordered>
                            <Descriptions.Item label="Title：" span={2}>{DataSave.noticTitlel}</Descriptions.Item>
                            <Descriptions.Item label="Publisher：">{DataSave.creator}</Descriptions.Item>
                            <Descriptions.Item label="Effective Dates：">2020-11-02 09:00:00</Descriptions.Item>
                            <Descriptions.Item label="Expiration Date：">2020-11-08 09:00:00</Descriptions.Item>
                            <Descriptions.Item label="NoticScope：" span={3}>
                                <Badge status="processing" text="Publishing" />
                            </Descriptions.Item>
                            <Descriptions.Item label="Effective Community：" span={3}>
                                <Tag color="#e10">小区1</Tag>
                                <Tag color="#e20">小区1</Tag>
                                <Tag color="#e30">小区1</Tag>
                                <Tag color="#e40">小区1</Tag>
                                <Tag color="#e50">小区1</Tag>
                                <Tag color="#e60">小区1</Tag>
                                <Tag color="#e70">小区1</Tag>
                            </Descriptions.Item>
                            <Descriptions.Item label="Notice Content：" span={3}>
                                <p>{DataSave.noticText}</p>
                            </Descriptions.Item>
                        </Descriptions>
                    </Col>
                    <Col span={12} style={{ textAlign: 'center' }}>
                        <div className='famg'>
                            <div>
                                <Image
                                    width={200}
                                    src={imgs}
                                />
                                <p>Enclosure</p>
                            </div>
                        </div>
                        
                    </Col>
                </Row>

            </div>
            : ''
        }




        </>
    )
}


function map(state: any) {
    // console.log(state)
    const { DataSave } = state[module];
    const loading = state.loading.models.CommunityAnnouncement;
    return { loading, DataSave };
}
export default connect(map)(Detail);