text: import React, { PureComponent } from 'react';
  import moment from 'moment';
  import { connect } from 'dva';
  import { Row, Col, Form, Card, Select, List } from 'antd';
  
  import TagSelect from '@/components/TagSelect';
  import AvatarList from '@/components/AvatarList';
  import Ellipsis from '@/components/Ellipsis';
  import StandardFormRow from '@/components/StandardFormRow';
  
  import styles from './Projects.less';
  
  const { Option } = Select;
  const FormItem = Form.Item;
  
  /* eslint react/no-array-index-key: 0 */
  export default
  @Form.create()
  @connect(({ list, loading }) => ({
    list,
    loading: loading.models.list,
  }))
  class CoverCardList extends PureComponent {
    componentDidMount() {
      const { dispatch } = this.props;
      dispatch({
        type: 'list/fetch',
        payload: {
          count: 8,
        },
      });
    }
  
    handleFormSubmit = () => {
      const { form, dispatch } = this.props;
      // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候
      setTimeout(() => {
        form.validateFields(err => {
          if (!err) {
            // eslint-disable-next-line
            dispatch({
              type: 'list/fetch',
              payload: {
                count: 8,
              },
            });
          }
        });
      }, 0);
    };
  
    render() {
      const {
        list: { list = [] },
        loading,
        form,
      } = this.props;
      const { getFieldDecorator } = form;
  
      const cardList = list ? (
        <List
          rowKey="id"
          loading={loading}
          grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
          dataSource={list}
          renderItem={item => (
            <List.Item>
              <Card
                className={styles.card}
                hoverable
                cover={<img alt={item.title} src={item.cover} />}
              >
                <Card.Meta
                  title={<a>{item.title}</a>}
                  description={<Ellipsis lines={2}>{item.subDescription}</Ellipsis>}
                />
                <div className={styles.cardItemContent}>
                  <span>{moment(item.updatedAt).fromNow()}</span>
                  <div className={styles.avatarList}>
                    <AvatarList size="mini">
                      {item.members.map((member, i) => (
                        <AvatarList.Item
                          key={`${item.id}-avatar-${i}`}
                          src={member.avatar}
                          tips={member.name}
                        />
                      ))}
                    </AvatarList>
                  </div>
                </div>
              </Card>
            </List.Item>
          )}
        />
      ) : null;
  
      const formItemLayout = {
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
  
      return (
        <div className={styles.coverCardList}>
          <Card bordered={false}>
            <Form layout="inline">
              <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
                <FormItem>
                  {getFieldDecorator('category')(
                    <TagSelect onChange={this.handleFormSubmit} expandable>
                      <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                      <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                      <TagSelect.Option value="cat3">类目三</TagSelect.Option>
                      <TagSelect.Option value="cat4">类目四</TagSelect.Option>
                      <TagSelect.Option value="cat5">类目五</TagSelect.Option>
                      <TagSelect.Option value="cat6">类目六</TagSelect.Option>
                      <TagSelect.Option value="cat7">类目七</TagSelect.Option>
                      <TagSelect.Option value="cat8">类目八</TagSelect.Option>
                      <TagSelect.Option value="cat9">类目九</TagSelect.Option>
                      <TagSelect.Option value="cat10">类目十</TagSelect.Option>
                      <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
                      <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
                    </TagSelect>
                  )}
                </FormItem>
              </StandardFormRow>
              <StandardFormRow title="其它选项" grid last>
                <Row gutter={16}>
                  <Col lg={8} md={10} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="作者">
                      {getFieldDecorator('author', {})(
                        <Select
                          onChange={this.handleFormSubmit}
                          placeholder="不限"
                          style={{ maxWidth: 200, width: '100%' }}
                        >
                          <Option value="lisa">王昭君</Option>
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                  <Col lg={8} md={10} sm={10} xs={24}>
                    <FormItem {...formItemLayout} label="好评度">
                      {getFieldDecorator('rate', {})(
                        <Select
                          onChange={this.handleFormSubmit}
                          placeholder="不限"
                          style={{ maxWidth: 200, width: '100%' }}
                        >
                          <Option value="good">优秀</Option>
                          <Option value="normal">普通</Option>
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </StandardFormRow>
            </Form>
          </Card>
          <div className={styles.cardList}>{cardList}</div>
        </div>
      );
    }
  }
  