import {
  ProCard,
  ProForm,
  ProFormDependency,
  ProFormSelect,
  ProFormText,
  ProFormUploadDragger,
} from '@ant-design/pro-components';
import { Form, Image } from 'antd';
import React, { useState } from 'react';
// @ts-ignore
import cookie from 'react-cookies';
const ShowInfoDemo: React.FC = () => {
  const [form] = Form.useForm<API.ModelImage>();
  const [imageUrl, setImageUrl] = useState<string>('');
  // useEffect(()=>{

  // }, [])
  const initialValues = {
    cardCode: '200100199508081010',
    gender: '男',
  };
  return (
    <div className="showInfoDemo_wrap">
      <ProCard wrap title={'选择图片'} bodyStyle={{ display: 'flex' }}>
        <div>
          <ProFormUploadDragger
            width={800}
            name="projectFilePath"
            action="/api/v1/file/uploadFile"
            max={1}
            fieldProps={{
              showUploadList: false,
              listType: 'picture-card',
              beforeUpload: (file) => {
                const reader = new FileReader();
                reader.onload = (e) => {
                  setImageUrl(e.target?.result as string);
                };

                reader.readAsDataURL(file);

                // 返回 false 可以阻止上传
                // 返回 Promise 可以异步操作
                return true;
              },
              maxCount: 1,
              name: 'file',
              // beforeUpload: beforeUploadFile,
              data: { path: 'project/files' },
              headers: {
                'X-CSRFToken': cookie.load('csrftoken'),
                Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
              },
            }}
          >
            <Image width={800} src={imageUrl} preview={false} />
          </ProFormUploadDragger>

          {/* <Image width={800} height={800} src={imageUrl}>

          </Image> */}
        </div>

        {/* 展示信息 */}
        <div style={{ flex: 1, padding: 20 }}>
          <ProForm
            form={form}
            initialValues={initialValues} // 设置初始值
            submitter={
              { render: false } // 隐藏提交按钮
            } // 配置 submitter
          >
            <ProFormSelect
              fieldProps={{
                labelInValue: true,
              }}
              request={async () => [
                // TODO 使用接口数据与  initialValues 值对应
                { label: '证件号码', value: 'cardCode' },
                { label: '性别', value: 'gender' },
              ]}
              name="name1"
              label="展示数据"
            />
            <ProFormDependency name={['name1']}>
              {({ name1 }) => {
                if (name1) {
                  console.log(name1, 'ProFormDependency_name1');
                  return (
                    <ProFormText label={name1.label} name={name1.value} disabled required={false} />
                  );
                }
                return <></>;
              }}
            </ProFormDependency>
          </ProForm>
        </div>
      </ProCard>
    </div>
  );
};

export default ShowInfoDemo;
