import React, { useState,useEffect} from 'react';
import { Cascader,Form } from 'antd';
import ProForm, {
  ProFormSelect,
  ProFormText,
  ModalForm,
  ProFormTextArea
} from '@ant-design/pro-form';
import { useIntl, FormattedMessage } from 'umi';

import {
  getResponsibilityCenterSelecterList
} from './service';


const UpdateForm = (props) => {
  const { cascaderOptions, cascaderChangeHandle, values: record ,updateModalVisible, updateModalVisibleChange,onSubmit} = props;
  const { accountingId,responsibilityId } = record;
  const [selectedCascader, setSelectedCascader] = useState(null);
  const [ifDisable, setIfDisable] = useState(false);
  const [selectedResponsibilityId, setSelectedResponsibilityId] = useState(null);

  // console.log({record});
   
  useEffect(async () => {
    const resp = await getResponsibilityCenterSelecterList();
    const { data, msg, status } = resp;
    if (status == 200) {
      const selected = data.filter(item =>{
          // console.log({item});
          return item.responsibilityId == responsibilityId
      });
      // console.log({selected,data});
      if (selected&&selected.length>0&&selected[0].calcType == 0) {
        setIfDisable(true);
      } else {
        setIfDisable(false);
      }
    }
  }, [record])

  return (
    <>
      {
        JSON.stringify(record) !== '{}' && <ModalForm
          title="编辑成本分摊参数"
          width="800px"
          initialValues={{ ...record,cascaderIds:[accountingId] }}
          labelCol={{ span: 5, offset: 3 }}
          layout={'horizontal'}
          visible={updateModalVisible}
          onVisibleChange={(visible) => updateModalVisibleChange(visible)}
          onFinish={(value) => onSubmit({ ...record, ...value,ifDisable })}
        >
          <ProFormSelect
            rules={[
              {
                required: true,
                message: (
                  <FormattedMessage id="pages.searchTable.responsibilityId" defaultMessage="请选择责任中心" />
                ),
              },
            ]}
            fieldProps={{//这里使用了select的onChange方法，必须使用这样的写法来进行调用onChange方法
              onChange: async (val) => {
                setSelectedResponsibilityId(val);
                const resp = await getResponsibilityCenterSelecterList();
                const { data, msg, status } = resp;
                if (status == 200) {
                  const selected = data.filter(item => item.id == val);
                  console.log({val,selected});
                  if (selected && selected[0].calcType == 0) {
                    setIfDisable(true);
                  } else {
                    setIfDisable(false);
                  }
                }
              },
            }}
            request={async () => {
              const resp = await getResponsibilityCenterSelecterList();
              const { data, msg, status } = resp;
              if (status == 200) {
                return data.map(item => ({
                  label: item.responsibilityName,
                  value: item.id
                }))
              }
            }}
            width="sm"
            name="responsibilityId"
            label="请选择责任中心"
          />
          <Form.Item name="cascaderIds" label="请选择成本科目" wrapperCol={{ offset:0, span:7 }} >
                <Cascader disabled={ifDisable} options={cascaderOptions}    placeholder="请选择成本科目" onChange={cascaderChangeHandle} />

          </Form.Item>
          {/* <ProForm.Group style={{ marginBottom: 20 }}>
            <div style={{ marginLeft: 115 }}>请选择成本科目:</div>
            <Cascader defaultValue={accountingId} disabled={ifDisable} options={cascaderOptions} onChange={cascaderChangeHandle} placeholder="请选择成本科目" />
          </ProForm.Group> */}

          <ProFormTextArea
            name="costNode"
            label="备注"
            width={300}
            placeholder="请输入备注"
          />
        </ModalForm>
      }
    </>
  );
};

export default UpdateForm;
