import React, { useState, useRef, useEffect } from 'react';
import moment from 'moment';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { getCustomerCouponList, getcoupon_Operation_Record } from './service';
import { Modal } from 'antd';
const CouponBatch = (props) => {
  //绑定
  const actionRef = useRef();
  const [dataRow, setdataRow] = useState([]);
  const [dataRowKey, setDataRowKey] = useState([]);

  //table的展示列
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '优惠卷',
      dataIndex: 'couponTitle',
      valueType: 'textarea',
    },
    {
      title: '客户电话',
      dataIndex: 'phone',
      valueType: 'textarea',
    },
    {
      title: '客户Id',
      dataIndex: 'customerId',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '订单号',
      dataIndex: 'orderId',
      valueType: 'textarea',
    },
    {
      title: '使用店铺',
      dataIndex: 'storeName',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '领取方式',
      key: 'receiveType',
      dataIndex: 'receiveType',
      valueEnum: {
        1: { text: '小程序领取' },
        2: { text: '线下门店扫码' },
        3: { text: '自动下发' },
        4: { text: '好友分享领取' },
        5: { text: '指定发放' },
        6: { text: '参加活动' },
      },
    },

    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      valueEnum: {
        1: { text: '未使用', status: 'Warning' },
        2: { text: '已使用', status: 'Success' },
        3: { text: '占用中', status: 'Processing' },
        4: { text: '失效', status: 'Default' },
      },
    },
    {
      title: '领取时间',
      dataIndex: 'createAt',
      valueType: 'date',
    },
    // {
    //     title: '开始时间',
    //     dataIndex: 'validStartTime',
    //     hideInSearch: true,
    //     valueType: 'date',
    // },
    {
      title: '有效时间',
      hideInSearch: true,
      width: 200,
      render: (text, record, index) => {
        return (
          <span>
            <div>{moment(record.validStartTime).format('YYYY-MM-DD')}</div>
            <div>{moment(record.validEndTime).format('YYYY-MM-DD')}</div>
          </span>
        );
      },
    },
    {
      title: '核销时间',
      dataIndex: 'writeOffTime',
      valueType: 'date',
    },
  ];
  const onExpand = (expanded, record) => {
    if (expanded) {
      getcoupon_Operation_Record(record.id).then((r) => {
        r.forEach((item) => {
          item.key = item.id;
        });
        setdataRow(r);
        setDataRowKey([record.id]);
      });
    } else {
      setDataRowKey([]);
    }
  };
  const expandedRowRender = (val) => {
    return (
      <ProTable
        key={val.id}
        columns={[
          { title: '备注', dataIndex: 'remark', key: 'remark' },
          {
            title: '操作类型',
            dataIndex: 'orderTypeStr',
            key: 'orderType',
            valueEnum: {
              退单反券: { text: '退单反券', status: 'error', width: 200 },
              订单完成: { text: '订单完成', status: 'Success', width: 200 },
            },
          },
          { title: '操作时间', dataIndex: 'orderTime', key: 'orderTime' },
        ]}
        headerTitle={false}
        search={false}
        options={false}
        dataSource={dataRow}
        pagination={false}
      />
    );
  };
  return (
    <PageContainer>
      <ProTable
        headerTitle="优惠卷"
        onExpand={onExpand}
        expandedRowKeys={dataRowKey}
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        pagination={{
          pageSize: 10,
        }}
        columns={columns}
        expandable={{ expandedRowRender }}
        //数据绑定
        request={async (params) => {
          var queryData = [];
          var total = 0;
          params.CustomerPhone = params.phone;
          // params.CustomerId=params.customerId;
          await getCustomerCouponList(params).then((r) => {
            queryData = r.data.data;
            total = r.data.total;
          });
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
      ></ProTable>
    </PageContainer>
  );
};

export default CouponBatch;
