import React, { Component } from 'react';
import { ListView, PullToRefresh, Modal, Toast } from 'antd-mobile';
import styles from './style.css';
import RepairItem from './components/RepairItem';
import { fetchRepairList } from '../../api/index';
import Perview from '../../components/Perview/Perview';

class RepairList extends Component {
  constructor(props) {
    super(props);
    const list = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      refreshing: false,
      down: true,
      height: document.documentElement.clientHeight,
      pagination: {
        nowDate: '',
        pageNum: 1,
        pageSize: 10,
      },
      list: list,
      sourceList: [],
      perviewVisibility: false,
      selectedImgList: [],
      perviewIndex: 0,
    };
    // this.sourceList = [];
  }
  componentDidMount() {
    let wrap = document.querySelector('.RepairContent');
    const hei = wrap.clientHeight;
    setTimeout(
      () =>
        this.setState({
          height: hei,
        }),
      0
    );
    this.fetchList();
  }
  updateList = () => {
    const { sourceList } = this.state;
    this.setState(({ list }) => ({
      list: list.cloneWithRows(sourceList),
    }));
  };
  fetchList = fetchMore => {
    const { pagination } = this.state;
    const nowDate = new Date().toISOString();
    const entity = fetchMore
      ? {
          ...pagination,
          pageNum: pagination.pageNum + 1,
        }
      : {
          ...pagination,
          pageNum: 1,
          nowDate,
        };
    fetchRepairList(entity)
      .then(res => {
        this.setState(
          ({ sourceList, pagination }) =>
            fetchMore
              ? res.data.length
                ? {
                    sourceList: [...sourceList, ...res.data],
                    pagination: {
                      ...pagination,
                      pageNum: pagination.pageNum + 1,
                    },
                    refreshing: false,
                  }
                : {
                    refreshing: false,
                  }
              : {
                  sourceList: res.data,
                  pagination: {
                    ...pagination,
                    pageNum: 1,
                    nowDate,
                  },
                  refreshing: false,
                }
        );
        this.updateList();
      })
      .catch(err => {
        Toast.fail(err.msg || '请求失败！');
        this.setState({
          refreshing: false,
        });
      });
  };
  refreshHandle = () => {
    this.fetchList(true);
  };
  showViewHandle = (list, index) => {
    this.setState({
      perviewVisibility: true,
      perviewIndex: index,
      selectedImgList: list,
    });
  };
  resetDialog = () => {
    this.setState({
      perviewVisibility: false,
    });
  };
  MyBody = props => {
    const { perviewVisibility, selectedImgList, perviewIndex } = this.state;
    return (
      <div className={styles.repairList}>
        <div className={styles.listInfo}>显示最近半年的报修记录</div>
        {props.children}
        <Modal
          className={styles.perViewDialog}
          visible={perviewVisibility}
          transparent
          maskClosable={true}
          onClose={this.resetDialog}
          title=""
        >
          <Perview data={selectedImgList} index={perviewIndex} />
        </Modal>
      </div>
    );
  };
  render() {
    const { list, pagination } = this.state;

    return (
      <ListView
        style={{
          height: this.state.height,
        }}
        className={styles.scrollWrap}
        dataSource={list}
        pageSize={pagination.pageSize}
        renderBodyComponent={() => <this.MyBody />}
        renderRow={rowData => (
          <RepairItem
            key={rowData.id}
            data={rowData}
            showView={this.showViewHandle}
          />
        )}
        onEndReached={this.refreshHandle}
        pullToRefresh={
          <PullToRefresh
            refreshing={this.state.refreshing}
            onRefresh={this.fetchList}
          />
        }
        // renderFooter={() => (
        //   <div style={{ textAlign: 'center' }}>
        //     {this.state.refreshing ? 'Loading...' : 'Loaded'}
        //   </div>
        // )}
      />
    );
  }
}

export default RepairList;
