import React, { useEffect, useState } from 'react';
import { Modal, Input, Form, Row, Col } from 'antd';
const basicInfo = [{ name: '元数据名称：', key: 'name' },
{ name: '元数据代码：', key: 'code' },
{ name: '元数据类型：', key: 'type' },
{ name: '上下文路径：', key: 'path' },
{ name: '元数据详情：', key: 'description' }];
const BusinessDatabaseModal = (props) => {
    const { onConfirm, onCancel, editData, metadataModels, resourceCatalogPath, businessType, isAdmin } = props;
    const [form] = Form.useForm();
    useEffect(() => {
    }, []);
    const handleOk = () => {
        form.validateFields().then(values => {
            if (onConfirm) {
                onConfirm(values);
            }
        })
    }
    const validatorNull = (rule, value, getFieldValue, validateFields, label) => {
        if (!value || !value.trim().length) {
            return Promise.reject(new Error(`${label}不可空字符串`));
        }
        return Promise.resolve();
    }
    const renderBasicInfo = (databasesRecord) => {
        let path = '/' + resourceCatalogPath.join('/');
        let mapData = basicInfo;
        if (businessType)
            mapData = basicInfo.filter(bi => bi.key != 'code');
        return <div>
            <Row><Col span={12}>
                <div style={{ color: '#3BB19C', fontSize: 18 }}>基本信息</div>
                <div style={{ lineHeight: '35px', marginLeft: 32 }}>
                    {mapData.map(item => {
                        if (item.key != 'path')
                            return <div>{item.name}<span style={{ color: '#7F7F7F' }} title={databasesRecord[item.key]}>{
                                businessType && item.key === 'type' ? businessType :
                                    databasesRecord[item.key] && databasesRecord[item.key].length > (item.key === 'description' ? 40 : 15) ?
                                        databasesRecord[item.key].substring(0, (item.key === 'description' ? 40 : 15)) + '...' : databasesRecord[item.key]}</span></div>
                        else
                            return <div>{item.name}<span style={{ color: '#7F7F7F' }} title={path} >{path && path.length > 15 ?
                                path.substring(0, 15) + '...' : path}</span></div>
                    })}
                </div>
            </Col>
                <Col span={12}>
                    <div style={{ color: '#3BB19C', fontSize: 18 }}>属性</div>
                    <div style={{ lineHeight: '35px', marginLeft: 32 }}>
                        {metadataModels && metadataModels.filter(mm => mm.modelType === businessType ? businessType : '表').map(mm => {
                            let str = ''
                            if (databasesRecord.attributesParam && databasesRecord.attributesParam[mm.attributeCode]) {
                                str = databasesRecord.attributesParam[mm.attributeCode];
                            }
                            return <div title={mm.attributeName}> {mm.attributeName.length > 6 ? mm.attributeName.substring(0, 6) + '...' :
                                mm.attributeName}：
                                <span style={{ color: '#7F7F7F' }} title={str}>{str && str.length > 15 ? str.substring(0, 15) + '...' : str}</span></div>
                        })
                        }
                    </div>
                </Col>
            </Row>
            <div style={{ color: '#3BB19C', fontSize: 18, margin: '16px 0px' }}>业务信息</div>
        </div>
    }
    return (
        <Modal title={editData.title} open={true} destroyOnClose
            okText='确定' width={800}
            footer={!isAdmin ? null : undefined}
            onOk={() => handleOk(null)}
            onCancel={onCancel}>
            {editData.record && editData.record.businessMetadata.length ?
                renderBasicInfo(editData.record) : null
            }
            <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} initialValues={editData.record && editData.record.businessMetadata.length &&
                editData.record.businessMetadata[0] || {}}>
                {[{ name: '信息资源名称', key: 'resourceName' },
                { name: '信息资源摘要', key: 'resourceAbstract' },
                { name: '信息资源提供方', key: 'resourceProvider' },
                { name: '信息资源分类', key: 'resourceCategory' },
                { name: '信息资源标识符', key: 'resourceId' },
                { name: '元数据标识符', key: 'metadataId' }].map(item =>
                    <Form.Item
                        label={item.name}
                        name={item.key}
                        key={item.key}
                        rules={[{ required: true, message: '' }, { max: 50, message: `${item.name}不超过50个字符` },
                        ({ getFieldValue, validateFields }) => ({
                            validator(_, value) { return validatorNull(_, value, getFieldValue, validateFields, item.name) }
                        })]}>
                        <Input style={{ width: '90%' }} placeholder={`请输入${item.name}`} disabled={!isAdmin} />
                    </Form.Item>
                )}
            </Form>
        </Modal >
    )
}
export default BusinessDatabaseModal;