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

import { getMainDistrictList } from './service';


const UpdateForm = (props) => {
  const { updateModalVisible, updateModalVisibleChange, values, onSubmit } = props;
  const [selectedHosp,setSelectedHosp] = useState({});
  // console.log({values});
  return (
    <>
      {
        JSON.stringify(values) !== '{}' && <ModalForm
          title="编辑医院"
          width="800px"
          initialValues={{ ...values }}
          labelCol={{ span: 3, offset: 3 }}
          layout={'horizontal'}
          visible={updateModalVisible}
          onVisibleChange={(visible) => updateModalVisibleChange(visible)}
          onFinish={(value) => onSubmit({ ...values, ...value,parentName:selectedHosp.name})}
        >
          <ProFormText
            label="医院名"
            rules={[
              {
                required: true,
                message:'医院名是必填项',
              },
            ]}
            width="sm"
            name="name"
          />
          <ProFormSelect
            // initialValue={parseInt(values.isHospital)}
            rules={[
              {
                required: true,
                message:'请选择是否为主院',
              },
            ]}
            options={[
              {
                value: 0,
                label: '是',
              },
              {
                value: 1,
                label: '否',
              },
            ]}
            width="xs"
            name="isHospital"
            label="是否为主院"
          />

          <ProFormDependency name={['isHospital']}>
            {({ isHospital }) => {
              return isHospital == 0 ? (
                <ProFormText
                  label="医院标识"
                  rules={[
                    {
                      required: false,
                      message:'',
                    },
                  ]}
                  width="sm"
                  name="sign"
                />
              ) : <></>;
            }}
          </ProFormDependency>
          <ProFormDependency name={['isHospital']}>
          {({ isHospital }) => {
            return isHospital == 1 ? (
              <ProFormSelect
                name="parentId"
                label="选择主医院"
                request={async () =>{
                      const resp = await getMainDistrictList();
                      const {status,data,} = resp;
                      
                      if(status == 200){
                        return data.map(item=>({
                          label:item.name,
                          value:item.id
                        }))
                      }
                }}
                fieldProps={{
                  onChange: async (val) => {
                    const resp = await getMainDistrictList();
                    const {status,data,} = resp;
                    if(status==200){
                        const needItem = data.filter(item => item.id == val);
                        needItem.length>0&&setSelectedHosp(needItem[0]);
                    }
                    
                  },
                }}
                placeholder="请选择主医院"
                width='sm'
                rules={[{ required: true, message: '请选择主医院' }]}
              />
            ) : <></>
          }}
        </ProFormDependency>
        </ModalForm>
      }
    </>
  );
};

export default UpdateForm;