import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Col, Icon, List, Row } from 'antd';
import { dataUtils } from '@utils';
import styles from './index.less';

const Dashboard = ({ dispatch, dashboard, loading, app }) => {
  const { todoList, anncList } = dashboard;
  const domain = 'dashboard';
  const domainCN = '我的单据';

  const handleViewMore = () => {
    dispatch(routerRedux.push('/messages/public'));
  };
  //
  // const tableProps = {
  //   rowKey: 'type',
  //   dataSource: todoList,
  //   showHeader: false,
  //   pagination: false,
  //   onRow: (record) => {
  //     return {
  //       onClick: () => {
  //         dispatch({
  //           type: `${domain}/todo`,
  //           payload: { record }
  //         });
  //       }
  //     };
  //   },
  //   columns: [{
  //     title: '标题',
  //     dataIndex: 'type',
  //     width: '60%',
  //     align: 'left',
  //     render: (value, row, index) => {
  //       return <div><Icon type="bell" className={styles.bell}/>{value}</div>;
  //     },
  //   }, {
  //     title: '待办项',
  //     dataIndex: 'count',
  //     width: '40%',
  //     align: 'left',
  //     render: (value, row, index) => {
  //       return <div className={styles.todo}><span className={styles.count}>{value}</span> 条待办</div>;
  //     },
  //   }],
  // };

  return (
    <Row gutter={24}>
      <Col span={10}>
        <Card id="todo" title={<div>待办事项</div>} loading={loading.effects[`${domain}/query`]}>

          {/*<Table {...tableProps} className={styles.msglist}/>*/}

          <List
            dataSource={todoList}
            className={styles.todoList}
            renderItem={item => (
              <List.Item
                key={item.id}
                onClick={() => {
                  dispatch({
                    type: `${domain}/todo`,
                    payload: item
                  });
                }}
              >
                <List.Item.Meta
                  title={<div><Icon type="bell" className={styles.bell}/>{item.type}
                  </div>}
                />
                <div className={styles.todo}><span className={styles.count}>{item.count}</span> 条待办</div>
              </List.Item>
            )}
          />

        </Card>
      </Col>

      <Col span={14}>
        <Card
          id="annc"
          title={<div><span>企业公告</span><span className={styles.more}><a href="" onClick={handleViewMore}>查看更多>></a></span></div>}
          loading={loading.effects[`${domain}/query`]}
        >
          <List
            itemLayout="vertical"
            dataSource={anncList}
            className={styles.msglist}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  title={<div>
                    <a href="javascript:;"><Icon type="message" className={styles.message}/> {item.anncSubject}</a>
                    <div className={styles.date}>{dataUtils.dtm(item.publishTime)}</div>
                  </div>}
                  description={item.anncContent}
                />
              </List.Item>
            )}
          />
        </Card>
      </Col>
    </Row>
  );
};

export default connect(({ dashboard, loading, app }) => ({ dashboard, loading, app }))(Dashboard);
