import React from 'react';
import './index.less';
import { ListView } from 'antd-mobile';
import Page from '@src/containers/Page';
import ListData from '@src/services/ListData';
import { BuyBlock } from '../../../components/Block';
import { Order } from '../../../stores/order';

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

  init() {
  }

  initData() {
    return this.initListKeys(['data']).then(() => {
      return this.getList('data', 1);
    });
  }

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

  getList(key, page) {
    Order.listRecord(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) {
    let theme = 'default';
    if (!rowData.isUsed) {
      theme = 'not';
    } else if (rowData.useEndTime && new Date(rowData.useEndTime).getTime() < new Date().getTime()) {
      theme = 'end';
    }
    return <BuyBlock data={rowData} theme={theme} onOpen={() => {
      linkTo(`/open/${rowData.id}`);
    }} onBuy={() => {
      linkTo(`/product/service/${rowData.service}`);
    }} onRead={() => {
      if (rowData.service === 'textbook') {
        linkTo('/textbook');
      } else {
        openLink(rowData.data.resource);
      }
    }} />;
  }

  renderList() {
    const { listMap } = this.state;
    const { data = {} } = listMap;
    const { dataSource = {}, bottom, loading, finish, maxSectionId = 1, total } = data;
    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) {
              data.finish = true;
              // this.setState({ time: new Date() })
            }
            return;
          }
          this.getList('data', maxSectionId + 1);
        }}
        onEndReachedThreshold={10}
      />
    );
  }

  renderEmpty() {
    return <div />;
  }
}