import React from 'react';
import PropTypes from 'prop-types';
import { Form, Image } from 'antd';
import { VtxFormLayout, VtxDatagrid, VtxImage } from '@vtx/components';
import { useState } from 'react';
import { VtxMap } from '@vtx/map';
import useMapInfo from '../vm-hooks/useMapInfo';
import { useEffect } from 'react';
import { getInfo } from './api';
import VtxGasUserModal from '../vtx-gas-user-modal';
import VtxGasStaffModal from '../vtx-gas-staff-modal';
import VtxGasEnterpriseModal from '../vtx-gas-enterprise-modal';
import useSettings from '../vm-hooks/useSettings';
import style from './style/index.less';
const BaseContent = ({ id }) => {
    const [formData, setFormData] = useState({});
    const { mapInfo } = useMapInfo();
    useEffect(() => {
        getInfo(id).then(data => setFormData(data));
    }, [id]);
    const checkColumns = [
        {
            title: '项目名称',
            dataIndex: 'projectName',
            width: 200,
            render: (text, record) => {
                return {
                    props: {
                        rowSpan: record.rowSpan,
                    },
                    children: text,
                };
            },
        },
        {
            title: '安检内容',
            dataIndex: 'subName',
            width: 200,
        },
        {
            title: '安检情况',
            dataIndex: 'value',
            render: (text, record) => {
                if (record.type === 'IMAGE') {
                    return text?.map(item => {
                        return (
                            <VtxImage
                                key={item.id}
                                alt={item.name}
                                width={200}
                                // thumb={`/vortex/rest/cloud/np/file/downloadFileThumbnail?outputQuality=0.5&scale=0.2&id=${item.id}`}
                                src={`/cloudFile/common/downloadFile?id=${item.id}`}
                            />
                        );
                    });
                }
                if (record.type === 'CHECKBOX') {
                    return text?.join('、');
                }
                return text;
            },
        },
    ];
    const { theme } = useSettings();
    const [lng, lat] = formData.checkAddress?.lngLats?.split(',') || [];
    return (
        <Form layout="inline">
            <VtxFormLayout mode="view" cols={3} card>
                <VtxFormLayout.Card title="基本信息">
                    <VtxFormLayout.FormItem label="供气类型">
                        {formData.gasTypeStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户类别">
                        {formData.gasUserTypeStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户编号">
                        {formData.gasUserNo || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户名">
                        <VtxGasUserModal label={formData.gasUserName} id={formData.gasUserId} />
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户地址">
                        {formData.gasUserAddress || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="行政区划">
                        {formData.gasUserRegionStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="安检人员">
                        <VtxGasStaffModal label={formData.gasStaffName} id={formData.gasStaffId} />
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="负责企业">
                        <VtxGasEnterpriseModal
                            label={formData.gasCompanyName}
                            id={formData.gasCompanyId}
                        />
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="入户状态">
                        {formData.homeStepStatusStr || '--'}
                    </VtxFormLayout.FormItem>
                    {/* <VtxFormLayout.FormItem label="安检地址">
                        {formData.checkAddressStr || '--'}
                    </VtxFormLayout.FormItem> */}
                    <VtxFormLayout.FormItem label="安检时间">
                        {formData.checkDate || '--'}
                    </VtxFormLayout.FormItem>
                    {
                        (formData.homeStepStatus === 'PERMISSION' || formData.homeStepStatus === 'GAS_STOP_USE') && (
                            <VtxFormLayout.FormItem label="结论">
                                {formData.resultStr || '--'}
                            </VtxFormLayout.FormItem>
                        )
                    }
                    <VtxFormLayout.FormItem label="安检图片" weights={3}>
                        <div className={style.img}>
                            {formData.photo
                                ? JSON.parse(formData.photo).map((item, i) => (
                                    <Image
                                        width={100}
                                        key={i}
                                        src={`/cloudFile/common/downloadFile?id=${item.id}`}
                                    />
                                ))
                                : '--'}
                        </div>
                    </VtxFormLayout.FormItem>
                    {
                        formData.homeStepStatus === 'PERMISSION' && (
                            <VtxFormLayout.FormItem label="用户签名" weights={3}>
                                {formData.userSignFile ? (
                                    <VtxImage
                                        alt="签名"
                                        width={200}
                                        // thumb={`/vortex/rest/cloud/np/file/downloadFileThumbnail?outputQuality=0.5&scale=0.2&id=${formData.userSignFile}`}
                                        src={`/cloudFile/common/downloadFile?id=${formData.userSignFile}`}
                                    />
                                ) : (
                                    '--'
                                )}
                            </VtxFormLayout.FormItem>
                        )
                    }
                    {lng && lat && (
                        <div style={{ width: '100%', height: 200 }}>
                            <VtxMap
                                mapId="securityCheck"
                                mapType={mapInfo.mapType}
                                mapCenter={[lng, lat]}
                                mapZoomLevel={15}
                                mapPoints={[{ id: '1', longitude: lng, latitude: lat }]}
                                mapStyle={theme === 'dark' ? theme : ''}
                            />
                        </div>
                    )}
                </VtxFormLayout.Card>
            </VtxFormLayout>
            {
                formData.homeStepStatus === 'PERMISSION' && (
                    <VtxFormLayout card>
                        <VtxFormLayout.Card title="安检项目信息">
                            {formData.configList?.length ? (
                                <VtxDatagrid
                                    toolbar={false}
                                    indexColumn={false}
                                    autoFit={false}
                                    columns={checkColumns}
                                    dataSource={formData.configList}
                                    pagination={false}
                                    style={{ width: '100%' }}
                                />
                            ) : (
                                <div
                                    style={{
                                        padding: '8px 0',
                                        width: '100%',
                                        textAlign: 'center',
                                        color: '#999',
                                    }}
                                >
                                    暂无数据
                                </div>
                            )}
                        </VtxFormLayout.Card>
                    </VtxFormLayout>
                )
            }
        </Form>
    );
};

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

export default BaseContent;
