import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from '../style/GoodsList.less';
import router from 'umi/router';
import moment from 'moment';
import apis from '../../services/apis';
import request from '../../utils/request'

const { Option } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const header = (props) => {
  const [data, setData] = useState({})

  useEffect(() => {
    getVerifyList({ pageNum: 1, pageSize: 10, phone: props.location.query.telValue });
  }, [])

  // 查询列表
  const getVerifyList = (params) => {
    request({ ...apis.integralMall.taPointsExchange, params: { ...params }, }).then((data) => {
      setData(data)
    })
  }

  const changePageNum = (pageNumber) => {
    getVerifyList({ pageNum: pageNumber, pageSize: 10, phone: props.location.query.telValue })
  }

  const toBack = () => {
    router.push({
      pathname: '/integralMall/writeOff',
    });
  }

  const changeStatus = (row) => () => {
    // console.log(new Date())
    row.verifyDate = new Date()
    // console.log('row.verifyDate: ', row.verifyDate)
    request({ ...apis.integralMall.changeTaPointsExchange, data: row }).then((data) => {
      message.info("操作成功")
      getVerifyList({ pageNum: 1, pageSize: 10, phone: props.location.query.telValue })
    })
  }

  const columns = [
    {
      title: '用户姓名',
      dataIndex: 'personName',
      key: 'personName',
      align: 'center',
    },
    {
      title: '用户类型',
      dataIndex: 'personType',
      key: 'personType',
      align: 'center',
      render: (personType) => <><span>{personType === 'Realty Consultant' ? '置业顾问' : personType === 'Sales Executive' ? '销售主管' : personType === 'estate agent' ? '经纪人' : personType === 'customer' ? '客户' : ''}</span></>
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      align: 'center',
    },
    {
      title: '商品图片',
      dataIndex: 'image',
      key: 'image',
      align: 'center',
      render: (text, record) => <img src={record.image} className={styles.touxiang} />,
    },
    {
      title: '商品名称',
      dataIndex: 'targetName',
      key: 'targetName',
      align: 'center',
    },
    {
      title: '兑换时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (createDate) => <><span>{moment(createDate).format('YYYY-MM-DD HH:mm')}</span></>
    },
    {
      title: '领取时间',
      dataIndex: 'verifyDate',
      key: 'verifyDate',
      align: 'center',
      render: (verifyDate) => <><span>{verifyDate != null ? moment(verifyDate).format('YYYY-MM-DD HH:mm') : ''}</span></>
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status) => <><span>{status == 1 ? '已领取' : '未领取'}</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: (x, row) => <span style={{ color: '#1990FF' }} onClick={changeStatus(row)}>{row.status == 1 ? '' : '核销'}</span>

    },
  ];

  return (
    <>
      <div align="right" style={{marginBottom:'16px'}}><Button onClick={toBack}>返回</Button></div>
      <Table rowKey="verifyList" dataSource={data.records} columns={columns} pagination={false} />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader