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';
import { getImgUrl } from '../util';
const BaseContent = props => {
    const { id, urlHead } = props;
    const [info, setInfo] = useState({});

    useEffect(() => {
        if (id) {
            getInfo(id, urlHead).then(data => {
                setInfo(data);
            });
        }
    }, [id, urlHead]);
    let photoId = '';
    const {
        companyName,
        storageAndDistributionStationName,
        supplyStationName,
        name,
        phone,
        idCard,
        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}
                            urlHead={urlHead}
                        />
                    </VtxFormLayout.FormItem>
                    {getUrlParam().carqFlag == 'true' ? (
                        ''
                    ) : (
                        <VtxFormLayout.FormItem
                            label="所属储配站"
                            weights={2}
                            name="storageAndDistributionStationName"
                        >
                            <VtxGasFillingStationModal
                                label={storageAndDistributionStationName}
                                id={storageAndDistributionStationId}
                                urlHead={urlHead}
                            />
                        </VtxFormLayout.FormItem>
                    )}
                    {getUrlParam().carqFlag == 'true' ? (
                        ''
                    ) : (
                        <VtxFormLayout.FormItem label="负责供应站">
                            <VtxGasSupplyStationModal
                                label={supplyStationName}
                                id={supplyStationId}
                                urlHead={urlHead}
                            />
                        </VtxFormLayout.FormItem>
                    )}
                    <VtxFormLayout.FormItem label="身份证号" name="idCard">
                        {idCard || '--'}
                    </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
                                {...getImgUrl(photoId)}
                                style={{ width: '200px', height: '200px' }}
                            />
                        ) : (
                            '--'
                        )}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="备注" weights={2}>
                        {remark || '--'}
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Pane>
                <VtxFormLayout.Divider />
                <VtxFormLayout.Pane title="资质信息">
                    {
                        getUrlParam().gas2Flag == 'true' ? '' : (
                            <>
                                <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,
    urlHead: PropTypes.string,
};

export default BaseContent;