import { Badge, Divider, Typography } from 'kts-components-antd-x4';
import React from 'react';
import agent from '../Server';
import { useHistory } from 'react-router-dom';
import Icon from '@ant-design/icons';
import { Button, PageHeaderFoot } from 'kts-xui'
import { ReactComponent as Back } from './icon/backIcon.svg';
const { Title, Paragraph, Text, Link } = Typography;
interface LawSuitDetailCompany {
    title: string;
}
interface LawSuitDetailLawFirm {
    title: string;
}
interface LawSuitDetail {
    appellantRequest: string;
    appelleeArguing: string;
    appellor: string;
    caseno: string;
    casetype: string;
    companies: LawSuitDetailCompany[];
    court: string;
    courtConsider: string;
    courtConsiderOfFirst: string;
    courtInspect: string;
    courtInspectOfFirst: string;
    defendantReply: string;
    defendantReplyOfFirst: string;
    doctype: string;
    judgeDate: string;
    judgeResult: string;
    lawFirms: LawSuitDetailLawFirm[];
    plaintext: string;
    plaintiffRequest: string;
    plaintiffRequestOfFirst: string;
    title: string;
    trialAssistPerson: string;
    trialPerson: string;
    trialProcedure: string;
    url: string;
    uuid(string, optional)
}

export default function App(props) {
    const history = useHistory();
    const [detail, setDetail] = React.useState<LawSuitDetail>();
    React.useEffect(() => {
        if (props.match.params?.id) {
            (async () => {
                const param = {
                    tycId: props.match.params.id,
                    id: props.location.state.id
                }
                const res: any = await agent.post('/web/verifierparty/risk/get-lawsuitdetail', param, null);
                if (res.err) {
                    return;
                } else {
                    setDetail(res.res);
                }
            })()
        }
    }, [props.match.params?.id])
    return <>
        <PageHeaderFoot
            title={<span style={{ fontSize: 16 }}>法律诉讼</span>}
            expandRight={[
                <Button key='2' style={{ marginRight: 20 }} icon={<Icon component={Back} />} onClick={() => history.goBack()}></Button>
            ]}
        />

        <div style={{ padding: '40px 20px 20px' }}>
            <Typography>
                <Title level={4} style={{ textAlign: 'center' }}>{detail?.title}</Title>
            </Typography>
            {detail?.judgeDate &&
                <Paragraph> 裁判日期:
                    {detail.judgeDate}
                </Paragraph>
            }
             {detail?.companies &&
                <Paragraph> 相关公司:
                    {
                        detail.companies.map((item,key)=>{
                            return <>{item.title}<br/></>
                        })
                    }
                </Paragraph>
            }
            <p>
                <Divider dashed={true} />
            </p>
            {detail?.plaintiffRequest &&
                <p>
                    <Paragraph>
                        <Title level={5} style={{ textAlign: 'left' }}>原告观点</Title>
                        <span dangerouslySetInnerHTML={{__html:detail.plaintiffRequest}}></span>
                    </Paragraph>
                </p>}
            {detail?.defendantReply &&
                < p >
                    <Paragraph>
                        <Title level={5} style={{ textAlign: 'left' }}>被告观点</Title>
                        <span dangerouslySetInnerHTML={{__html:detail.defendantReply}}></span>
                    </Paragraph>
                </p>
            }
            {detail?.courtInspect &&
                <p>
                    <Paragraph>
                        <Title level={5} style={{ textAlign: 'left' }}>案件事实</Title>
                        <span dangerouslySetInnerHTML={{__html:detail.courtInspect}}></span>
                    </Paragraph>
                </p>
            }
            {detail?.courtConsider &&
                <p>
                    <Paragraph>
                        <Title level={5} style={{ textAlign: 'left' }}>法院观点</Title>
                        <span dangerouslySetInnerHTML={{ __html: detail.courtConsider || '' }}></span>
                    </Paragraph>
                </p>
            }
            {detail?.plaintext &&
                <p>
                    <Paragraph>
                        <Title level={5} style={{ textAlign: 'left' }}>案件结果</Title>
                        <span dangerouslySetInnerHTML={{__html:detail.plaintext}}></span>
                    </Paragraph>
                </p>
            }
        </div>
    </>
};