import React, { useState, useEffect,useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Modal, Form,message} from 'antd';
import ProTable from '@ant-design/pro-table';
import {
    GetGoodsList,
    gettree,
    GetFoodMenuGoods
} from '../services';
const FoodMenuGoods = (props) => {
  const actionRef = useRef();
  const [treeData, setTreeData] = useState();
  const [selectedRowsState, setSelectedRows] = useState([]);
  const [selectedRowKeys, setselectedRowKeys] = useState([])
  useEffect(() => {
    console.log(props.values)
    gettree().then((r) => {
        setTreeData(r.data);
    });
    GetFoodMenuGoods(props?.values?.id).then((r) => {
      if(r.data.length>0){
        var goodsids=r.data.map(x=>{
         return x.goodsId;
        })
        setselectedRowKeys(goodsids)
      }else{
        setselectedRowKeys([])
      }
    })
  },[props.values])
  const columns=[
    {
        title: '主键',
        dataIndex: 'id',
        hideInSearch: true,
        hideInTable: true,
        tip: '规则名称是唯一的 key',
    },
    {
        title: '商品类型',
        dataIndex: 'goodsTypeName',
        valueType: 'treeSelect',
        hideInTable: true,
        fieldProps: {
          showSearch:true,
          allowClear:true,
          options: treeData
        },
      },
    {
          title: '商品名称',
          dataIndex: 'name',
          search: true,
    },
    
  ]
  return (
    <Modal
      title={'关联商品'}
      width={1040}
      visible={props.foodMenuGoodsModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      okText="保存"
      cancelText="取消"
      onOk={() => {
            console.log(selectedRowsState);
            console.log(props.values);
            if(selectedRowsState.length>0){
                var gods=selectedRowsState.map(x=>{
                    return x.id
                })
                var parm={foodMenuId:props.values.id,GoodsIds:gods}
                props.handleOk(parm)
            }else{
                message.error("请选择商品");
            }
           
        }}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
        <ProTable
        headerTitle="商品信息"
        actionRef={actionRef}
        rowKey="id"
        pagination={{ defaultPageSize: 10 }}
        search={{
          labelWidth: 120,
        }}
        
        request={async (params) => {
          var data = [];
          var total = 0;
          await GetGoodsList(params).then((r) => {
            data = r.data.data;
            total = r.data.total;
          });
          return {
            data: data,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys,
          onSelect: (record, selected) => {
            const tempArray = [...selectedRowKeys];
            console.log(record)
            console.log(tempArray)
            const findIndex = tempArray.findIndex(item => item === record.id);
            if (selected) {
                findIndex < 0 && tempArray.push(record.id);
            } else {
                findIndex > -1 && tempArray.splice(findIndex, 1);
            }
            setselectedRowKeys(tempArray);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            const tempArray = [...selectedRowKeys];
            if (selected) {
              selectedRows.forEach(item => {
                  if (!item) return;
                  const findIndex = tempArray.findIndex(fItem => fItem === item.id);
                  if (findIndex < 0) {
                      tempArray.push(item.id);
                  }
                });
            } else {
                changeRows.forEach(item => {
                    const findIndex = tempArray.findIndex(fItem => fItem === item.id);
                    if (findIndex > -1) {
                        tempArray.splice(findIndex, 1);
                    }
                });
            }
            setselectedRowKeys(tempArray);
          },
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />
    </Modal>
  );
};

export default FoodMenuGoods;
