/*
 * @Note:
 * @Author: 2058827620@qq.com
 * @Date: 2022-04-03 17:02:15
 */

import { useEffect, useRef, useState } from 'react';
import { ProForm, ModalForm, ProFormDigit, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import {
  Select,
} from 'antd';
import services from '@/services/admin';

const { deviceStoreItems } = services.DeviceStoreController;
const { shopItems } = services.ShopController;

export default ({ values, modalOpenState, onModalOpenState, onSubmit }) => {
  const restFormRef = useRef();
  const [storeOption, setStoreOption] = useState([]);
  const [shopOption, setShopOption] = useState([]);

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

  const searchStore = (value) => {
    deviceStoreItems({
      keyword: value
    }).then(({ data }) => {
      const arr = [];
      data?.items?.map((item) => {
        item.label = `${item.name}   ${item.addr}`;
        arr.push(item);
      });
      setStoreOption(arr);
    });

  }
  const searchShop = (value) => {
    shopItems({
      username: value
    }).then(({ data }) => {
      const arr = [];
      data?.items?.map((item) => {
        item.label = `${item.nickname}   ${item.mobile}`;
        arr.push(item);
      });
      setShopOption(arr);
    });

  }
  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
          name="shop_id"
          label="所属店铺"
          showSearch
          fieldProps={{
            fieldNames: {
              label: "username",
              value: "id"
            },
          }}
          request={async (param) => {

            if (param.keyWords != undefined && param.keyWords.length < 6) {
              return;
            }

            const { success, data } = await shopItems({ username: param.keyWords });

            return data.data;
          }}
          placeholder="请选择"
        />
        <ProFormDigit
          rules={[{ required: true, message: '请输入' }]}
          label="生成数量" name="num" min={1} max={200} />
        <ProForm.Item
          rules={[{ required: true, message: '请输入' }]}
          label="门店地址"
          name="store_id"
          placeholder="请输入门店名称或地址"
        >
          <ProFormSelect
            showSearch
            style={{ width: "100%" }}
            filterOption={false}
            onSearch={
              (e) => {
                if (!e) {
                  return;
                }
                searchStore(e);
              }
            }
            fieldNames={{
              label: "label",
              value: "id"
            }}
            options={storeOption}

          />
        </ProForm.Item>

      </ModalForm>
    </>
  );
};

