import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, Row, Col } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import Styles from './styles.less';
import router from 'umi/router';
import moment from 'moment';

import apis from '../../../services/apis';
import request from '../../../utils/request';


import AuthButton from '@/components/AuthButton';


const header = props => {

    const id = props.location.query.id

    const [data, setData] = useState({})

    useEffect(() => {

        getList(id);


    }, [])

    const getList = (id) => {
        request({ ...apis.manage.detail, urlData: { id: id } }).then((data) => {
            setData(data)
        })
    }

    const onArchives = () => {
        request({
            ...apis.manage.archives,
            urlData: { id: id },
            data: { contractId: parseInt(id), archives: true }
        }).then((data) => {
            setData(data)
            message.info("归档成功")

        })
    }

    const datas = [
        {
            name: "合同标题",
            value: data.contractName
        },
        {
            name: "关联业务类型",
            value: data.targetType,
            render: () => <><span>{data.targetType == "raise" ? "房源认筹" : ""}</span></>,
        },
        {
            name: "关联业务",
            value: data.targetName

        },
        {
            name: "关联单据类型",
            value: data.invoiceTargetType,
            render: () => <><span>{data.invoiceTargetType == "raise_record" ? "认筹单" : ""}</span></>,
        },
        {
            name: "关联单据编号",
            value: data.invoiceTargetId
        },
        {
            name: "甲方名称",
            value: data.signatoryName,

        },
        {
            name: "甲方签署时间",
            value: data.signatoryTime,
            render: <><span>{data.signatoryTime ? moment(data.signatoryTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></>
        },
        {
            name: "乙方名称",
            value: data.customerName
        },
        {
            name: "乙方手机号",
            value: data.customerTel
        },
        {
            name: "乙方身份证号",
            value: data.customerIdcard
        },
        {
            name: "乙方签署时间",
            value: data.customerTime,
            render: <><span>{data.customerTime ? moment(data.customerTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></>
        },
        {
            name: "已签署合同",
            // value:data.,
            render: (x, row) => <><a type="button" className={Styles.btn} href={data.contractViewUrl} target="_blank">查看合同</a> <a href={data.contractDownloadUrl} download="234.pdf" style={{ color: '#1D74D9', marginLeft: '30px' }}>下载合同</a> </>
        },
        {
            name: "是否归档",
            value: data.archives,
            render: (x, row) => <><span>{data.archives ? '是' : '否'}</span>{!data.archives && <a onClick={() => onArchives(data.contractId)} style={{ color: '#1D74D9', marginLeft: '30px' }}>归档</a>}  </>
        },
        {
            name: "归档时间",
            value: data.archivesTime,
            render: <><span>{data.archivesTime ? moment(data.archivesTime).format('YYYY-MM-DD HH:mm:ss') : ''}</span></>
        },
    ]


    return (

        <>
            <div align="right"><Button onClick={() => router.go(-1)}>返回</Button></div>

            {datas.map((x) => {
                return <Row style={{ margin: '20px 0' }}>
                    <Col span={5} className={Styles.title} align="right" >
                        {x.name}
                    </Col>
                    <Col span={9} offset={2} className={Styles.text}>
                        {
                            x.render ? typeof x.render === 'function' ? x.render(props) : x.render : x.value
                        }
                    </Col>
                    <Col span={2} offset={4}>
                    </Col>
                </Row>
            })}
        

        </>
    )
}


export default header
