import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions, notification } from 'antd';
import moment from 'moment';
import request from '../../../../utils/request';
import apis from '../../../../services/apis';
import Styles from '../style.less';


const { Option } = Select;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { Meta } = Card;

/**
 * 积分记录
 *
 * @param {*} props
 * @returns
 */
class ModalIntegralRecord extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       dataSource: { result: { records: [] }, totalPoints: 0 },
       visibleData: { visible: false, customerId: '' },
    }
  }

  // 挂载之后
  componentDidMount() {
    this.getList({ pageNumber: 1, pageSize: 5 })
  }

  componentDidUpdate(preProps, preState) {
    if (this.props.visibleData.customerId !== preState.visibleData.customerId) {
      this.getList({ pageNumber: 1, pageSize: 5 })
      this.setState({ visibleData: this.props.visibleData });
    }
  }

  // 弹框确定按钮
  // eslint-disable-next-line react/sort-comp
  handleOk() {
    this.props.onCancel()
  }

  // 弹框取消按钮
  handleCancel() {
    this.props.onCancel()
  }

  openNotificationWithIcon = (type, message) => {
    notification[type]({
      message,
      description:
        '',
    });
  }

  getList(params) {
    const { customerId } = this.state.visibleData
    if (customerId === '' || customerId === undefined) {
      return
    }
    // 网路请求
    // 网路请求
    request({ ...apis.customer.taPointsRecords, urlData: { id: customerId }, params: { ...params } }).then(res => {
      this.setState({ dataSource: res })
    }).catch(err => {
      this.openNotificationWithIcon('error', err)
    })
  }

   // 分页
  onChange(pageNum) {
    this.getList({ pageNumber: pageNum, pageSize: 5 })
  }

  // 积分类型
  showChangeType(str) {
    switch (str) {
      case 'goods':
        return '兑换商品'
      case 'checkin':
        return '签到'
      case 'share-poster':
        return '分享'
      case 'signup-agent':
        return '授权手机号'
      case 'activity_checkin':
        return '活动签到'
      case 'document_verify':
          return '资料审核'  
      case 'recommend-customer':
        return '推荐客户'
        case 'group':
        return '拼团'
        case 'recommend-customer':
        return '推荐客户'
      default:
        return '未知类型'
    }
  }

  // 判断是否是 - 开头
  subPoints(points) {
    const subStr = points.toString().substring(0, 1)
    if (subStr === '-') {
      return true
    }
    return false
  }

// eslint-disable-next-line class-methods-use-this
  render() {
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        render: (text, record, index) => <span>{index + 1}</span>,
        // render: (text, record, index) => <span>{(this.state.dataSource.result.total - this.state.dataSource.result.records.length) * 1 + index + 1}</span>,
      },
      {
        title: '积分类型',
        dataIndex: 'changeType',
        key: 'changeType',
        render: (_, record) => <span>{this.showChangeType(record.changeType) }</span>,
      },
      {
        title: '积分变化',
        dataIndex: 'pointsAmount',
        key: 'pointsAmount',
        // render: (pointsAmount, record) => { <span style={this.subPoints(pointsAmount) && {color: 'red'}}>{ pointsAmount }</span> },
      },
      {
        title: '发生时间',
        dataIndex: 'createDate',
        key: 'createDate',
        render: (createDate, records) => <span> {moment(createDate).format('YYYY-MM-DD')}</span>,
      },
    ]
    return (
      <>
        <Modal
            title={ '当前可用积分：' + (this.state.dataSource.totalPoints  || 0 )}
            width={800}
            destroyOnClose="true"
            footer={null}
            visible={this.state.visibleData.visible}
            // onOk={() => this.handleOk()}
            onCancel={e => this.handleCancel(e)}
          >
            <Table dataSource={this.state.dataSource.result.records} columns={columns} pagination={{pageSize: 5, total: this.state.dataSource.result.total, onChange: e => this.onChange(e) }} />
          </Modal>
      </>
    );
  }
}

export default ModalIntegralRecord
