import React from 'react';

interface DocUrlModalProps {
  visible: boolean;
  url: string;
  onClose: () => void;
  DownLoadFile:() => void;
}

const modalStyle: React.CSSProperties = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
  background: 'rgba(0,0,0,0.3)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  zIndex: 9999
};

const boxStyle: React.CSSProperties = {
  background: '#fff',
  borderRadius: 12,
  padding: 32,
  minWidth: 320,
  boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
  textAlign: 'center'
};

const buttonStyle: React.CSSProperties = {
  marginTop: 24,
  padding: '10px 32px',
  background: '#1890ff',
  color: '#fff',
  border: 'none',
  borderRadius: 6,
  fontSize: 16,
  cursor: 'pointer'
};

const closeStyle: React.CSSProperties = {
  position: 'absolute',
  top: 16,
  right: 24,
  fontSize: 20,
  color: '#888',
  cursor: 'pointer',
  background: 'none',
  border: 'none'
};

const DocUrlModal: React.FC<DocUrlModalProps> = ({ visible, url, onClose ,DownLoadFile}) => {
  if (!visible) return null;
  return (
    <div style={modalStyle}>
      <div style={{ ...boxStyle, position: 'relative' }}>
        <button style={closeStyle} onClick={onClose} title="关闭">×</button>
        <h2 style={{ marginBottom: 16 }}>上传成功！</h2>
        <div style={{ wordBreak: 'break-all', marginBottom: 12 }}>
          文档链接：<a href={`https://applink.dingtalk.com/page/link?url=${encodeURIComponent(url)}`} target="_blank" rel="noopener noreferrer">{url}</a>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginTop: 24 }}>
          <button style={buttonStyle} onClick={() => window.open(`https://applink.dingtalk.com/page/link?url=${encodeURIComponent(url)}`, '_blank')}>打开文件</button>
          <button style={buttonStyle} onClick={DownLoadFile}>文件下载</button>
          <button style={{ ...buttonStyle, background: '#f0f2f5', color: '#1890ff', border: '1px solid #e6f7ff' }} onClick={onClose}>返回首页</button>
        </div>
      </div>
    </div>
  );
};

export default DocUrlModal; 