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

const module = 'CommunityAnnouncement';

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

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

  // 监听传递过来的值
  useEffect(() => {
    if (DataSave == null) {
      history.push('/CommunityManagement/CommunityAnnouncement');
    } else {
      // 发起请求图片地址
      let msg = {
        // userToken: '',
        // type: ans.substr(ans.lastIndexOf('.') + 1),
        type: 'tosCommunityNoticePreview',
        fileName: DataSave.noticImageName,
      };
      RA(47, msg, module, dispatch);
    }
  }, [DataSave]);

  // 图片地址
  const [ImageSrc, setImageSrc] = useState(imgs);

  // 监听图片状态  ImgSrc
  useEffect(() => {
    if (ImgSrc != null) {
      setImageSrc(ImgSrc);
    }
  }, [ImgSrc]);

  // 状态返回
  function hanFunStart(start: any) {
    switch (start) {
      case 1:
        return <Badge status="success" text="Take effect" />;
        //  <Tag color="green">Publishing</Tag>; // 发布中
        break;
      case 2:
        return <Badge status="error" text="Expired" />; // 已过期
        break;
      default:
        return <Badge status="processing" text="Waiting For Release" />; // 等待发布
        break;
    }
  }

  //小区返回
  function CommunityLists(list: any) {
    let listBack = list.split(',').map((item: any, index: any) => {
      let last: number = parseInt(index % 10);
      return (
        <Tag color={`#${last}b0`} style={{ marginBottom: 3 }} key={index}>
          {item}
        </Tag>
      );
    });
    return listBack;
  }

  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：">
                  {moment(DataSave.noticStartTime.time).format('YYYY-MM-DD')}
                </Descriptions.Item>
                {/* 结束时间 */}
                <Descriptions.Item label="Expiration Date：">
                  {DataSave.noticEndTime != null
                    ? moment(DataSave.noticEndTime.time).format('YYYY-MM-DD')
                    : 'Permanent'}
                </Descriptions.Item>
                {/* 状态 */}
                <Descriptions.Item label="NoticScope：" span={3}>
                  {hanFunStart(DataSave.noticStatus)}
                </Descriptions.Item>
                {/* 生效小区 */}
                <Descriptions.Item label="Effective Community：" span={3}>
                  {CommunityLists(DataSave.communityNum)}
                </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>
                  <Spin spinning={loading}>
                    <Image width={200} src={ImageSrc} />
                  </Spin>
                  <p>Enclosure</p>
                </div>
              </div>
            </Col>
          </Row>
        </div>
      ) : (
        ''
      )}
    </>
  );
};

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