/*
 * @Author: liqiang
 * @Date: 2021-03-05 13:55:50
 * @LastEditTime: 2021-03-05 14:42:50
 * @LastEditors: Please set LastEditors
 * @Description: 邀请函信息
 * @FilePath: \ebtp-cloud-frontend\src\utils\InvitationLetter.tsx
 */
import { getNoticeInfo } from '@/pages/Bid/Supplier/InvitationDetails/service';
import { Button, Modal, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { isNotEmpty } from './CommonUtils';
import ExtendUpload from './ExtendUpload';

interface InvitationLetterItem {
    projectData: any,
    visible: boolean,
    setVisible: (value: boolean) => void
}
const { TabPane } = Tabs;
const modalHeight = innerHeight * 96 / 100;
const InvitationLetter: React.FC<InvitationLetterItem> = (props) => {
    const { projectData, visible, setVisible } = props;
    const [announcementInformation, setAnnouncementInformation] = useState<any>();
    useEffect(() => {
        if (isNotEmpty(projectData)) {
            getNoticeInfo(projectData.annoIds).then(res => {
                setAnnouncementInformation(getAnnouncementInformation(res.data));
            })
        }
    }, [projectData]);

    /**
     * 获取邀请函
     * @param data
     */
    const getAnnouncementInformation = (data: any) => {
        if (data.length === 0) {
            return <div className="textAlignCenter">
                <h1>该项目没有公告</h1>
            </div>
        }
        return (
            <Tabs>
                {data.map((item: any, index: number) => {
                    return (<TabPane tab={`邀请函${index + 1}`} key={index}>
                        <div className="textAlignCenter">
                            <h1>{String(item.annoNature) === '7' && '【变更公告】'}{item.annoTitle}</h1>
                        </div>
                        <p dangerouslySetInnerHTML={{ __html: item.contentWithStyle }}>
                        </p>
                        <ExtendUpload bid={item.attDatasetId} btnName="附件" uploadProps={{ disabled: true }} />
                    </TabPane>
                    )
                })
                }
            </Tabs>
        )
    }
    /**
     * 关闭
     */
    const close = () => {
        setVisible(false);
        setAnnouncementInformation(null);
    }

    return <Modal visible={visible}
        title="邀请函信息"
        onCancel={close}
        centered
        destroyOnClose
        width="50%"
        style={{ maxHeight: modalHeight }}
        bodyStyle={{ maxHeight: modalHeight - 107, overflowY: 'auto' }}
        footer={[
            <Button onClick={close}>取消</Button>
        ]}
    >
        {announcementInformation}
    </Modal>
}

export default InvitationLetter;