import { Modal } from 'antd';
import React, { useState } from 'react';
import ProTable from '@ant-design/pro-table';
import {FooterToolbar } from '@ant-design/pro-layout';
import { GetGoodsByMenuIdPage } from '../service';
let allCheckKeys=[];
const CreateForm = (props) => {

  const [selectedRowsStateChild, setSelectedRowsChild] = useState([]);
  const [selectedRowKeysChild, setSelectedRowKeysChild] = useState([]);
//console.log(props.Data)
  if(props.Data){
    allCheckKeys = props.Data.map(obj => {
      return obj.id;
   });
  }

  const columns = [
    {
      title: '商品id',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '商品名称',
      dataIndex: 'name',
    },
  ];
  return (
    <Modal
      width={700}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="选择商品"
      visible={props.modalVisible}
      onCancel={() => {
        allCheckKeys = [];
        props.onCancel();
      }}
      onOk={() => {
        var submitData = [...selectedRowKeysChild];//[...allCheckKeys];
        allCheckKeys = [];
        props.onSubmit(submitData);
      }}
      maskClosable={false}
    >
      <ProTable
        headerTitle="商品信息"
        rowKey="id"
        pagination={{ defaultPageSize: 20 }}
        search={false}
        toolBarRender={false}
        params={{
          FoodMenuId: props.values,
        }}
        //数据绑定
        request={async (params) => {
          var Data = [];
          var total = 0;
          await GetGoodsByMenuIdPage(params).then((r) => {
            Data = r.data.data;
            total = r.data.total;
          });
          setSelectedRowKeysChild(allCheckKeys);
          return {
            data: Data,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        // defaultSelectedRowKeys={allCheckKeys}
        rowSelection={{ // 主要是这里的多选处理
          selectedRowKeysChild,
          defaultSelectedRowKeys:allCheckKeys,
          onChange: (_, selectedRows) => {
           setSelectedRowsChild(selectedRows);
          },
          onSelect: (record, selected) => {
            if (selected) { // 如果选中,加入selectedRowKeys
              allCheckKeys = Array.from(new Set([...selectedRowKeysChild, record.id]));
            } else { // 如果未选中,删除这一项数据
              allCheckKeys = selectedRowKeysChild.filter(item => {
                return item !== record.id
              })
            }
            setSelectedRowKeysChild(allCheckKeys);
          }
        }}
      />
      {selectedRowsStateChild?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRowsStateChild.length}
              </a>{' '}
              项 &nbsp;&nbsp;
            </div>
          }
        > </FooterToolbar>
          )}
    </Modal>
  );
};

export default CreateForm;
