import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import styles from './index.less';
import { useModel } from 'umi';
import { Input, message } from 'antd';
import {
  companyInfo,
  companyUpdate,
  importUsers,
  getFileUrl,
} from '@/services/sagacare_service/infomation';
export default () => {
  const { initialState } = useModel('@@initialState');
  const fileInputRef = useRef();
  const [englishAbbreviation, setEnglishAbbreviation] = useState('');
  const [abbreviation, setAbbreviation] = useState('');
  const [intro, setIntro] = useState('');
  const [companyName, setCompanyName] = useState('');
  const [englishName, setEnglishName] = useState('');
  const [logoUrl, setLogoUrl] = useState('');
  const [imgUrl, setImgUrl] = useState('');
  const handleFileSelected = useCallback(
    (e) => {
      const file = e.target.files[0];
      if (file.size > 1024 * 1024 * 10) {
        message.error('文件大小不能超过 10MB');
        return;
      }
      importUsers(file).then((res) => {
        send('logoUrl', res.data.fileKey);
      });
    },
    [abbreviation, englishAbbreviation, intro, logoUrl],
  );
  const handleInfoChanged = useCallback(
    (key, value) => {
      send(key, value);
    },
    [abbreviation, englishAbbreviation, intro, logoUrl],
  );
  function getData() {
    let params = {
      criteria: {
        projectId: initialState?.currentUser?.projectId,
        companyId: initialState?.currentUser?.companyId,
      },
    };
    companyInfo(params).then((res) => {
      const resData = res.data || {};
      setEnglishAbbreviation(resData.englishAbbreviation || '');
      setAbbreviation(resData.abbreviation || '');
      setIntro(resData.intro || '');
      setCompanyName(resData.companyName || '');
      setEnglishName(resData.englishName || '');
      setLogoUrl(resData.logoUrl || '');
    });
  }

  const send = (key, value) => {
    const params = {
      abbreviation: abbreviation,
      englishAbbreviation: englishAbbreviation,
      intro: intro,
      logoUrl: logoUrl,
      companyId: initialState?.currentUser?.companyId,
    };
    params[key] = value;
    companyUpdate(params).then((res) => {
      message.success('修改成功');
      getData();
    });
  };

  useEffect(() => {
    if (companyName == '') {
      getData();
    }
    if (logoUrl) {
      getFileUrl(logoUrl).then((res) => {
        setImgUrl(res.data);
      });
    }
  }, [englishAbbreviation, abbreviation, intro, logoUrl, companyName]);
  return (
    <div className={styles.information}>
      <div className={styles.left}>
        <div className={styles.imgBox}>
          {imgUrl && <img className={styles.imgSt} src={imgUrl}></img>}
        </div>
        <input
          type="file"
          hidden
          accept="image/gif,image/jpeg,image/jpg,image/png"
          ref={fileInputRef}
          onChange={(e) => {
            handleFileSelected(e);
          }}
        />
        <div className={styles.setLogo} onClick={() => fileInputRef.current.click()}>
          修改Logo
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.contentLeft}>
          <div className={styles.title}>{companyName}</div>
          <div className={styles.slogan}>{englishName}</div>
          <div className={styles.lableInput}>
            <div className={styles.textLable} style={{ marginLeft: '75px', paddingTop: '84px' }}>
              公司口号
            </div>
            <div className={styles.inlineEditValue}>
              <Input
                value={intro}
                bordered={false}
                onChange={(e) => setIntro(e.target.value)}
                onBlur={() => handleInfoChanged('intro', intro)}
                onKeyUp={(e) => {
                  if (e.keyCode === 13) {
                    handleInfoChanged('intro', intro);
                  }
                }}
              />
              {/* <Icon type="edit" /> */}
            </div>
          </div>
        </div>
        <div className={styles.contentRight}>
          <div className={styles.lableInput}>
            <div className={styles.textLable}>中文简称</div>
            <div className={styles.inlineEditValue}>
              <Input
                value={abbreviation}
                bordered={false}
                onChange={(e) => setAbbreviation(e.target.value)}
                onBlur={() => handleInfoChanged('abbreviation', abbreviation)}
                onKeyUp={(e) => {
                  if (e.keyCode === 13) {
                    handleInfoChanged('abbreviation', abbreviation);
                  }
                }}
              />
              {/* <Icon type="edit" /> */}
            </div>
          </div>
          <div className={styles.lableInput} style={{ paddingTop: '68px' }}>
            <div className={styles.textLable}>英文简称</div>
            <div className={styles.inlineEditValue}>
              <Input
                value={englishAbbreviation}
                bordered={false}
                onChange={(e) => setEnglishAbbreviation(e.target.value)}
                onBlur={() => handleInfoChanged('englishAbbreviation', englishAbbreviation)}
                onKeyUp={(e) => {
                  if (e.keyCode === 13) {
                    handleInfoChanged('englishAbbreviation', englishAbbreviation);
                  }
                }}
              />
              {/* <Icon type="edit" /> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
