/*
 * @Author: your name
 * @Date: 2021-07-30 18:09:25
 * @LastEditTime: 2021-08-03 17:18:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /TracerMethodology_PC/src/pages/costAllocationParamsConnect/updateForm_drawer.js
 */

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


import {
    getParamsSelectableList
  } from './service';

const UpdateFormDrawer = (props) => {
  const {
    values: record,
    drawerUpdateModalVisible,
    drawerUpdateModalVisibleChange,
    currentResponsibilityRow,
    onSubmit,
  } = props;

  const [selectedParam, setSelectedParam] = useState(null);


  return (
    <>
      {JSON.stringify(record) !== '{}'&&record.shareParamPopout && (
        <ModalForm
          title="编辑成分摊参数"
          width="800px"
          initialValues={{ ...record }}
          labelCol={{ span: 5, offset: 3 }}
          layout={'horizontal'}
          visible={drawerUpdateModalVisible}
          onVisibleChange={(visible) => drawerUpdateModalVisibleChange(visible)}
          onFinish={(value) => onSubmit({ ...record, ...value })}
        >
          <ProFormSelect
            rules={[
              {
                required: true,
                message:'',
              },
            ]}
            fieldProps={{
              //这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法
              onChange: async (val) => {
                // setSelectedParam(val);
                const { id } = currentResponsibilityRow;
                const resp = await getParamsSelectableList({ id });
                const { data, status } = resp;
                if (status == 200) {
                  const selected = data.list.filter((item) => item.id == val);
                  setSelectedParam(selected[0]);
                }
              },
            }}
            request={async () => {
              
              const { id } = currentResponsibilityRow;
              const resp = await getParamsSelectableList({ id });
              const { data, status } = resp;
        
              if (status == 200) {
                const temp = data.list.map((item) => ({
                  label: item.shareParamName,
                  value: item.id,
                }));
                return temp;
              }
            }}
            width="sm"
            name="id"
            label="请选择分摊参数"
          />

          <ProFormDigit width={100} label="分摊比例" name="shareParamPopout" min={0} max={101} />
        </ModalForm>
      )}
    </>
  );
};

export default UpdateFormDrawer;