import React, { useEffect, useState } from 'react';
import {
  ModalForm,
  ProFormSelect,
  ProFormDigit,
  ProFormDatePicker
} from '@ant-design/pro-form';

// import { Cascader, Form, Input } from 'antd';

import { getResponsibilityCenterList } from '@/pages/responsibilityCenter/service';

import { getCostshareparamList } from '@/pages/costAllocationParamsSetting/service';



const UpdateForm = (props) => {
  const { updateModalVisible, updateModalVisibleChange, values, onSubmit } = props;
  const [options, setOptions] = useState([]);
  const [responsibilityCodes, setResponsibilityCode] = useState(null);
  const [selected, setSelected] = useState([]);
  // console.log({'回显':values});

  useEffect(async () => {
    if (JSON.stringify(values) !== '{}') {
      const { responsibilityCodes } = values;

      setSelected(responsibilityCodes ? [].concat(responsibilityCodes.split('/')) : []);
      const resp = await getResponsibilityCenterList({ pageSize: 50, current: 1 });
      const { status, data } = resp;
      if (status == 200) {
        setOptions(data.list);
      }
    }
  }, [values]);



  return (
    <>
      {
        JSON.stringify(values) !== '{}' && <ModalForm
          title="编辑收入归集设置"
          width="800px"
          initialValues={{ ...values }}
          labelCol={{ span: 5, offset: 3 }}
          layout={'horizontal'}
          visible={updateModalVisible}
          onVisibleChange={(visible) => updateModalVisibleChange(visible)}
          onFinish={(value) => onSubmit({ ...values, ...value, responsibilityCodes })}
        >
          <ProFormDatePicker
            name="date"
            rules={[
              {
                required: true,
                message: '时间是必选项！',
              },
            ]}
            width="sm"
            label="年月"
            fieldProps={{ picker: 'month', locale: locale, format: 'yyyy-MM' }}
          />
          <ProFormSelect
            name="shareParamCode"
            label="选择分摊参数"
            rules={[
              {
                required: true,
                message: '必选项！',
              },
            ]}
            request={async (params = {}, sort, filter) => {
              const resp = await getCostshareparamList({ ...params, pageSize: 500 });
              const {
                status,
                data: { list },
              } = resp;
              if (status == 200) {
                return (
                  list &&
                  list.map((item) => ({ label: item.shareParamName, value: item.shareParamCode }))
                );
              }
            }}
            width="sm"
            placeholder="请选择"
            rules={[{ required: true, message: '分摊参数是必选项！' }]}
          />
          <ProFormText
            name="responsibilityName"
            label="选择责任中心"
            placeholder="请选择"
            rules={[
              {
                required: true,
                message: '必选项！',
              },
            ]}
            stringMode
            width="sm"
            min={0}
            fieldProps={{
              onClick: () => openDrawer(),
            }}
          />
          <ProFormDigit
            label="数值"
            name="valueNum"
            width="sm"
            rules={[
              {
                required: true,
                message: '必选项！',
              },
            ]}
          />
        </ModalForm>
      }
    </>
  );
};

export default UpdateForm;