import React, { useState, useRef, useEffect } from 'react';
import { Upload, Modal, Transfer, Input, Search, Tag, List, Button, message } from 'antd';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import cardAPI from "../../service";
import { UploadOutlined } from '@ant-design/icons';

const setGateFood = (props) => {
  const actionRef = useRef();
  const [oneWay, setOneWay] = useState(true);
  const key = 'setGateFood';
  // 右侧的集合
  const [targetKeys, setTargetKeys] = useState();
  //已选中
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [mockDataAll, setMockDataAll] = useState([]);
  const [mockData, setMockData] = useState([]);
  //初始化数据
  useEffect(() => {
    const initCustomerInfo = async (value) => {
      cardAPI.GetGoodsByMenuIdPage({
        "current": 1,
        "pageSize": 5000
      }).then((r) => {
        var arr = r.data.data;
        var list = [];
        if (r.succeeded) {
          arr.forEach((item) => {
            list.push({
              key: item.id,
              title: item.name,
              description: value,
              disabled: false,
              tag: item.name,
            });
          });
        }
        setMockData(list);
        setMockDataAll(list);
      });
    };
    initCustomerInfo();
  }, []);

  //选项在两栏之间转移时的回调函数
  const onChange = (nextTargetKeys, direction, moveKeys) => {
    setTargetKeys(nextTargetKeys);
  };

  //选中项发生改变时的回调函数
  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  //选择列表滚动滚动
  const onScroll = (direction, e) => {};
  const onSearch = async (direction, value) => {
    if (direction == 'right') {
      return;
    }

  };

  //正定会员发卷
  const sendCoupon = async (props) => {
    if (targetKeys == undefined || targetKeys.length <= 0) {
      //正定会员发卷
      message.error('请选择菜品');
      return;
    }
    message.loading('正在添加...', key);
    try {
      var list = [];
      targetKeys.forEach((item) => {
        list.push({
          FoodId:item,
          GateId:props.values.id,
          FoodName:""
        });
      });
    cardAPI.AddGateFood(list).then((r) => {
        message.destroy(key);
        if (r.data) {
          message.success('添加成功');
          setTargetKeys([]);
          setSelectedKeys([]);
          props.onCancel();
        } else {
          message.error('添加失败');
        }
      });
      return true;
    } catch (error) {
      console.log(error);
      message.destroy(key);
      message.error('添加请重试！');
      return false;
    }
  };
  return (
    <Modal
      destroyOnClose
      visible={props.shows}
      width={700}
      onCancel={() => {
        setMockData(mockDataAll);
        props.onCancel();
      }}
      onOk={() => {
        sendCoupon(props);
        props.actionRef.current.reload();
      }}
    >
      <PageContainer
        header={{
          title: '设置屏幕显示菜品',
          breadcrumb: {},
        }}
      >
        <Transfer
          oneWay={oneWay}
          showSearch
          showSelectAll
          onSearch={onSearch}
          dataSource={mockData}
          titles={['未选择', '已选中']}
          targetKeys={targetKeys}
          selectedKeys={selectedKeys}
          onChange={onChange}
          onSelectChange={onSelectChange}
          onScroll={onScroll}
          render={(item) => item.title}
          pagination={{ pageSize: 8 }}
          listStyle={{
            width: 500,
            height: 400,
          }}
        />
      </PageContainer>
    </Modal>
  );
};
export default setGateFood;
