import React from 'react';
import PropTypes from 'prop-types';
import { Form, Image, Radio } from 'antd';
import { VtxFormLayout, VtxDatagrid, VtxImage, VtxInput } 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';
import { getUrlParam, getVtxToken } from '@vtx/utils';
import { getImgUrl } from '../util';
const BaseContent = ({ id, urlHead, audit, form }) => {
    const [formData, setFormData] = useState({});
    const { mapInfo } = useMapInfo();
    useEffect(() => {
        getInfo(id, urlHead).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}
                                {...getImgUrl(item.id)}
                            />
                        );
                    });
                }
                if (record.type === 'CHECKBOX') {
                    return text?.join('、');
                }
                return text;
            },
        },
    ];
    const { theme } = useSettings();
    const [lng, lat] = formData.checkAddress?.lngLats?.split(',') || [];
    useEffect(() => {
        let wrapScroll = document.querySelector('.ant-modal-body');
        wrapScroll &&
            wrapScroll.addEventListener('scroll', () => {
                window.scrollY = wrapScroll.scrollTop;
            });
    }, []);
    return (
        <Form form={form}>
            <VtxFormLayout cols={3} card>
                <VtxFormLayout.Card title="基本信息">
                    <VtxFormLayout.FormItem label="供气类型" inline>
                        {formData.gasTypeStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户类别" inline>
                        {formData.gasUserTypeStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户编号" inline>
                        {formData.gasUserNo || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="用户名" inline>
                        <VtxGasUserModal
                            label={formData.gasUserName}
                            id={formData.gasUserId}
                            urlHead={urlHead}
                        />
                    </VtxFormLayout.FormItem>
                    {!getUrlParam().carqFlag && (
                        <>
                            <VtxFormLayout.FormItem label="联系方式" inline>
                                {formData.phone || '--'}
                            </VtxFormLayout.FormItem>
                            <VtxFormLayout.FormItem label="燃气小区" inline>
                                {formData.villageName || '--'}
                            </VtxFormLayout.FormItem>
                        </>
                    )}
                    <VtxFormLayout.FormItem label="用户地址" inline>
                        {formData.gasUserAddress || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="行政区划" inline>
                        {formData.gasUserRegionStr || '--'}
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="安检人员" inline>
                        <VtxGasStaffModal
                            label={formData.gasStaffName}
                            id={formData.gasStaffId}
                            urlHead={urlHead}
                        />
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="负责企业" inline>
                        <VtxGasEnterpriseModal
                            label={formData.gasCompanyName}
                            id={formData.gasCompanyId}
                            urlHead={urlHead}
                        />
                    </VtxFormLayout.FormItem>
                    <VtxFormLayout.FormItem label="入户状态" inline>
                        {formData.homeStepStatusStr || '--'}
                    </VtxFormLayout.FormItem>
                    {/* <VtxFormLayout.FormItem label="安检地址">
                        {formData.checkAddressStr || '--'}
                    </VtxFormLayout.FormItem> */}
                    <VtxFormLayout.FormItem label="安检时间" inline>
                        {formData.checkDate || '--'}
                    </VtxFormLayout.FormItem>
                    {!getUrlParam().carqFlag && (
                        <VtxFormLayout.FormItem label="是否范围内打卡" inline>
                            {formData.isRangeStr || '--'}
                        </VtxFormLayout.FormItem>
                    )}
                    {(formData.homeStepStatus === 'PERMISSION' ||
                        formData.homeStepStatus === 'GAS_STOP_USE') && (
                        <VtxFormLayout.FormItem label="结论" inline>
                            {formData.resultStr || '--'}
                        </VtxFormLayout.FormItem>
                    )}
                    <VtxFormLayout.FormItem label="安检图片" weights={3} inline>
                        <div className={style.img}>
                            {formData.photo
                                ? JSON.parse(formData.photo).map((item, i) => (
                                      <Image
                                          width={100}
                                          key={i}
                                          src={getImgUrl(item.id).thumb}
                                          preview={{
                                              src: getImgUrl(item.id).src,
                                          }}
                                      />
                                  ))
                                : '--'}
                        </div>
                    </VtxFormLayout.FormItem>
                    {formData.homeStepStatus === 'PERMISSION' && (
                        <VtxFormLayout.FormItem label="用户签名" weights={3} inline>
                            {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
                                    }&token=${getVtxToken('token')}`}
                                />
                            ) : (
                                '--'
                            )}
                        </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 : ''}
                                setCenter={`${lng}${lat}`}
                            />
                        </div>
                    )}
                </VtxFormLayout.Card>
                {audit && formData.approveStatus === 'WAIT' && !getUrlParam().carqFlag && (
                    <VtxFormLayout.Card title="记录审核">
                        <VtxFormLayout.FormItem
                            label="是否通过审核"
                            name="approveStatus"
                            rules={[{ required: true, message: '必填' }]}
                            weights={3}
                        >
                            <Radio.Group>
                                <Radio value={'PASS'}>是</Radio>
                                <Radio value={'REFUSED'}>否</Radio>
                            </Radio.Group>
                        </VtxFormLayout.FormItem>
                        <VtxFormLayout.FormItem label="审核备注" name="approveRemark" weights={3}>
                            <VtxInput.TextArea maxLength={100} />
                        </VtxFormLayout.FormItem>
                    </VtxFormLayout.Card>
                )}
                {formData.homeStepStatus === 'PERMISSION' && (
                    <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>
                )}

                {formData.approveStatus !== 'WAIT' && !getUrlParam().carqFlag && (
                    <VtxFormLayout.Card title="审核结果">
                        <VtxFormLayout.FormItem label="审核结果" inline>
                            {formData.approveStatusValue || '--'}
                        </VtxFormLayout.FormItem>
                        <VtxFormLayout.FormItem label="审核备注" inline>
                            {formData.approveRemark || '--'}
                        </VtxFormLayout.FormItem>
                        <VtxFormLayout.FormItem label="审核人" inline>
                            {formData.approverName || '--'}
                        </VtxFormLayout.FormItem>
                        <VtxFormLayout.FormItem label="审核时间" inline>
                            {formData.approveTime || '--'}
                        </VtxFormLayout.FormItem>
                    </VtxFormLayout.Card>
                )}
            </VtxFormLayout>
        </Form>
    );
};

BaseContent.propTypes = {
    id: PropTypes.string.isRequired,
    urlHead: PropTypes.string,
    audit: PropTypes.bool,
    form: PropTypes.object,
};

export default BaseContent;