import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import api from './service';

const expandedRowRender = (item) => {
  return (
    <ProTable
      columns={[
        { title: 'id', dataIndex: 'id', key: 'id', hideInTable: true },
        { title: '订单号', dataIndex: 'order_Number', key: 'order_Number' },
        { title: '订单数量', dataIndex: 'order_Count', key: 'order_Count' },
        {
          title: '支付方式',
          dataIndex: 'payMode',
          key: 'payMode',
          valueEnum: {
            0: {
              text: '微信支付',
              status: 'Processing',
            },
          },
        },
        {
          title: '应付金额',
          dataIndex: 'order_OriginalMoney',
          key: 'order_OriginalMoney',
          renderText: (val) => `${val}¥`,
        },
        {
          title: '实付金额',
          dataIndex: 'order_RealMoney',
          key: 'order_RealMoney',
          renderText: (val) => `${val}¥`,
        },
        {
          title: '订单时间范围',
          key: 'dateTimeRange',
          dataIndex: 'createdAtRange',
          valueType: 'dateTimeRange',
          search: {
            transform: (value) => ({ order_CreateTime: value[0], order_EndTime: value[1] }),
          },
        },
      ]}
      request={async (params, sorter, filter) => {
        // 表单搜索项会从 params 传入，传递给后端接口。
        const msg = await api.orderList(item.id);
        msg.data.forEach((x) => {
          x.createdAtRange = Array.of(x.order_CreateTime, x.order_EndTime);
        });
        return {
          data: msg.data,
          // success 请返回 true，
          // 不然 table 会停止解析数据，即使有数据
          success: true,
          // 不传会使用 data 的长度，如果是分页一定要传
        };
      }}
      headerTitle={false}
      rowKey="id"
      search={false}
      options={false}
      pagination={false}
    />
  );
};

export default () => {
  //获取店铺分类
  const [srdList, setsrdList] = useState([]);

  const [goodList, setgoodList] = useState([]);
  // 获取店铺分类、商品名称信息
  useEffect(() => {
    function initsrdList() {
      api.srdList({ current: 1, pageSize: 20, status: '0' }).then((r) => {
        var arr = r.data.data;
        arr.forEach((element) => {
          element.storeKey = element.id;
          element.text = element.name;
        });
        setsrdList(arr);
      });
    }
    function initgoodsList() {
      api.goodsList({ current: 1, pageSize: 20, status: '0' }).then((r) => {
        var arr1 = r.data.data;
        arr1.forEach((element) => {
          element.text = element.name;
          element.goodsKey = element.id;
        });
        setgoodList(arr1);
      });
    }
    initsrdList();
    initgoodsList();
  }, []);

  const columns = [
    {
      title: '店铺分类',
      dataIndex: 'storeKey',
      hideInTable: true,
      width: 120,
      valueType: 'select',
      valueEnum: srdList,
    },
    {
      title: '店铺名称',
      width: 120,
      dataIndex: 'storeName',
    },
    {
      title: '商品名称',
      dataIndex: 'goodsKey',
      hideInTable: true,
      valueType: 'select',
      valueEnum: goodList,
    },
    {
      title: '商品名称',
      width: 120,
      dataIndex: 'goodsName',
      hideInSearch: true,
    },
    {
      title: '订单应付金额',
      width: 120,
      dataIndex: 'sumOriginalMoney',
      renderText: (val) => `${val}¥`,
      hideInSearch: true,
    },
    {
      title: '订单实付金额',
      width: 120,
      dataIndex: 'sumRealMoney',
      hideInSearch: true,
      renderText: (val) => `${val}¥`,
    },
    {
      title: '订单数量',
      width: 120,
      dataIndex: 'sumOrder_Count',
      hideInSearch: true,
    },
    {
      title: '订单时间',
      dataIndex: 'order_CreateTime',
      valueType: 'dateRange',
      hideInTable: true,
      width: 120,
      search: {
        transform: (value) => {
          return {
            order_CreateTime: value[0],
            order_EndTime: value[1],
          };
        },
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        request={async (params, sorter, filter) => {
          if (params.storeKey != undefined) {
            params.storeKey = srdList[params.storeKey].storeKey;
          }
          if (params.goodsKey != undefined) {
            params.goodsKey = goodList[params.goodsKey].goodsKey;
          }
          // 表单搜索项会从 params 传入，传递给后端接口。
          // const msg = await api.storeList({ current: params.current, pageSize: params.pageSize });
          const msg = await api.storeList(params);
          return {
            data: msg.data.data,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.data.total,
          };
        }}
        rowKey="id"
        pagination={{
          showQuickJumper: true,
        }}
        expandable={{ expandedRowRender }}
        // search={false}
        dateFormatter="string"
        headerTitle="订单流水信息查询"
        options={false}
      />
    </PageContainer>
  );
};
