import React, { useRef, useEffect, useState } from 'react';
import { InputNumber, Space, Popconfirm, Input } from 'antd';
import {
  PageContainer,
  ProForm,
  ProFormText,
  ProFormDigit,
  ProFormTextArea,
  ProFormSelect
} from '@ant-design/pro-components';

import { useParams } from 'umi';



import QQMap from '@/components/QQMap';

import Iconfont from '@/components/IconSelect/iconfont';

import services from '@/services/admin';

const { deviceStoreCreate, deviceStoreUpdate, deviceStoreItem } = services.DeviceStoreController;
const { shopItems } = services.ShopController;

export default () => {
  const params = useParams();

  const actionRef = useRef();

  const initRow = {
    id: '',
    name: '',
    addr: '',
    power: 7,
    p_price: '',
    device_num: 0,
    lon: '',
    lat: '',
    dian_price: '',
    fee: '',
    note: '',
  };

  const [row, setRow] = useState(initRow);


  const handleCreate = async (fields) => {
    setRow(fields);

    const { success } = await deviceStoreCreate({ ...fields });

    if (success) {
      setRow(initRow);

      history.back();
    }
  };

  const handleUpdate = async (fields) => {

    const { success } = await deviceStoreUpdate({ ...fields });

    if (success) {
      actionRef.current?.reload();
    }
  };


  return (
    <PageContainer
      header={{
        title: '门店添加',
      }}
      ghost
    >
      <>
        <ProForm
          initialValues={row}
          onFinish={(values) => {
            handleCreate(values)
          }}
        >
          {/* <ProFormSelect
            name="user_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({ mobile: param.keyWords });
              return data.data;
            }}
            placeholder="请选择"

          /> */}
          <ProForm.Group>
            <ProFormText
              rules={[{ required: true, message: '请输入' }]}
              width="md"
              name="name"
              label="门店名称"
              placeholder="请输入"
            />
            <ProFormText
              width="md"
              name="p_price"
              label="停车费"
              placeholder="请输入"
            />

          </ProForm.Group>

          <ProForm.Group>
            <ProFormDigit
              rules={[{ required: true, message: '请输入' }]}
              fieldProps={{
                prefix: '￥',
              }}
              label="电费/度"
              name="dian_price"

            />
            <ProFormDigit
              rules={[{ required: true, message: '请输入' }]}
              fieldProps={{
                prefix: '￥',
              }}
              label="服务费/度"
              name="fee"

            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormDigit
              rules={[{ required: true, message: '请输入' }]}
              fieldProps={{ precision: 0 }}
              label="生成充电桩"
              name="device_num"
              min={0}
            />
            <ProFormDigit
              rules={[{ required: true, message: '请输入' }]}
              fieldProps={{ precision: 0 }}
              label="功率 KM"
              name="power"
              min={1}
            />
          </ProForm.Group>
          <ProFormTextArea
            name="note"
            label="备注"
            placeholder="备注"
          />
          <ProForm.Item
            style={{ width: "100%" }}
            rules={[{ required: true, message: '请输入' }]}
            width="md"
            name="location"
            label="地址"
            placeholder="请输入"
          >
            <QQMap />
          </ProForm.Item>

        </ProForm>

      </>
    </PageContainer>
  );
};
