import { VtxFormLayout, VtxImage, VtxUpload } from '@vtx/components';
import { Form } from 'antd';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { getInfo } from './api';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import VtxGasSupplyStationModal from '../vtx-gas-supply-station-modal';
import VtxGasFillingStationModal from '../vtx-gas-filling-station-modal';
import { getUrlParam } from '@vtx/utils';
import dayjs from 'dayjs';
const BaseContent = props => {
    const { id } = props;
    const [info, setInfo] = useState({});

    useEffect(() => {
        if (id) {
            getInfo(id).then(data => {
                setInfo(data);
            });
        }
    }, [id]);
    let photoId = '';
    const {
        companyName,
        storageAndDistributionStationName,
        supplyStationName,
        name,
        phone,
        jobStr,
        workCode,
        sex,
        createTime,
        remark,
        trainingCertificateNumber,
        contractNumber,
        contractValidityPeriod,
        companyId,
        storageAndDistributionStationId,
        supplyStationId,
        trainingCertificateFile,
        contractFile,
        trainingCertificateValidityPeriod,
        birthday,
        commAddress,
        onboardinTrainingDay,
        degreeStr,
        jobTitle,
        isSafer,
        gasCommunityNames,
        reward,
        sendCertOrganName,
        sendCertDay,
        trainingDay,
    } = info;

    if (info.photo) {
        photoId = JSON.parse(info.photo)[0].id;
    }
    return (
        <Form layout="inline">
            <VtxFormLayout mode="view">
                <VtxFormLayout.Pane title="基本信息">
                    <VtxFormLayout.FormItem label="姓名">{name || '--'}</VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="代码" name="workCode">
                        {workCode || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="性别">
                        {sex === 1 ? '男' : '女'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="年龄">
                        {dayjs().diff(dayjs(birthday), 'year')}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="负责企业" weightss={2} name="companyName">
                        <VtxGasEnterpriseModal label={companyName} id={companyId} />
                    </VtxFormLayout.FormItem>
                    {
                        getUrlParam().carqFlag == 'true' ? '' : (
                            <VtxFormLayout.FormItem
                                label="所属储配站"
                                weights={2}
                                name="storageAndDistributionStationName"
                            >
                                <VtxGasFillingStationModal
                                    label={storageAndDistributionStationName}
                                    id={storageAndDistributionStationId}
                                />
                            </VtxFormLayout.FormItem>
                        )
                    }
                    {
                        getUrlParam().carqFlag == 'true' ? '' : (
                            <VtxFormLayout.FormItem label="负责供应站">
                                <VtxGasSupplyStationModal label={supplyStationName} id={supplyStationId} />
                            </VtxFormLayout.FormItem>
                        )
                    }
                    <VtxFormLayout.FormItem label="联系电话" name="phone">
                        {phone || '--'}
                    </VtxFormLayout.FormItem>
                    {
                        getUrlParam().carqFlag == 'true' ? (
                            <>
                                <VtxFormLayout.FormItem label="通讯地址" name="phone">
                                    {commAddress || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="入职培训时间" name="phone">
                                    {onboardinTrainingDay || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="文化程度" name="phone">
                                    {degreeStr || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="职称" name="phone">
                                    {jobTitle || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="是否为驻村安全员" name="phone">
                                    {isSafer ? '是' : '否'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="负责燃气小区" name="phone">
                                    {gasCommunityNames || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="受表彰或奖励情况" name="phone">
                                    {reward || '--'}
                                </VtxFormLayout.FormItem>
                            </>
                        ) : ''
                    }
                    <VtxFormLayout.FormItem label="岗位（角色）" name="jobStr">
                        {jobStr || '--'}
                    </VtxFormLayout.FormItem>
                    {
                        getUrlParam().carqFlag == 'true' ? (
                            <VtxFormLayout.FormItem label="入职时间" weights={2}>
                                {createTime || '--'}
                            </VtxFormLayout.FormItem>
                        ) : (
                            <VtxFormLayout.FormItem label="建档时间" weights={2}>
                                {createTime || '--'}
                            </VtxFormLayout.FormItem>
                        )
                    }
                    <VtxFormLayout.FormItem label="照片" weights={2}>
                        {photoId ? (
                            <VtxImage
                                src={`/cloudFile/common/downloadFile?id=${photoId}`}
                                style={{ width: '200px', height: '200px' }}
                            />
                        ) : (
                            '--'
                        )}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="备注" weights={2}>
                        {remark || '--'}
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Pane>
                <VtxFormLayout.Divider />
                <VtxFormLayout.Pane title="资质信息">
                    <VtxFormLayout.FormItem label="从业人员培训证编号">
                        {trainingCertificateNumber || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="有效期至">
                        {trainingCertificateValidityPeriod || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="证书" weights={2}>
                        {trainingCertificateFile ? (
                            <VtxUpload
                                fileList={JSON.parse(trainingCertificateFile)}
                                className="vtx-gas-upload"
                                maxNum={1}
                                viewMode={true}
                            />
                        ) : (
                            '--'
                        )}
                    </VtxFormLayout.FormItem>
                    {
                        getUrlParam().carqFlag == 'true' ? (
                            <>
                                <VtxFormLayout.FormItem label="发证机关名称">
                                    {sendCertOrganName || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="发证时间">
                                    {sendCertDay || '--'}
                                </VtxFormLayout.FormItem>
                                <VtxFormLayout.FormItem label="培训时间">
                                    {trainingDay || '--'}
                                </VtxFormLayout.FormItem>
                            </>
                        ) : ''
                    }
                    <VtxFormLayout.FormItem label="合同编号">
                        {contractNumber || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="有效期至">
                        {contractValidityPeriod || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="合同" weights={2}>
                        {contractFile ? (
                            <VtxUpload
                                fileList={JSON.parse(contractFile)}
                                maxNum={1}
                                className="vtx-gas-upload"
                                viewMode={true}
                            />
                        ) : (
                            '--'
                        )}
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Pane>
            </VtxFormLayout>
        </Form>
    );
};

BaseContent.propTypes = {
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
};

export default BaseContent;
