import React from 'react';
import { connect } from 'dva';
import styles from './index.less';
import Modal from './Modal';
import { Popconfirm, Button, Card, List, Icon } from 'antd';

const Public = ({ dispatch, publicMsg, loading }) => {
  const { list, total, limit, currentItem, modalVisible, mode, showMenu } = publicMsg;

  const domain = 'publicMsg';
  const domainCN = '企业公告';

  const IconText = ({ type, text, itemid }) => (
    <a href="javascript:;" onClick={() => handleView(itemid)} className={styles.subject}>
      <Icon type={type} className={styles.message} />
      {text}
    </a>
  );

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: '40%',
    readOnly: mode === 'view',
    title: mode === 'create' ? `新增${domainCN}` : (mode === 'update' ? `修改${domainCN}` : `查看${domainCN}`),
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },
  };

  function handleAdd() {
    dispatch({
      type: `${domain}/getSingle`,
      payload: {
        mode: 'create',
      },
    });
  }

  function handleUpdate(itemid) {
    dispatch({
      type: `${domain}/getSingle`,
      payload: {
        mode: 'update',
        id: itemid,
      },
    });
  }

  function handleView(itemid) {
    dispatch({
      type: `${domain}/getSingle`,
      payload: {
        mode: 'view',
        id: itemid,
      },
    });
  }

  function handleDelete(itemid) {
    dispatch({
      type: `${domain}/delete`,
      payload: {
        id: itemid,
      },
    });
  }

  const listProps = {
    loading: loading.effects[`${domain}/query`],
    pagination: {
      onChange: (page) => {
        dispatch({ type: `${domain}/pagination`, payload: { page } });
      },
      limit,
      total,
    },
    dataSource: list,
    renderItem: (item) => (
      <List.Item
        key={item.anncSubject}
        actions={[(showMenu[0] && <a onClick={() => handleUpdate(item.id)}>修改</a>),
        (showMenu[1] && <Popconfirm title={'确定要删除吗?'} placement="bottom" onConfirm={() => handleDelete(item.id)}>
          <a>删除</a>
        </Popconfirm>)]}
      >
        <List.Item.Meta
          title={<div>
            <IconText type="message" text={item.anncSubject} itemid={item.id} />
            <span className={styles.date}>{item.publishTime}</span>
          </div>}
          description={item.anncContent}
        />
      </List.Item >
    ),
  };

  return (
    <div>
      {
        showMenu[0] &&
        <Card style={{ width: '100%', marginBottom: 8 }}>
          <Button type="primary" onClick={handleAdd}>新建公告</Button>
        </Card>
      }
      <div className="content-inner">
        <List className={styles.annclist} {...listProps} />
      </div>
      {modalVisible && <Modal {...modalProps} />}
    </div>
  );
};

export default connect(({ publicMsg, loading }) => ({ publicMsg, loading }))(Public);
