import React from 'react';
import {Tooltip} from 'antd';

import { InfoCircleOutlined } from '@ant-design/icons';

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



const UpdateForm = (props) => {
  const { updateModalVisible, updateModalVisibleChange, values, onSubmit } = props;
  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 })}
        >
          <ProFormText
            label="菜单名称"
            rules={[
              {
                required: true,
                message: '角色名是必填项！',
              },
            ]}
            width="sm"
            name="name"
          />
          <ProFormText
            label="Path"
            rules={[
              {
                required: true,
                message: '菜单路径是必填项！',
              },
            ]}
            width="sm"
            name="path"
          />
          {/* <ProFormText
            label="权限字段"
            rules={[
              {
                required: true,
                message: '权限字段是必填项！',
              },
            ]}
            width="sm"
            name="perms"
          /> */}
          <ProFormSelect
            name="type"
            label="类型"
            width="sm"
            options={[
              { label: '目录', value: 0 },
              { label: '菜单', value: 1 },
              { label: '按钮', value: 2 },
            ]}
            fieldProps={{
              optionItemRender(item) {
                return item.label + ' - ' + item.value;
              },
            }}
            placeholder="请选择类型"
            rules={[{ required: true, message: '请选择类型!' }]}
          />
          <ProFormText
            label="菜单Icon"
            rules={[
              {
                required: false,
              },
            ]}
            width="sm"
            name="icon"
          />
          <ProFormDigit
            label="菜单排序"
            rules={[
              {
                required: false,
              },
            ]}
            width="sm"
            name="orderNum"
          />
          <ProFormDependency name={['type']}>
            {
               ({type})=>{
                if(type == 1){
                  return (
                    <ProFormText
                      label="帆软url"
                      rules={[
                        {
                          required: false,
                        },
                      ]}
                      fieldProps={{
                        suffix:<Tooltip title="注意，填写该地址，页面内容将被代理!">
                        <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
                      </Tooltip>
                      }}
                      width="sm"
                      name="softUrl"
                    />
                  )
               }
            }
          }
        </ProFormDependency>
        </ModalForm>
      }
    </>
  );
};

export default UpdateForm;
