import React, { useState, useEffect } from 'react';
import { Select, Card, Modal, notification, Table } from 'antd';
import moment from 'moment';
import request from '@/utils/request';
import apis from '@/services/apis';
import Styles from '../../style.less';

/**
 * 积分记录
 *
 * @param {*} props
 * @returns
 */
const IntegralRecord = props => {
  const { visible, data } = props.modelProps || {};

  const [tableData, setTableData] = useState({});
  const [totalPoints, setTotalPoints] = useState();
const [loading,setLoading] = useState(false)
  function getList(params) {
    const { personId } = data || {};
    if (personId === '' || personId === undefined) {
      return;
    }

    console.log(personId, 'customerId');
    // 网路请求
    setLoading(true);
    request({
      ...apis.customer.taPointsRecords,
      urlData: { id: personId },
      params: { ...params },
    })
      .then(res => {
        console.log(res, 'res');
        setTableData(res.result);
        setTotalPoints(res.totalPoints);
        setLoading(false);
      })
      .catch(err => {
        this.openNotificationWithIcon('error', err);
        setLoading(false);
      });
  }

  useEffect(() => {
    if (visible) {
      getList({ pageNumber: 1, pageSize: 5 });
    }else{
      setTableData({})
    }
  }, [visible]);

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

  // 积分类型
  function 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 '未知类型';
    }
  }



  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (_text, _record, index) => <span>{index + 1}</span>,
    },
    {
      title: '积分类型',
      dataIndex: 'changeType',
      key: 'changeType',
      render: (_, record) => <span>{showChangeType(record.changeType)}</span>,
    },
    {
      title: '积分变化',
      dataIndex: 'pointsAmount',
      key: 'pointsAmount',
    },
    {
      title: '发生时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (createDate) => <span> {moment(createDate).format('YYYY-MM-DD')}</span>,
    },
  ];
  return (
    <>
      <Modal
        title={'当前可用积分：' + (totalPoints || 0)}
        width={800}
        destroyOnClose="true"
        footer={null}
        visible={visible}
        // onOk={() => this.handleOk()}
        onCancel={() => props.onCancel()}
      >
        {data && (
          <Table
            dataSource={tableData.records}
            columns={columns}
            loading={loading}
            pagination={{
              pageSize: tableData.pageSize,
              total: tableData.total,
              onChange: e => onChange(e),
            }}
          />
        )}
      </Modal>
    </>
  );
};

export default IntegralRecord;
