/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 17:02:15
 */
import { useEffect, useRef, useState } from 'react';
import { Transfer } from 'antd';
import { ProForm, ModalForm, ProFormDigit, ProFormText, ProFormSelect } from '@ant-design/pro-components';


import TableTransfer from '@/components/TableTransfer';

import services from '@/services/admin';


const { bonusLevelItems } = services.BonusLevelController;
const { deviceItems } = services.DeviceController;
const { userItems } = services.UserController;


export default ({ values, modalOpenState, onModalOpenState, onSubmit }) => {
  const restFormRef = useRef();

  const [targetKeysUser, setTargetKeysUser] = useState([]);
  const [targetKeysDevice, setTargetKeysDevice] = useState([]);
  const [userData, setUserData] = useState();
  const [deviceData, setDeviceData] = useState();

  useEffect(() => {
    //setTargetKeys(values.user);
    restFormRef.current?.setFieldsValue(values);
  }, [values]);


  const onChangeUser = (newTargetKeys, direction, moveKeys) => {
    setTargetKeysUser(newTargetKeys);
  };
  const onChangeDevice = (newTargetKeys, direction, moveKeys) => {
    setTargetKeysDevice(newTargetKeys);
  };
  return (
    <>
      <ModalForm
        title="分组-添加"
        formRef={restFormRef}
        submitter={{
          searchConfig: {
            resetText: '重置',
          },
          resetButtonProps: {
            onClick: () => {
              restFormRef.current?.resetFields();
            },
          },
        }}
        initialValues={values}
        onFinish={onSubmit}
        open={modalOpenState}
        onOpenChange={onModalOpenState}
      >
        <ProFormText hidden={true} width="md" name="id" />
        {/* <ProFormSelect
          rules={[{ required: true, message: '请选择' }]}
          name="level_id"
          label="分红等级"
          request={async () => {
            const { data } = await bonusLevelItems();
            let temp = [];
            data?.map((item) => {
              temp.push({
                label: `${item.name} - ${item.note}`,
                value: item.id
              });
            });
            return temp;
          }}
          placeholder="请选择"
        /> */}
        <ProForm.Group>
          <ProFormDigit
            rules={[{ required: true, message: '请选择' }]}
            width="md"
            name="device_num"
            label="设备数量"
            placeholder="请输入"
          />
          <ProFormDigit
            rules={[{ required: true, message: '请选择' }]}
            width="md"
            name="device_num_give"
            label="赠送设备"
            placeholder="请输入"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormDigit
            rules={[{ required: true, message: '请选择' }]}
            width="md"
            name="user_num"
            label="人数上限"
            placeholder="请输入"
          />
        </ProForm.Group>
        {/* <ProForm.Item
          rules={[{ required: true, message: '请选择' }]}
          name="user_id"
          label="绑定用户"
          placeholder="请输入"
        >
          <Transfer
            listStyle={{
              width: '100%',
            }}
            titles={['待选', '已选']}
            dataSource={userData}
            targetKeys={targetKeysUser}
            onChange={onChangeUser}
            showSearch
            render={(item) => `${item.title}-${item.description}`}
            onSearch={async (direction, value) => {
              if (direction == 'right') {
                return;
              }
              const { data } = await userItems({ mobile: value, group_id: '' });
              let temp = [];
              data?.items?.map((item) => {
                temp.push({
                  key: item.id,
                  title: `${item.nickname}-${item.mobile}`,
                  description: `分红等级：${item?.bonus_level?.level}`
                });
              });
              setUserData(temp);
            }}
          />
        </ProForm.Item>
        <ProForm.Item
          rules={[{ required: true, message: '请选择' }]}
          name="device_id"
          label="绑定桩"
          placeholder="请输入"
        >
          <Transfer
            listStyle={{
              width: '100%',
            }}
            titles={['待选', '已选']}
            dataSource={deviceData}
            targetKeys={targetKeysDevice}
            onChange={onChangeDevice}
            showSearch
            render={(item) => `${item.title}-${item.description}`}
            onSearch={async (direction, value) => {
              if (direction == 'right') {
                return;
              }
              const { data } = await deviceItems();
              let temp = [];
              data?.items?.map((item) => {
                temp.push({
                  key: item.id,
                  title: `${item.device_id}-${item.addr3}`,
                  description: ``
                });
              });
              setDeviceData(temp);
            }}
          />
        </ProForm.Item> */}
      </ModalForm>
    </>
  );
};

