import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { getInfo } from './api';
import { Form, Image } from 'antd';
import { VtxFormLayout } from '@vtx/components';
import style from './style/index.less';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import VtxGasSupplyStationModal from '../vtx-gas-supply-station-modal';
import { getUrlParam } from '@vtx/utils';
import { getImgUrl } from '../util';

const BaseContent = ({ id, urlHead }) => {
    const [info, setInfo] = useState({});
    useEffect(() => {
        if (id) {
            getInfo(id, urlHead).then(data => {
                setInfo(data);
            });
        }
    }, [id]);
    return (
        <Form layout="inline">
            <VtxFormLayout mode="view" cols={3} card>
                <VtxFormLayout.Card title="制造信息">
                    <VtxFormLayout.FormItem label="规格（kg）" name="specification">
                        {info.specification ? info.specification.value : '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="充装介质" name="fillingMedium">
                        {info.fillingMedium ? info.fillingMedium.value : '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="制造单位" name="manufacturingCompany">
                        {info.manufacturingCompany || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="制造年月" name="manufacturingDate">
                        {info.manufacturingDate || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="出厂编号" name="productNo">
                        {info.productNo || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="公称压力（MPa）" name="nominalPressure">
                        {info.nominalPressure || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="容积（L）" name="volume">
                        {info.volume ? info.volume.value : '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="壁厚（mm）" name="wallThickness">
                        {info.wallThickness || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="皮重（kg）" name="outWeight">
                        {info.outWeight || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="种类" name="bottleType">
                        {info.bottleType ? info.bottleType.value : '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="气瓶类型" name="bottleStyle">
                        {info.bottleStyle ? info.bottleStyle.value : '--'}
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Card>
                <VtxFormLayout.Card title="检验信息">
                    <VtxFormLayout.FormItem label="末检年月" name="checkDate">
                        {info.checkDate || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="下检年月" name="nextCheckDate">
                        {info.nextCheckDate || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="报废年月" name="scrapDate">
                        {info.scrapDate || '--'}
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Card>
                <VtxFormLayout.Card title="使用登记信息">
                    <VtxFormLayout.FormItem label="监管部门" name="supervisionOrg">
                        {info.supervisionOrg || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="燃气企业" name="gasCompanyName">
                        <VtxGasEnterpriseModal
                            id={info.gasCompanyId}
                            label={info.gasCompanyName}
                            urlHead={urlHead}
                        />
                    </VtxFormLayout.FormItem>
                    {getUrlParam().carqFlag == 'true' ? (
                        ''
                    ) : (
                        <VtxFormLayout.FormItem label="储配站" name="stationName">
                            <VtxGasSupplyStationModal
                                id={info.stationId}
                                label={info.stationName}
                                urlHead={urlHead}
                            />
                        </VtxFormLayout.FormItem>
                    )}
                    <VtxFormLayout.FormItem label="气瓶条码号" name="bottleNo">
                        {info.bottleNo || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="自有编号" name="selfNo">
                        {info.selfNo || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="使用登记代码" name="registerNo">
                        {info.registerNo || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="登记时间" name="registerTime">
                        {info.registerTime || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="备注说明" name="remark">
                        {info.remark || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="过期报废状态" name="bottleStatus">
                        {info.bottleStatus ? info.bottleStatus.value : '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="使用状态" name="bottleUseStatus">
                        {info.bottleUseStatus ? info.bottleUseStatus.value : '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="创建时间" name="createDate">
                        {info.createDate || '--'}
                    </VtxFormLayout.FormItem>
                    {/* <VtxFormLayout.FormItem label="创建人员" name="createPerson">
                                    {info.createPerson}
                                </VtxFormLayout.FormItem> */}
                    <VtxFormLayout.FormItem label="更新日期" name="updateDate">
                        {info.updateDate || '--'}
                    </VtxFormLayout.FormItem>
                    {/* <VtxFormLayout.FormItem label="更新人员" name="updatePerson">
                                    {info.updatePerson}
                                </VtxFormLayout.FormItem> */}
                </VtxFormLayout.Card>
                <VtxFormLayout.Card title="建档图片">
                    <VtxFormLayout.FormItem label="气瓶图片" name="bottlePictureFileId" weights={3}>
                        <div className={style.img}>
                            {info.bottlePictureFileId
                                ? JSON.parse(info.bottlePictureFileId).map((item, i) => (
                                      <Image
                                          width={100}
                                          key={i}
                                          src={getImgUrl(item.id).thumb}
                                          preview={{
                                              src: getImgUrl(item.id).src,
                                          }}
                                      />
                                  ))
                                : '--'}
                        </div>
                    </VtxFormLayout.FormItem>
                </VtxFormLayout.Card>
            </VtxFormLayout>
        </Form>
    );
};

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

export default BaseContent;