import React, { useState } from 'react';
import { Form, Button, Input, Col, Drawer, Row, Select } from 'antd';

import { queryCompany } from '@/services/user';
import { TableListItem } from '../data';

const { Option } = Select;

export interface FormValueType extends Partial<TableListItem> {
  id?: number,
  storeId?: number,
  companyId?: number | null,
  key?: string,
  storeName?: string,
  storeCode?: string | number,
}

export interface UpdateFormProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  values: Partial<TableListItem>;
}


let companyList = [] as any;

const queryCompanyList = async (key:any) => {
  const msg = await queryCompany({key});
  companyList = msg.data
}

queryCompanyList("")

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const [formVals, setFormVals] = useState<FormValueType>({
    storeId: props.values.id,
    companyId: props.values.companyId,
    storeName: props.values.storeName,
    storeCode: props.values.storeId,
  });

  const [form] = Form.useForm();

  const {
    onSubmit: handleUpdate,
    onCancel: handleUpdateModalVisible,
    updateModalVisible,
    values,
  } = props;

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields();

    setFormVals({ ...formVals, ...fieldsValue });
      
    handleUpdate({ ...formVals, ...fieldsValue });
  };

  return (
    <Drawer
      title={values.id?`编辑用户`:`添加用户`}
      width={520}
      onClose={() => handleUpdateModalVisible(false, values)}
      visible={updateModalVisible}
      bodyStyle={{ paddingBottom: 80 }}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Button onClick={() => handleUpdateModalVisible(false, values)} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={handleSubmit} type="primary">
            保存
          </Button>
        </div>
      }
    >
      <Form layout="vertical" form={form} initialValues={formVals}>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name="companyId"
              label="所属零售公司"
              rules={[{ required: true, message: '请选择所属零售公司' }]}
            >
              <Select
                allowClear
                showSearch
                style={{ width: '100%' }}
                optionFilterProp="children"
                placeholder="选择零售公司"
              >
                {companyList.map((item: any) => (
                  <Option key={item.id} value={item.id}>
                    {item.companyName}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="storeCode"
              label="店铺编号"
            >
              <Input placeholder="请输入店铺编号" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="storeName"
              label="店铺编号"
            >
              <Input placeholder="请输入店铺编号" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Drawer>
  );
};

export default UpdateForm;
