import React, { Component } from 'react';
import { ListView, PullToRefresh, Modal, Toast } from 'antd-mobile';
import styles from './style.css';
import RepairItem from '../Repair/components/RepairItem';
import { fetchReportRepairList, dealRepair } from '../../api/index';
import Perview from '../../components/Perview/Perview';
import onCheckIcon from '../../images/Check/radio_on_btn@2x.png';

class RepairDeal 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: [],
    };
  }
  componentDidMount() {
    this.fetchList();
  }
  updateList = () => {
    const { sourceList } = this.state;
    this.setState(({ list }) => ({
      list: list.cloneWithRows(sourceList),
    }));
  };
  fetchList = fetchMore => {
    this.setState({ refreshing: true });
    const { pagination } = this.state;
    const nowDate = new Date().toISOString();
    const entity = fetchMore
      ? {
          ...pagination,
          pageNum: pagination.pageNum + 1,
        }
      : {
          ...pagination,
          pageNum: 1,
          nowDate,
        };
    fetchReportRepairList(entity)
      .then(res => {
        this.setState(
          ({ sourceList }) =>
            fetchMore
              ? res.data.length
                ? {
                    sourceList: [...sourceList, ...res.data],
                    pagination: entity,
                    refreshing: false,
                  }
                : {
                    refreshing: false,
                  }
              : {
                  sourceList: res.data,
                  pagination: entity,
                  refreshing: false,
                }
        );
        this.updateList();
      })
      .catch(err => {
        Toast.fail(err.msg || '请求失败！');
        this.setState({
          refreshing: false,
        });
      });
  };
  refreshHandle = () => {
    this.fetchList(true);
  };
  dealHandle = id => {
    console.log('in date');
    Modal.alert(
      '',
      <div className={styles.alertInfo}>
        <span className={styles.checkLabel}>
          <img src={onCheckIcon} alt="" />
        </span>
        <span>已处理</span>
      </div>,
      [
        { text: '放弃', onPress: () => console.log('cancel') },
        {
          text: '提交',
          onPress: () =>
            dealRepair({
              id: id,
            })
              .then(res => {
                this.fetchList();
                Toast.fail(res.msg || '处理成功！');
              })
              .catch(err => {
                Toast.fail(err.msg || '处理失败！');
              }),
        },
      ]
    );
  };
  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
          key="repairImgPerview"
          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}
            dealHandle={this.dealHandle}
            showView={this.showViewHandle}
          />
        )}
        onEndReached={this.refreshHandle}
        pullToRefresh={
          <PullToRefresh
            refreshing={this.state.refreshing}
            onRefresh={this.fetchList}
          />
        }
      />
    );
  }
}

export default RepairDeal;
