text: import React, { PureComponent, Fragment } from 'react';
  import { connect } from 'dva';
  import moment from 'moment';
  import { Row, Col, Card, Form, Input, Button, Table, notification, Popconfirm, Divider, Tag, Select } from 'antd';
  import PageHeaderWrapper from '@/components/PageHeaderWrapper';
  
  import TimeAxisComponent from './TimeAxisComponent';
  
  const FormItem = Form.Item;
  
  /* eslint react/no-multi-comp:0 */
  @connect(({ timeAxis }) => ({
  	timeAxis,
  }))
  @Form.create()
  class TableList extends PureComponent {
  	constructor(props) {
  		super(props);
  		this.state = {
  			changeType: false,
  			title: '',
  			stateComponent: '',
  			content: '',
  			start_time: new Date(),
  			end_time: new Date(),
  			visible: false,
  			loading: false,
  			keyword: '',
  			state: '', // 状态 1 是已经完成 ，2 是正在进行，3 是没完成 ,'' 代表所有时间轴
  			pageNum: 1,
  			pageSize: 10,
  			columns: [
  				{
  					title: '标题',
  					dataIndex: 'title',
  				},
  				{
  					title: '内容',
  					dataIndex: 'content',
  				},
  				{
  					title: '状态',
  					dataIndex: 'state', // 状态 1 是已经完成 ，2 是正在进行，3 是没完成
  					render: val => {
  						// 状态 1 是已经完成 ，2 是正在进行，3 是没完成
  						if (val === 1) {
  							return <Tag color="green">已经完成</Tag>;
  						}
  						if (val === 2) {
  							return <Tag color="red">正在进行</Tag>;
  						}
  						return <Tag>没完成</Tag>;
  					},
  				},
  				{
  					title: '开始时间',
  					dataIndex: 'start_time',
  					sorter: true,
  					render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
  				},
  				{
  					title: '结束时间',
  					dataIndex: 'end_time',
  					sorter: true,
  					render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
  				},
  				{
  					title: '操作',
  					render: (text, record) => (
    <div>
      <Fragment>
        <a onClick={() => this.showModal(record)}>修改</a>
      </Fragment>
      <Divider type="vertical" />
      <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(text, record)}>
        <a href="javascript:;">Delete</a>
      </Popconfirm>
    </div>
  					),
  				},
  			],
  		};
  
  		this.handleChangeKeyword = this.handleChangeKeyword.bind(this);
  		this.handleOk = this.handleOk.bind(this);
  		this.handleDelete = this.handleDelete.bind(this);
  		this.showModal = this.showModal.bind(this);
  		this.handleCancel = this.handleCancel.bind(this);
  		this.handleSearch = this.handleSearch.bind(this);
  		this.handleChangeState = this.handleChangeState.bind(this);
  		this.handleChange = this.handleChange.bind(this);
  		this.handleChangeContent = this.handleChangeContent.bind(this);
  		this.handleSubmit = this.handleSubmit.bind(this);
  		this.handleStateChange = this.handleStateChange.bind(this);
  		this.onChangeTime = this.onChangeTime.bind(this);
  	}
  
  	componentDidMount() {
  		this.handleSearch(this.state.pageNum, this.state.pageSize);
  	}
  
  	onChangeTime(date, dateString) {
  		console.log(date, dateString);
  		this.setState({
  			start_time: new Date(dateString[0]),
  			end_time: new Date(dateString[1]),
  		});
  	  }
  
  	handleSubmit() {
  		const { dispatch } = this.props;
  		const { timeAxisDetail } = this.props.timeAxis;
  		if (this.state.changeType) {
  			const params = {
  				id: timeAxisDetail._id,
  				state: this.state.stateComponent,
  				title: this.state.title,
  				content: this.state.content,
  				start_time: this.state.start_time,
  				end_time: this.state.end_time,
  			};
  			new Promise(resolve => {
  				dispatch({
  					type: 'timeAxis/updateTimeAxis',
  					payload: {
  						resolve,
  						params,
  					},
  				});
  			}).then(res => {
  				if (res.code === 0) {
  					notification.success({
  						message: res.message,
  					});
  					this.setState({
  						visible: false,
  						chnageType: false,
  					});
  					this.handleSearch(this.state.pageNum, this.state.pageSize);
  				} else {
  					notification.error({
  						message: res.message,
  					});
  				}
  			});
  		} else {
  			const params = {
  				state: this.state.stateComponent,
  				title: this.state.title,
  				content: this.state.content,
  				start_time: this.state.start_time,
  				end_time: this.state.end_time,
  			};
  			new Promise(resolve => {
  				dispatch({
  					type: 'timeAxis/addTimeAxis',
  					payload: {
  						resolve,
  						params,
  					},
  				});
  			}).then(res => {
  				if (res.code === 0) {
  					notification.success({
  						message: res.message,
  					});
  					this.setState({
  						visible: false,
  						chnageType: false,
  					});
  					this.handleSearch(this.state.pageNum, this.state.pageSize);
  				} else {
  					notification.error({
  						message: res.message,
  					});
  				}
  			});
  		}
  	}
  
  	handleChange(event) {
  		this.setState({
  			title: event.target.value,
  		});
  	}
  
  	handleChangeContent(event) {
  		this.setState({
  			content: event.target.value,
  		});
  	}
  
  	handleStateChange(value) {
  		this.setState({
  			stateComponent: value,
  		});
  	}
  
  	handleChangeState(state) {
  		this.setState(
  			{
  				state,
  			},
  			() => {
  				this.handleSearch();
  			},
  		);
  	}
  
  	handleChangeKeyword(event) {
  		this.setState({
  			keyword: event.target.value,
  		});
  	}
  
  	handleChangePageParam(pageNum, pageSize) {
  		this.setState(
  			{
  				pageNum,
  				pageSize,
  			},
  			() => {
  				this.handleSearch();
  			},
  		);
  	}
  
  	showModal = record => {
  		if (record._id) {
  			const { dispatch } = this.props;
  			const params = {
  				id: record._id,
  			};
  			new Promise(resolve => {
  				dispatch({
  					type: 'timeAxis/getTimeAxisDetail',
  					payload: {
  						resolve,
  						params,
  					},
  				});
  			}).then(res => {
  				// console.log('res :', res)
  				if (res.code === 0) {
  					this.setState({
  						visible: true,
  						changeType: true,
  						stateComponent: res.data.state,
  						title: res.data.title,
  						content: res.data.content,
  					});
  				} else {
  					notification.error({
  						message: res.message,
  					});
  				}
  			});
  		} else {
  			this.setState({
  				visible: true,
  				changeType: false,
  				stateComponent: '',
  				title: '',
  				content: '',
  			});
  		}
  	};
  
  	handleOk = () => {
  		this.handleSubmit();
  	};
  
  	handleCancel = e => {
  		this.setState({
  			visible: false,
  		});
  	};
  
  	handleSearch = () => {
  		this.setState({
  			loading: true,
  		});
  		const { dispatch } = this.props;
  		const params = {
  			keyword: this.state.keyword,
  			state: this.state.state,
  			pageNum: this.state.pageNum,
  			pageSize: this.state.pageSize,
  		};
  		new Promise(resolve => {
  			dispatch({
  				type: 'timeAxis/queryTimeAxis',
  				payload: {
  					resolve,
  					params,
  				},
  			});
  		}).then(res => {
  			// console.log('res :', res);
  			if (res.code === 0) {
  				this.setState({
  					loading: false,
  				});
  			} else {
  				notification.error({
  					message: res.message,
  				});
  			}
  		});
  	};
  
  	handleDelete = (text, record) => {
  		// console.log('text :', text);
  		// console.log('record :', record);
  		const { dispatch } = this.props;
  		const params = {
  			id: record._id,
  		};
  		new Promise(resolve => {
  			dispatch({
  				type: 'timeAxis/delTimeAxis',
  				payload: {
  					resolve,
  					params,
  				},
  			});
  		}).then(res => {
  			// console.log('res :', res);
  			if (res.code === 0) {
  				notification.success({
  					message: res.message,
  				});
  				this.handleSearch(this.state.pageNum, this.state.pageSize);
  			} else {
  				notification.error({
  					message: res.message,
  				});
  			}
  		});
  	};
  
  	renderSimpleForm() {
  		return (
    <Form layout="inline" style={{ marginBottom: '20px' }}>
      <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
        <Col md={24} sm={24}>
          <FormItem>
            <Input
              placeholder="留言内容"
              value={this.state.keyword}
              onChange={this.handleChangeKeyword}
            />
          </FormItem>
  
          <Select
            style={{ width: 200, marginRight: 20 }}
            placeholder="选择状态"
            onChange={this.handleChangeState}
          >
            {/* 状态 1 是已经完成 ，2 是正在进行，3 是没完成 ,'' 代表所有时间轴 */}
            <Select.Option value="">所有</Select.Option>
            <Select.Option value="1">已完成</Select.Option>
            <Select.Option value="2">正在进行</Select.Option>
            <Select.Option value="3">未完成</Select.Option>
          </Select>
  
          <span>
            <Button
              onClick={this.handleSearch}
              style={{ marginTop: '3px' }}
              type="primary"
              icon="search"
            >
  								Search
            </Button>
          </span>
          <span>
            <Button
              onClick={this.showModal}
              style={{ marginTop: '3px', marginLeft: '10px' }}
              type="primary"
            >
  								新增
            </Button>
          </span>
        </Col>
      </Row>
    </Form>
  		);
  	}
  
  	render() {
  		const { timeAxisList, total } = this.props.timeAxis;
  		const { pageNum, pageSize } = this.state;
  		const pagination = {
  			total,
  			defaultCurrent: pageNum,
  			pageSize,
  			showSizeChanger: true,
  			onShowSizeChange: (current, pageSize) => {
  				// console.log('current, pageSize :', current, pageSize);
  				this.handleChangePageParam(current, pageSize);
  			},
  			onChange: (current, pageSize) => {
  				this.handleChangePageParam(current, pageSize);
  			},
  		};
  
  		return (
    <PageHeaderWrapper title="时间轴管理">
      <Card bordered={false}>
        <div className="">
          <div className="">{this.renderSimpleForm()}</div>
          <Table
            pagination={pagination}
            loading={this.state.loading}
            pagination={pagination}
            rowKey={record => record._id}
            columns={this.state.columns}
            bordered
            dataSource={timeAxisList}
          />
        </div>
      </Card>
      <TimeAxisComponent
        changeType={this.state.changeType}
        title={this.state.title}
        content={this.state.content}
        state={this.state.stateComponent}
        visible={this.state.visible}
        handleOk={this.handleOk}
        handleChange={this.handleChange}
        handleStateChange={this.handleStateChange}
        handleChangeContent={this.handleChangeContent}
        handleCancel={this.handleCancel}
        onChangeTime={this.onChangeTime}
      />
    </PageHeaderWrapper>
  		);
  	}
  }
  
  export default TableList;
  