import { connect } from 'dva/index';
import React, { Component, Fragment } from 'react';
import styles from './doc.less';
import { Form, List } from 'antd';
import {
  sldHandlePaginationData,
  list_com_page_size_10,
  list_com_page_size_5,
  list_com_page_more, sldtbaleOpeBtnText, sldComLanguage,
} from '@/utils/utils';
import global from '@/global.less';
import Link from 'umi/link';
import Search from '@/components/Search/Search';

let pageSize = list_com_page_size_10;
@connect(({ common }) => ({
  common,
}))

@Form.create()
export default class DocLists extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paginationStatus: false,
      initLoading: false,
      listData: [],//列表数据
      title: '',
      params: { pageSize: pageSize },
      search_data: [{
        type: 'input',
        label: `${sldComLanguage('文档')}`,
        name: 'searchWord',
        placeholder: `${sldComLanguage('请输入内容')}`,
      }],
      formValues: {},//搜索条件
    };
  }

  componentDidMount() {
    this.get_list({ pageSize: pageSize });
  }

  //获取数据列表
  get_list = (params) => {
    this.setState({ initLoading: true });
    const { dispatch } = this.props;
    dispatch({
      type: 'common/get_help_article_list',
      payload: { ...params},
      callback: (res) => {
        this.setState({ initLoading: false });
        if (res.state == 200) {
          if ((res.data.list == null || res.data.list.length == 0) && this.state.params.current > 1) {
            params.current = params.current - 1;
            this.get_list(params);
          } else {
            this.setState({
              listData: res.data.list,
            });
          }
        }
      },
    });
  };

  //搜索事件
  search = (data) => {
    const values = { ...data };
    for (let i in values) {
      if (values[i] == '') {
        delete values[i];
      }
    }
    this.setState({
      formValues: values,
      params: { pageSize: pageSize },
    });
    this.get_list({ pageSize: pageSize, ...values });
  };

  //搜索重置事件
  seaReset = () => {
    //搜索条件置为空
    this.setState({
      formValues: {},
      params: { pageSize: pageSize },
    });
    this.get_list({ pageSize: pageSize });
  };

  render() {
    const { listData, search_data,paginationStatus } = this.state;
    return (
      <div className={global.common_page} style={{overflowX:'hidden',height:'100%'}}>
        <div className={styles.docWrapper}>
          <h2>帮助文档</h2>
          <div className={global.tableListForm}>
            <Search search_data={search_data}
                    seaSubmit={(data) => this.search(data)} seaReset={() => this.seaReset()}
            />
          </div>
          <List
            itemLayout="vertical"
            size="large"
            pagination={paginationStatus}
            dataSource={listData}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  title={
                    <Link to={`/doc/detail?id=${item.articleId}`} target="_blank">
                      {item.title}
                    </Link>
                  }
                  description={'创建时间：' + item.createTime}
                />
                {item.content}
              </List.Item>
            )}
          />
        </div>
      </div>
    );
  }
}
