import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import { useModel } from 'umi';
import iconClose from '@/assets/images/page-person-import/close-icon.svg';
import styles from './index.less';
import { exportUsersError } from '../Uploader/service';
const importTitleIcon = require('@/assets/images/page-person-import/import-icon.svg');

export default ({ info, onClose }) => {
  const { initialState } = useModel('@@initialState');

  const downloadExcel = () => {
    let param = {
      companyId: initialState?.currentUser?.companyId,
      key: info.key,
    };
    exportUsersError(param)
      .then((resData) => {
        console.log('resData==', resData);
        let headers = resData.response && resData.response.headers;
        console.log(headers.get('content-disposition'));
        let disposition = headers.get('content-disposition');
        let filename = disposition
          ? decodeURI(disposition.split(';')[1].split('filename=')[1])
          : '错误报告.xls';
        const link = document.createElement('a');
        let data = resData.data;
        let blob = new Blob([resData], {
          // type: 'application/xlsx',
          type: 'application/msexcel',
        });
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        console.log(filename);
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(link);
      })
      .catch(() => {});
  };

  return (
    <Modal
      open
      width={760}
      footer={[]}
      closable={false}
      className={styles.importError}
      onClose={onClose}
    >
      <div className={styles.header}>
        <div
          className={styles.close}
          onClick={() => {
            onClose();
          }}
        >
          <img src={iconClose} alt="" />
        </div>

        <div className={styles.title}>
          <img src={importTitleIcon} alt="" />
        </div>
      </div>
      <div className={styles.listW}>
        <div className={styles.info}>{info.message}</div>
        <div className={styles.list}>
          <div className={styles.row}>
            <div className={styles.col1}>姓名</div>
            <div className={styles.col2}>类型</div>
            <div className={styles.col3}>手机号</div>
            <div className={styles.col4}>职务</div>
            <div className={styles.col5}>原因</div>
          </div>
          {(info.data || []).map((item, itemIndex) => {
            return (
              // eslint-disable-next-line react/no-array-index-key
              <div className={styles.row} key={itemIndex}>
                <div className={styles.col1}>{item.name}</div>
                <div className={styles.col2}>{item.manageUserType}</div>
                <div className={styles.col3}>{item.phone}</div>
                <div className={styles.col4}>{item.job}</div>
                <div className={styles.col5}>
                  {(Array.from(item.remark) || []).map((remark) => {
                    <div>{remark}</div>;
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className={styles.footer}>
        <div className={styles.footerLeft}>
          您可以
          <span onClick={downloadExcel}>下载错误报告,</span>
          修改后重新导入
        </div>
        <div
          className={styles.footerRight}
          onClick={() => {
            onClose(2);
          }}
        >
          重新导入
        </div>
      </div>
    </Modal>
  );
};
