import React, {useRef} from 'react';
import {PageContainer} from "@ant-design/pro-layout";
import {ProForm, ProFormInstance, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
import AliyunOSSUpload from "@/components/Oss/AliyunOSSUpload";
import styles from './index.less';
import {Card, message} from "antd";
import {getInstitution, updateInstitution} from "@/services/institution";
import {useModel} from "@@/plugin-model/useModel";

const InstitutionEdit: React.FC = (props) => {
  const addInstitutionFormRef = useRef<ProFormInstance>();
  const imgUploadRef = useRef<AliyunOSSUpload>();
  const {initialState} = useModel('@@initialState');
  const {currentUser} = initialState;

  const handleSubmit = async (values: API.UpdateInstitutionParams) => {
    updateInstitution({
      ...values
    }).then(data => {
      if (data.code == 200) {
        message.success("设置成功");
      } else {
        message.error(data.message)
      }
    }).catch(data => {
      console.log(data)
    })
  };


  return (
    <div>
      <PageContainer>
        <Card>
          <div className={styles.content}>
            <ProForm
              formRef={addInstitutionFormRef}
              initialValues={{}}
              submitter={{
                render: (_, dom) => dom.pop(),
                submitButtonProps: {
                  size: 'large',
                  style: {
                    width: '100%',
                  },
                },
                searchConfig: {
                  submitText: '提交',
                },
              }}
              onFinish={async (values) => {
                await handleSubmit(values);
              }}
              request={async () => {
                let response = await getInstitution(currentUser?.institutionId)
                if (response.code == 200) {
                  setTimeout(() => {
                    imgUploadRef.current?.setState({"url": response!.data!.logo})
                  })
                  return {
                    institutionId: response!.data!.id,
                    name: response!.data!.name,
                    desc: response!.data!.desc,
                    logo: response!.data!.logo,
                  }
                } else {
                  return {}
                }
              }}
            >
              <>
                <ProFormText name="institutionId" hidden={true}/>
                <ProFormText name="name" label="名字" rules={[{required: true},]}/>
                <ProForm.Item
                  label="Logo"
                  name="logo"
                  rules={[{required: true}]}
                  getValueFromEvent={(e) => {
                    console.log(e)
                  }}
                >
                  <AliyunOSSUpload uploaded={(url: string) => {
                    addInstitutionFormRef.current?.setFieldsValue({
                      logo: url
                    });
                  }} isImg={true} ref={imgUploadRef}/>
                </ProForm.Item>
                <ProFormTextArea name="desc" label="描述" rules={[{max: 200},]}/>
              </>

            </ProForm>
          </div>
        </Card>
      </PageContainer>
    </div>
  );
}

export default InstitutionEdit
