import * as React from "react";
import { TextField } from "office-ui-fabric-react/lib/components/TextField";
import { Label } from 'office-ui-fabric-react/lib/components/Label';
import { Checkbox } from 'office-ui-fabric-react/lib/components/Checkbox';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { Record, RecordField, Command, ListRecordsCriteria } from "../Models";
import { FileService, RecordService, WorkflowService } from "../Services";
import { FieldTypes } from "../Enums"
import { ChoiceGroup } from "office-ui-fabric-react/lib/components/ChoiceGroup/ChoiceGroup";
import './FormView.css'
import { Link, Callout, IconButton, createRef } from "office-ui-fabric-react";
import { RecordsListView, CommandsBar } from ".";
// import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css';

import MultipleFileUpload from "./MultipleFileUpload";
import { DateUtils } from "src/Utils";
import { ExecuteActionButton } from "src/Customizations/Controls/ExecuteActionButton";
import { FormattedMessage } from "react-intl";
import { LoadingService } from "src/Services/LoadingService";
import { RecordSignature } from "src/Models/RecordSignature";

// let moment = require("moment");

export class FormView extends React.Component<any, any> {
    [x: string]: any;

    private _fileService: FileService = new FileService();
    private _recordService: RecordService = new RecordService();
    private _workflowService: WorkflowService = new WorkflowService();
    private _loadingService: LoadingService = new LoadingService();
    private _menuButtonElement = createRef<HTMLElement>();
    private _dateUtils: DateUtils = new DateUtils();

    constructor(props: any) {
        super(props);

        this.state = {
            isCalloutVisible: false,
            commands: new Array<Command>(),
            record: {},
            totalPages: 0,
            workflowActions: []
        };

        this.loadWorkflowActions();
    }

    private _setColWidth(id: any): string {
        if (this.props.setColWidth)
            return this.props.setColWidth(id);
        else
            return "ms-Grid-col ms-sm12 ms-lg12";
    }

    private onExecuteWorkflowAction() {
        this.loadWorkflowActions();
        this.props.loadRecord();
    }

    private loadWorkflowActions() {
        this._loadingService.show();
        this._workflowService.getWorkflowActions(this.props.Record.entityId, 0, this.props.Record.id).then(
            (result: any) => {

                console.log(result);
                this._loadingService.hide();
                // this.state.reasonLookups = result;
                this.setState({ workflowActions: result });
            },
            (error: any) => {
                // alert(error.text());
                // this.toastr.error('', error.text());
                //this.displayAlertModal(error.text());
                alert(error);
                this._loadingService.hide();
            }
        );
    }

    public render() {

        return (

            <div>
                {
                    this.props.Record.state ?
                        <h4>{this.props.Record.state.name}</h4> : ""
                }
                <div className="">



                    <div className="formPreview">
                        <div className="fix-clear"></div>
                        {
                            !this.props.Record.fields ? "" :
                                this.props.Record.fields.sort((a: RecordField, b: RecordField) => {
                                    if (a.index < b.index) {
                                        return -1;
                                    }
                                    if (a.index > b.index) {
                                        return 1;
                                    }
                                    return 0;
                                }).map((item: RecordField) => {
                                    // if (item.id == 181 || item.id == 182)
                                    //     return "";
                                    if (item.hidden == true)
                                        return "";
                                    switch (item.type) {
                                        case FieldTypes.Text:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.data}
                                                </div>

                                            </div>;
                                        case FieldTypes.Header:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <h3 className="ms-Grid-col ms-lg12">{item.displayName}</h3>

                                            </div>
                                        case FieldTypes.Paragraph:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <p className="ms-Grid-col ms-lg12">{item.displayName}</p>

                                            </div>
                                        case FieldTypes.SingleChoice:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <Dropdown className="ms-Grid-col ms-lg12"
                                                    defaultSelectedKey={item.data}
                                                    options={item.lookups.map((lookup: any) => {
                                                        return { key: lookup.id, text: lookup.value }
                                                    })}
                                                    label={item.displayName}
                                                    onChanged={this._handleChoiceChange.bind(this, item)} /> */}
                                                {/* <TreeComboBox></TreeComboBox> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.extraData ? item.extraData.value : ""}
                                                </div>

                                            </div>;
                                        case FieldTypes.MultipleChoice:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {
                                                    item.lookups.map((lookup: any) => {
                                                        return <Checkbox className="ms-Grid-col ms-lg12" defaultChecked={this.isChecked(item, lookup.id)} key={lookup.id} label={lookup.value} onChange={this._handleCheckboxChange.bind(this, item, lookup.id)} />
                                                    })
                                                }
                                            </div>
                                        case FieldTypes.Multiline:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} multiline rows={4} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.data}
                                                </div>
                                            </div>
                                        case FieldTypes.Image:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <div className="ms-Grid-col ms-lg12"> <Label>{item.displayName}</Label>
                                                    <Image
                                                        src={this.getFileFullPath(item.extraData)}
                                                        alt={item.displayName}
                                                        width={100}
                                                        onClick={this.downloadFile(item)}
                                                    />
                                                </div>
                                                <input type="file" id={'uploadFile' + item.id} onChange={(event) => { this.uploadFile(event, item) }} ></input>
                                            </div>

                                        case FieldTypes.Label:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <Label className="ms-Grid-col ms-lg11">{item.displayName}</Label>
                                            </div>
                                        case FieldTypes.Date:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <Label>{item.displayName}</Label> */}
                                                {/* <DatePicker
                                                    className="ms-Grid-col ms-lg12"
                                                    value={this.convertDate(item.data)}
                                                    isRequired={false}
                                                    placeholder="Select a date..."
                                                    allowTextInput={true}
                                                    onSelectDate={this._handleDataChange.bind(this, item)}
                                                /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {/* {(new Date(item.data).toString()) } */}
                                                    {this._dateUtils.formatDateTime(item.data)}

                                                </div>
                                            </div>
                                        case FieldTypes.DateTime:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <Label>{item.displayName}</Label> */}
                                                {/* <DatePicker
                                                className="ms-Grid-col ms-lg12"
                                                value={this.convertDate(item.data)}
                                                isRequired={false}
                                                placeholder="Select a date..."
                                                allowTextInput={true}
                                                onSelectDate={this._handleDataChange.bind(this, item)}
                                            /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {/* {(new Date(item.data).toString()) } */}
                                                    {this._dateUtils.formatDateTime(item.data)}

                                                </div>
                                            </div>
                                        case FieldTypes.Currency:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <TextField iconProps={{ iconName: 'Money' }} className="ms-Grid-col ms-lg12"
                                                    label={item.displayName} value={item.data ? item.data : ""}
                                                    onChanged={this._handleDataChange.bind(this, item)} />


                                            </div>;
                                        case FieldTypes.Percentage:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.data}
                                                </div>

                                            </div>;
                                        case FieldTypes.Number:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <TextField iconProps={{ iconName: 'NumberField' }} className="ms-Grid-col ms-lg12"
                                                    label={item.displayName} value={item.data ? item.data : ""}
                                                    onChanged={this._handleDataChange.bind(this, item)} />


                                            </div>;
                                        case FieldTypes.Boolean:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <div className="choiceGroup ms-Grid-col ms-lg11">
                                                    <ChoiceGroup
                                                        options={[
                                                            {
                                                                key: 'true',
                                                                text: 'Yes',
                                                                disabled: false

                                                            },
                                                            {
                                                                key: 'false',
                                                                text: 'No',
                                                                disabled: false

                                                            },

                                                        ]}
                                                        onChange={this._handleBooleanChange.bind(this, item)}
                                                        label={item.displayName}
                                                        defaultSelectedKey={item.data ? item.data.toString() : 'false'}
                                                    />
                                                </div>
                                            </div>;
                                        case FieldTypes.Document:
                                            return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg7" key={`form-field-${item.id}`}>
                                                <Label>{item.displayName}</Label>
                                                <Link className="choiceGroup ms-Grid-col ms-lg11" value={item.data} onClick={this.downloadFile(item)}>{item.extraData ? item.extraData.name : ""}</Link>
                                                <input type="file" id={'uploadFile' + item.id} onChange={(event) => { this.uploadFile(event, item) }} ></input>

                                            </div>;
                                        case FieldTypes.Callout:
                                            return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg5" key={`form-field-${item.id}`}>
                                                <div className="choiceGroup ms-Grid-col ms-lg10">
                                                    <div className="buttonArea" ref={this._menuButtonElement}>
                                                        <IconButton
                                                            iconProps={{ iconName: 'Chat' }}
                                                            onClick={this._onShowMenuClicked}

                                                        />
                                                    </div>
                                                    <Callout
                                                        className="ms-CalloutExample-callout callout"
                                                        ariaLabelledBy={'callout-label-1'}
                                                        ariaDescribedBy={'callout-description-1'}
                                                        role={'alertdialog'}
                                                        gapSpace={0}
                                                        target={this._menuButtonElement.value}
                                                        onDismiss={this._onCalloutDismiss}
                                                        setInitialFocus={true}
                                                        hidden={!this.state.isCalloutVisible}
                                                    >

                                                        <div className="ms-CalloutExample-inner calloutContent">
                                                            <div className="ms-CalloutExample-content">
                                                                <p className="ms-CalloutExample-subText" id={'callout-description-1'}>
                                                                    {item.displayName}
                                                                </p>
                                                            </div>

                                                        </div>
                                                    </Callout>
                                                </div>
                                            </div>;
                                        case FieldTypes.EntityReference:
                                            let label = "";
                                            if (item.records && item.records.records) {
                                                item.records.records.forEach((record: any) => {
                                                    if (record.id == item.data) {
                                                        label = record.name;
                                                    }
                                                })
                                            }
                                            return item.records ? <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">{label}</div>
                                            </div> : ""
                                        case FieldTypes.ReferencedEntity:
                                        case FieldTypes.ManyToManyRelated:
                                            return item.records ? <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12" key={`form-field-${item.type}${item.id}`}>
                                                <Label>{item.displayName}</Label>
                                                <div><CommandsBar Commands={this.state.commands} /></div>
                                                <div className="choiceGroup ms-Grid-col ms-lg11">
                                                    <RecordsListView Records={item.records.records} SelectedRecordChanged={this.selectedRecordChanged.bind(this, item.records.enableSelection, item.records.enableCreation)}></RecordsListView>
                                                </div>
                                            </div> : ""
                                        case FieldTypes.Html:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <Label>{item.displayName}</Label> */}
                                                {/* <ReactQuill value={item.data?item.data:""} onChange={this._handleDataChange.bind(this,item)} /> */}
                                                <Label>{item.displayName}</Label>
                                                {/* <DefaultButton secondaryText="Opens the Sample Panel" onClick={this._showPdf.bind(this, item.data)} text="ExportoTPdf" 
                                                onRenderText={this._onRenderButtonText} className="
                                                pdf-btn-m"/>
                                                <DefaultButton secondaryText="Opens the Sample Panel" onClick={this._downloadPdf.bind(this, item)} text="DownloadPdf" 
                                                onRenderText={this._onRenderButtonText} className="
                                                pdf-btn-m"/> */}

                                                <div className="form-field-view" dangerouslySetInnerHTML={{ __html: item.data }} />


                                            </div>;
                                        case FieldTypes.MultipleDocuments:
                                            return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg12 multiple-documents-readonly" key={`form-field-${item.id}`}>
                                                <Label>{item.displayName}</Label>
                                                <MultipleFileUpload initialFiles={item.extraData} readonly ></MultipleFileUpload>
                                                {/* <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.extraData ? (
                                                       item.extraData.map((file: any) => {
                                                        return <p><Link target="_blank" href={this._getFullPathForView(file)}>{file.name}</Link> </p>
                                                        })
                                                    ) : (
                                                        <p>No attachments</p>
                                                    )}
                                                
                                                </div> */}
                                            </div>;
                                        case FieldTypes.MultipleUsers:
                                            let userNames = "";
                                            if (item.extraData != null)
                                                item.extraData.forEach((user: any) => {
                                                    userNames = userNames + (userNames != "" ? " , " : "") + user.name;
                                                })
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} multiline rows={4} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {userNames}
                                                </div>
                                            </div>;
                                        case FieldTypes.OrganizationUnit:
                                            return <div className={this._setColWidth(item.id)} key={`form-field-${item.id}`}>
                                                {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} multiline rows={4} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.extraData != null ? item.extraData.name : ""}
                                                </div>
                                            </div>;
                                        case FieldTypes.ReadOnly:
                                            return <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg12" key={`form-field-${item.id}`}>
                                                {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                                <Label>{item.displayName}</Label>
                                                <div className="form-field-view">
                                                    {item.data}
                                                </div>

                                            </div>;

                                    }
                                    return ""
                                })
                        }
                        {this.props.renderExtraControls && this.props.renderExtraControls()}
                        {
                            this.props.Record && this.props.Record.signatures && this.props.Record.signatures.length > 0 &&
                            <div className="ms-Grid-col ms-sm6 ms-md6 ms-lg12">
                                {/* <TextField className="ms-Grid-col ms-lg12" label={item.displayName} value={item.data ? item.data : ""} onChanged={this._handleDataChange.bind(this, item)} /> */}
                                <Label><FormattedMessage id="RecordSignatures" /></Label>
                                <div className="form-field-view">
                                    {this.props.Record.signatures.map((signature: RecordSignature) => {
                                        return <p><FormattedMessage id='Signed by'></FormattedMessage> {signature.signatureCreatedByName} <FormattedMessage id='on'></FormattedMessage> {this._dateUtils.formatDateTime(signature.signatureCreateDate)}</p>
                                    })}
                                </div>

                            </div>
                        }
                    </div>

                    {
                        this.state.workflowActions && this.state.workflowActions.length > 0 &&
                        <div className="sticky-footer-btns">
                            {this.state.workflowActions.map((workflowAction: any) => {

                                return (<ExecuteActionButton buttonType='primary' style={{ marginBottom: '10px', marginRight: '10px' }}
                                    onExecute={this.onExecuteWorkflowAction.bind(this)}
                                    workflowAction={workflowAction} entityId={this.props.Record.entityId}
                                    Record={this.props.Record}
                                    recordId={this.props.Record.id}>
                                    <FormattedMessage id={workflowAction.displayName || "command"} />
                                </ExecuteActionButton>);
                            })
                            }
                        </div>
                    }

                    {/* {
                        this.props.Record.entityId == 14 && <div style={{ clear: 'both' }}>
                            <PrimaryButton
                                onClick={this.showTransferPanel.bind(this)}
                                style={{ margin: '5px' }}>
                                <FormattedMessage id="Forward" />
                            </PrimaryButton>


                            <PrimaryButton
                                onClick={this.showApprovePanel.bind(this)}
                                style={{ margin: '5px' }}>
                                <FormattedMessage id="Approve" />
                            </PrimaryButton>


                            <PrimaryButton
                                onClick={this.showRejectPanel.bind(this)}
                                style={{ margin: '5px' }}>
                                <FormattedMessage id="Reject" />
                            </PrimaryButton>
                        </div>
                    } */}
                </div>

            </div>
        )
    }

    private getCommonCommands(entityId: number, enableSelection: boolean, enableCreation: boolean): Command[] {
        let commands = new Array<Command>();
        if (enableCreation) {
            commands.push(
                {
                    key: "addRecord",
                    name: "Create Record",
                    icon: "Add",
                    onClick: this.addRecord.bind(this, entityId)
                });
        }
        if (enableSelection) {
            commands.push(
                {
                    key: "selectRecord",
                    name: "Select Record",
                    icon: "Add",
                    onClick: this.selectRecord.bind(this, entityId)
                });
        }
        return commands;
    }
    private getRecordCommands(record: Record, enableSelection: boolean, enableCreation: boolean): Command[] {
        let commands = this.getCommonCommands(record.entityId, enableSelection, enableCreation);
        if (enableCreation) {
            commands.push(
                {
                    key: "removeRecord",
                    name: "Remove",
                    icon: "Remove",
                    onClick: this.deleteRecord.bind(this, record)
                },
                {
                    key: "edit",
                    name: "Edit",
                    icon: "Edit",
                    onClick: this.editRecord.bind(this, record)
                });
        }
        if (enableSelection) {
            commands.push(
                {
                    key: "unselectRecord",
                    name: "Unselect",
                    icon: "Unselect",
                    onClick: this.unselectRecord.bind(this, record)
                });
        }
        return commands;
    }


    private unselectRecord(record: Record) {
        if (record) {
            this.getRecord(record.entityId, 0, false);
        }
    }
    private selectRecord(entityId: number) {
        this.getRecord(entityId, 0, false);
    }

    private addRecord(entityId: number) {
        this.getRecord(entityId, 0, false);
    }

    private editRecord(record: Record) {
        if (record) {
            this.getRecord(record.entityId, record.id, false);
        }
    }

    private deleteRecord(record: Record) {
        if (record) {
            this._recordService.deleteRecord(record.entityId, record.id)
                .then(() => {
                    //this.loadRecords();
                }, (error: any) => {
                    alert(error);
                });
        }
    }

    private selectedRecordChanged(enableSelection: boolean, enableCreation: boolean, entity: any) {

        if (!entity)
            return;

        this.setState({ selectedItem: entity, commands: this.getRecordCommands(entity, enableSelection, enableCreation) });
    }

    private getRecord(entityId: number, recordId: number, isViewMode: boolean) {
        if (recordId == 0) {
            this._recordService.getEmptyRecord(entityId)
                .then(result => {
                    if (isViewMode)
                        this.setState({ selectedItem: result, showViewPanel: true });
                    else
                        this.setState({ selectedItem: result, showPanel: true });

                    result.fields.forEach(f => {
                        if (f.type === FieldTypes.EntityReference && f.extraData !== null) {
                            let criteria = new ListRecordsCriteria();
                            criteria.entityId = f.extraData as number;
                            criteria.asLookup = true;

                            this._recordService.listRecords(criteria).then(result => {
                                f.records = result;
                                this.setState({ record: this.state.record });
                            });
                        }
                    });
                    this.setState({ record: result });
                }, error => {
                    alert(error);
                });
        }
        else {
            this._recordService.getRecord(entityId, recordId)
                .then(result => {
                    if (isViewMode)
                        this.setState({ selectedItem: result, showViewPanel: true });
                    else
                        this.setState({ selectedItem: result, showPanel: true });

                    result.fields.forEach(f => {
                        if (f.type === FieldTypes.EntityReference && f.extraData !== null) {
                            let criteria = new ListRecordsCriteria();
                            criteria.entityId = f.extraData as number;
                            criteria.asLookup = true;
                            this._recordService.listRecords(criteria).then(result => {
                                f.records = result;
                                this.setState({ record: this.state.record });
                            });
                        }
                        else if (f.type === FieldTypes.ReferencedEntity || f.type === FieldTypes.ManyToManyRelated) {
                            let criteria = f.extraData as ListRecordsCriteria;
                            this._recordService.listRecords(criteria).then(result => {
                                f.records = result;
                                this.setState({ record: this.state.record });
                            });
                        }
                    });
                    this.setState({ record: result });
                }, error => {
                    alert(error);
                });
        }
    }

    private _onShowMenuClicked = (): void => {
        this.setState({
            isCalloutVisible: !this.state.isCalloutVisible
        });
    };

    private _onCalloutDismiss = (): void => {
        this.setState({
            isCalloutVisible: false
        });
    };
    _handleDataChange(item: RecordField, value: any) {
        item.data = value;
    };
    _handleBooleanChange(item: RecordField, ev: React.FormEvent<HTMLElement>, selected: any) {

        item.data = selected.key;
    }

    _handleFilesChange(item: RecordField, ids: Array<number>) {

        item.data = ids;
    }
    //     _handleDatePickerChange(item:RecordField,value: Date) {
    //         debugger;
    //         let date = new Date(value.toLocaleDateString());
    // item.data = new Date(date.getFullYear(),date.getMonth(),date.getDate());
    //     };
    _handleChoiceChange(item: RecordField, value: any) {
        item.data = value.key;
    };
    _handleCheckboxChange(item: RecordField, lookupId: number, ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
        if (!item.data) {
            item.data = [];
        }

        if (isChecked && !item.data.includes(lookupId)) {
            item.data.push(lookupId);
        }
        else if (!isChecked) {
            item.data.splice(item.data.indexOf(lookupId), 1);
        }
    }
    private isChecked(item: RecordField, lookupId: number) {
        if (!item.data)
            return false;
        return item.data.includes(lookupId);
    }

    private getFileFullPath(file: any) {
        return this._fileService.getFullPath(file);
    }

    _getFullPathForView(file: any) {
        return this._fileService.getFullPath(file)
    }
    private uploadFile(event: any, field: RecordField) {
        if (event.target.files && event.target.files.length > 0) {
            const formData = new FormData();

            for (let file of event.target.files)
                formData.append(file.name, file)

            this._fileService.uploadFileContent(formData).then((result) => {
                field.extraData = result;
                field.data = field.extraData.id;
            });
        }
    }

    private downloadFile(field: RecordField) {
        return (): void => {
            if (field.extraData) {
                window.open(this._fileService.getFullPath(field.extraData));
            }
        }
    }
}
