import React, { Component } from 'react';
import { ListView } from 'antd-mobile';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import ListData from '@src/services/ListData';
// import Tag from '../../../components/Tag';
import { My } from '../../../stores/my';
import { formatDate } from '../../../../../src/services/Tools';

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  render() {
    const { data } = this.props;
    const { show } = this.state;
    return (
      <div className="item">
        <div className="title">
          {data.data.title}<span className="date">{data.time && formatDate(data.time, 'YYYY-MM-DD')}</span>
        </div>
        <div className="tip">
          变更点:{data.version}
        </div>
        <div hidden={!show} className="desc">
          位置 {data.position}原内容 {data.originContent} 更改为 {data.content}
        </div>
        <Assets
          className="drop"
          name={!show ? 'drop_down1' : 'drop_up1'}
          onClick={() => this.setState({ show: !show })}
        />
      </div>
    );
  }
}

export default class extends Page {
  initState() {
    return {
      listMap: {},
    };
  }

  initData() {
    My.listData(this.state.search).then(result => {
      this.setTableData(result.list, result.total);
    });
    return this.initListKeys(['history'])
      .then(() => {
        return this.getList('history', 1);
      });
  }

  initListKeys(keys) {
    const { listMap } = this.state;
    keys.forEach((key) => {
      listMap[key] = new ListData();
    });
    this.setState({ listMap });
    return Promise.resolve();
  }

  getList(key, page) {
    My.dataHistory(Object.assign({ page }, this.state.search))
      .then((result) => {
        const { listMap } = this.state;
        if (page === 1) { // todo 是否重新读取第一页为刷新所有数据
          listMap[key] = new ListData();
        }
        listMap[key].get(page, result, this.state.search.size);
        this.setState({ listMap });
      });
  }

  renderView() {
    return this.renderList();
  }

  renderRow(rowData) {
    return <Item data={rowData} />;
  }

  renderList() {
    const { listMap } = this.state;
    const { history = {} } = listMap;
    const { dataSource = {}, bottom, loading, finish, maxSectionId = 1, total } = history;
    if (total === 0) return this.renderEmpty();
    return <ListView
      className="list"
      ref={el => { this.lv = el; }}
      dataSource={dataSource}
      renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
        {loading ? '加载中...' : (bottom ? '没有更多了' : '')}
      </div>)}
      renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
      style={{
        height: this.state.height,
        overflow: 'auto',
      }}
      pageSize={this.state.search.size}
      scrollRenderAheadDistance={500}
      onEndReached={() => {
        if (loading) return;
        if (bottom) {
          if (!finish) {
            history.finish = true;
            // this.setState({ time: new Date() })
          }
          return;
        }
        this.getList('history', maxSectionId + 1);
      }}
      onEndReachedThreshold={10}
    />;
  }

  renderEmpty() {
    const { list = [] } = this.state;
    return list.length === 0 ? this.renderNoData() : <div className="empty">资料还没有更新记录</div>;
  }

  renderNoData() {
    return <div className="empty">还未购买或订阅资料</div>;
  }
}