import React, { useEffect } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Form,
  Input,
  Button,
  Select,
  Switch,
  TreeSelect,
  message,
  Modal,
  Upload,
  InputNumber
} from 'antd';
import { dispatchHandle } from '@/utils/publicHandle';
import useUpdateEffect from '@/useHooks/useUpdateEffect';
// import { branchSeparate, treeSeparate } from '../treeSeparate';
import { _apiUrl_,beforeUpload } from '@/utils/common';
import { useState } from 'react';
import { UploadOutlined, PlusOutlined, CloseOutlined, LoadingOutlined } from '@ant-design/icons';
import UploadFile from '@/components/UploadFile';
const { TextArea } = Input;
const NoSystemModal = (props) => {
  const [form] = Form.useForm();
  const { dispatch,handleClose} = props;
  const [loading, setLoading] = useState(false);
  //当弹层关闭的时候，detail数据要清空
  useUpdateEffect(() => {
    if (addType !== 'edit') {
      form.resetFields();
    }
  }, [props.addVisible]);


  
  const handleSubmit = (e) => {
    e.preventDefault();
    const { handleClose, addType } = props;
    const { pickListTemp } = props.ware;
    let tempData = [...pickListTemp];
    form
      .validateFields()
      .then((values) => {
        values.nocodeLab = true; // 是否无料号物料 必传,这里为虚拟物料
        values.picture = values?.picture?.length > 0 && values.picture[0] || null;//物料图片，必传
        tempData = [...tempData, values];
        tempData = tempData.map((item, index) => {
          return {
            ...item,
            materialInfoId:item.materialInfoId && item.id ? item.materialInfoId : 0,//虚拟物料，物料信息id 必传 无物料号默认传0
            oKey:index
          }
        });
        props.dispatch({
          type: 'ware/setModelsState',
          payload: {
            pickListTemp: tempData,
          },
          callback: () => {
          }
        });
        handleClose();
        message.success(addType === 'edit' ? '修改成功' : '添加虚拟物料成功', 2, () => {
            form.resetFields();
          });
      })
      .catch((e) => {});
  };

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };
  const formTailLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 12 },
  };
  const {
    addType,
    addVisible,
    selectArea,
    supplierData
  } = props;
  const calcPrice = () => {
    const materialPrice = form.getFieldValue('materialPrice');
    const totalNum = form.getFieldValue('totalNum');
    let amount = 0;
    if (materialPrice && totalNum ) {
      amount = materialPrice * totalNum;
    }
    form.setFieldsValue({
      amount
    });
  }

  // const treeData = Boolean(groupTree && groupTree.length > 0)
  //   ? treeSeparate(groupTree, 'subGroups', 'id')
  //   : [];


  return (
    <Modal
      width={848}
      title={addType === 'edit' ? '编辑无物料号' : '创建无物料号'}
      visible={addVisible}
      onCancel={handleClose}
      afterClose={handleClose}
      closable={false}
      footer={null}
    >
      <Form form={form}>
        <Row>
          <Col md={24}>
            <Form.Item
              name="materialName"
              {...formItemLayout}
              label="物料品名"
              rules={[{ required: true, message: `请输入物料品名` }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
          <Col md={24}>
            <Form.Item
              name="mmodel"
              {...formItemLayout}
              label="规格/型号"
              rules={[{ required: true, message: `请输入规格/型号` }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
           <Col md={24}>
            <Form.Item
              name="supplierName"
              {...formItemLayout}
              label="供应商"
              rules={[{ required: true, message: `请输入供应商` }]}
            >
              {/* <Input placeholder="请输入" /> */}
              <Select placeholder='请选择'>
                {
                  supplierData && supplierData.map(item => {
                      return <Option key={item.value} value={ item.label }>{ item.label }</Option>
                  })
                }
              </Select>
              
            </Form.Item>
          </Col>
          {/* <Col md={24}>
            <Form.Item
              name="purchaseCycle"
              {...formItemLayout}
              label="采购周期"
              rules={[{ required: true, message: `请输入采购周期` }]}
            >
              <InputNumber min={ 0 } placeholder="请输入" style={{width:'100%'}} />
            </Form.Item>
          </Col> */}
          <Col md={24}>
            <Form.Item
              name="munit"
              {...formItemLayout}
              label="单位"
              rules={[{ required: true, message: `请输入单位` }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
           <Col md={24}>
            <Form.Item
              name="materialPrice"
              {...formItemLayout}
              label="单价(元)"
              rules={[{ required: true, message: `请输入单价` }]}
            >
              <InputNumber min ={ 0 } placeholder="请输入" style={{width:'100%'}} onChange = { calcPrice } />
            </Form.Item>
          </Col>
          <Col md={24}>
            <Form.Item
              name="totalNum"
              {...formItemLayout}
              label="领取数量"
              rules={[{ required: true, message: `请输入领取数量` }]}
            >
              <InputNumber min ={ 0 } placeholder="请输入" style={{width:'100%'}} onChange = { calcPrice } />
            </Form.Item>
          </Col>
          <Col md={24}>
            <Form.Item
              name="amount"
              {...formItemLayout}
              label=" 总领取金额"
              
              rules={[{ required: true, message: `请输入领取"金额` }]}
            >
              <Input placeholder="请输入" readOnly disabled  addonAfter="元" />
            </Form.Item>
          </Col>
          <Col md={24}>
            <Form.Item
              name="picture"
              {...formItemLayout}
              label=" 物料图片"
              rules={[{ required: true, message: `请上传物料图片` }]}
            >
                <UploadFile
                      listType="picture-card"
                      className="avatar-uploader"
                      showUploadList={true}
                      beforeUpload={beforeUpload}
                      maxCount={1}
                >
                  <PlusOutlined style={{display:'block',fontSize:16}} />
                    <div>上传图片</div>
              </UploadFile>
            </Form.Item>
          </Col>

          <Col md={24}>
            <Form.Item name="remarks" {...formItemLayout} label="备注">
              <TextArea type="text" placeholder="请输入" rows="3" maxLength="50" showCount />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col offset={4} span={12}>
            <Button
              loading={props.loading}
              type="primary"
              style={{ marginRight: 30 }}
              onClick={handleSubmit}
            >
              提交
            </Button>
            <Button onClick={handleClose}>取消</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default connect(({ ware, loading }) => ({
  ware,
  loading: loading.models.setting,
}))(NoSystemModal);