export default OakComponent({
    entity: 'article',
    isList: false,
    projection: {
        id: 1,
        name: 1,
        content: 1,
        articleMenu: {
            id: 1,
        },
    },
    formData: function ({ data: article, features }) {
        return {
            id: article?.id,
            content: article?.content,
            name: article?.name,
            articleMenuId: article?.articleMenuId,
            execuable: this.tryExecute() === true,
        };
    },
    data: {
        editor: null,
        html: '',
        contentTip: false,
    },
    properties: {
        articleMenuId: '',
        changeIsEdit: () => undefined,
        tocPosition: 'none',
        highlightBgColor: 'none',
        onArticlePreview: (content, title) => undefined,
        origin: null,
        scrollId: '',
        height: 600,
        activeColor: undefined,
    },
    listeners: {
        'editor,content'(prev, next) {
            if (next.editor && next.content) {
                next.editor.setHtml(next.content);
            }
        },
        oakId(prev, next) {
            if (prev.oakId !== next.oakId) {
                const { editor } = this.state;
                if (editor == null)
                    return;
                editor.destroy();
                this.setEditor(null);
            }
        },
        name(prev, next) {
            if (prev.name !== next.name) {
                window.document.title = next.name ?? '';
            }
        }
    },
    lifetimes: {
        async ready() {
            const { oakId, articleMenuId } = this.props;
            if (!oakId) {
                if (articleMenuId) {
                    this.update({
                        articleMenuId,
                    });
                    const { editor } = this.state;
                    editor?.setHtml('');
                    // this.update({
                    //     content: '',
                    // });
                }
            }
        },
        detached() {
            const { editor } = this.state;
            if (editor == null)
                return;
            editor.destroy();
            this.setEditor(null);
        },
    },
    methods: {
        async uploadFile(extraFile, file) {
            const result = await this.features.extraFile.autoUpload(extraFile, file);
            return result;
        },
        setEditor(editor) {
            this.setState({
                editor,
            });
        },
        clearContentTip() {
            this.setState({
                contentTip: false,
            });
        },
        async check() {
            if (this.state.name &&
                this.state.name.length > 0 &&
                this.state.html &&
                this.state.html.length > 0 &&
                this.state.html !== '<p><br></p>') {
                const id = this.getId();
                await this.execute(undefined, {
                    type: 'success',
                    content: this.t('success'),
                });
                this.setId(id);
                if (this.props.changeIsEdit) {
                    this.props.changeIsEdit();
                }
            }
            else if (this.state.name && this.state.name.length > 0) {
                this.setMessage({
                    content: this.t('check.no content'),
                    type: 'warning',
                });
            }
            else if (this.state.html &&
                this.state.html.length > 0 &&
                this.state.html !== '<p><br></p>') {
                this.setMessage({
                    content: this.t('check.no name'),
                    type: 'warning',
                });
            }
        },
        async reset() {
            // 重置
            this.clean();
        },
        setHtml(html) {
            this.setState({
                html,
            });
        },
        gotoPreview(content, title) {
            const { onArticlePreview } = this.props;
            onArticlePreview && onArticlePreview(content, title);
        },
    },
});