import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import ShowForm from './components/ShowRecord';
import CustomerCoupon from './components/customerCouponInfo';
import SendCoupon from './components/sendCoupon';
import { GetCouponList } from './service';
const CouponBatch = () => {
  //绑定
  const actionRef = useRef();
  //使用范围
  const [shows, showsVisible] = useState(false);
  const [currentRow, setCurrentRow] = useState();
  const [sendCoupon, sendCouponVisible] = useState(false);
  const [customerCouponShow, setCustomerCouponShow] = useState(false);

  //table的展示列
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '批次号',
      dataIndex: 'batchNo',
      valueType: 'textarea',
    },
    {
      title: '优惠卷',
      dataIndex: 'couponTitle',
      valueType: 'textarea',
    },
    {
      title: '发放数量',
      dataIndex: 'sendNum',
      search: false,
      valueType: 'textarea',
    },

    {
      title: '领取数量',
      dataIndex: 'totalNum',
      search: false,
      valueType: 'digit',
    },
    {
      title: '剩余数量',
      dataIndex: 'lastNum',
      search: false,
      valueType: 'digit',
    },
    {
      title: '发放时间',
      dataIndex: 'createAt',
      valueType: 'date',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => {
        let template = [
          <a
            key="primary1"
            type="primary"
            onClick={() => {
              showsVisible(true);
              setCurrentRow({ batchNo: record.batchNo, couponId: record.couponId, showType: 1 });
            }}
          >
            适用范围
          </a>,
          <a
            key="primary2"
            type="primary"
            onClick={() => {
              showsVisible(true);
              setCurrentRow({ batchNo: record.batchNo, couponId: record.couponId, showType: 2 });
            }}
          >
            适用商品
          </a>,
          <a
            key="primary3"
            type="primary"
            onClick={() => {
              setCustomerCouponShow(true);
              setCurrentRow({ batchNo: record.batchNo });
            }}
          >
            领取详情
          </a>,
          <a
            key="primary"
            type="primary"
            disabled={record.validStatus != 1 || record.lastNum == 0}
            style={{
              pointerEvents: record.validStatus != 1 || record.lastNum == 0 ? 'none' : 'auto',
            }}
            onClick={() => {
              sendCouponVisible(true);
              setCurrentRow({ couponRangeId: record.id, couponId: record.couponId,lastNum:record.lastNum });
            }}
          >
            发放
          </a>,
        ];
        return template;
      },
    },
  ];
  return (
    <PageContainer>
      <ProTable
        headerTitle="优惠卷"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        //数据绑定
        request={async (params) => {
          var queryData = [];
          var total = 0;
          await GetCouponList(params).then((r) => {
            queryData = r.data.data;
            total = r.data.total;
          });
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
      ></ProTable>
      <ShowForm
        shows={shows}
        onCancel={() => {
          showsVisible(false);
          setCurrentRow(undefined);
        }}
        couponRecord={currentRow}
      />
      {/* 批次领取详情 */}
      <CustomerCoupon
        shows={customerCouponShow}
        onCancel={() => {
          setCustomerCouponShow(false);
          setCurrentRow(undefined);
        }}
        couponRecord={currentRow}
      />
      {/* 批指定客户发放 */}
      <SendCoupon
        shows={sendCoupon}
        values={currentRow}
        actionRef={actionRef}
        onCancel={() => {
          sendCouponVisible(false);
          setCurrentRow(undefined);
        }}
      />
    </PageContainer>
  );
};

export default CouponBatch;
