/**
 * Author: llw
 * Date: 2022.9.14
 * Description: [基层网络详情]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Drawer } from 'antd';
import { StyledText } from '@/components/style';

const ModalNetworkEvent = props => {
  let {
    dispatch,
    dataModal: {
      modalType,
      modalShow,
      modalData: { id },
    },
    baseGridInfo,
  } = props;

  useEffect(() => {
    if (modalType === 'Network_Event_Modal' && modalShow) {
      dispatch({ type: 'NetworkEvent/getBaseGridDetail', payload: { id } });
    }
  }, [modalType, modalShow]);

  return (
    <Drawer
      title="详情"
      placement="right"
      width={600}
      maskClosable={false}
      onClose={() => {
        dispatch({ type: 'NetworkEvent/cancelModal' });
      }}
      visible={modalType === 'Network_Event_Modal' && modalShow}
      footer={null}
    >
      <StyledText>
        <div className="item-text">
          <div className="title">事件编号</div>
          <div className="desc">{baseGridInfo.eventCode || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事件来源</div>
          <div className="desc">{baseGridInfo.eventSource || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">发起人</div>
          <div className="desc">{baseGridInfo.sponsor || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">发起组织</div>
          <div className="desc">{baseGridInfo.sponsorOrg || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">联系方式</div>
          <div className="desc">{baseGridInfo.sponsorTel || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">发起时间</div>
          <div className="desc">{baseGridInfo.origTime || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">处理时间</div>
          <div className="desc">{baseGridInfo.processingTime || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">截止时间</div>
          <div className="desc">{baseGridInfo.deadTime || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发时间</div>
          <div className="desc">{baseGridInfo.incidentTime || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发地址</div>
          <div className="desc">{baseGridInfo.incidentAddress || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发经度</div>
          <div className="desc">{baseGridInfo.longitude || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发维度</div>
          <div className="desc">{baseGridInfo.latitude || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">统一地址</div>
          <div className="desc">{baseGridInfo.address || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发区县</div>
          <div className="desc">{baseGridInfo.county || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发镇街</div>
          <div className="desc">{baseGridInfo.town || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发村社</div>
          <div className="desc">{baseGridInfo.village || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发网格</div>
          <div className="desc">{baseGridInfo.grid || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事发小区</div>
          <div className="desc">{baseGridInfo.quarters || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事项大类</div>
          <div className="desc">{baseGridInfo.matterBig || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事项小类</div>
          <div className="desc">{baseGridInfo.matterSmall || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事项细类</div>
          <div className="desc">{baseGridInfo.matterFine || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事项编码</div>
          <div className="desc">{baseGridInfo.matterCode || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事件级别</div>
          <div className="desc">{baseGridInfo.matterLevel || '-'}</div>
        </div>
        <div className="item-text">
          <div className="title">事项性质</div>
          <div className="desc">{baseGridInfo.matterNature || '-'}</div>
        </div>

        <div className="item-text" style={{ width: '100%' }}>
          <div className="title">事件状态</div>
          <div className="desc">{baseGridInfo.stateName || '-'}</div>
        </div>
        <div className="item-text" style={{ width: '100%' }}>
          <div className="title">事件详情</div>
          <div className="desc">{baseGridInfo.matterDetailed || '-'}</div>
        </div>
        <div className="item-text" style={{ width: '100%' }}>
          <div className="title">事件描述</div>
          <div className="desc">{baseGridInfo.matterDescribe || '-'}</div>
        </div>
      </StyledText>
    </Drawer>
  );
};
export default connect(({ NetworkEvent }) => ({
  ...NetworkEvent,
}))(ModalNetworkEvent);