export default OakComponent({
    entity: 'article',
    projection: {
        id: 1,
        name: 1,
        content: 1,
        articleMenu: {
            id: 1,
        },
    },
    isList: false,
    formData: function ({ data: article, features }) {
        return {
            id: article?.id,
            content: article?.content,
            name: article?.name,
            articleMenuId: article?.articleMenuId,
        };
    },
    data: {
        editor: null,
        html: '',
        contentTip: false,
    },
    properties: {
        articleMenuId: '',
        changeIsEdit: () => undefined,
        tocPosition: 'none', //目录显示位置，none为不显示目录
        highlightBgColor: 'none', //点击目录时标题高亮背景色，none为不显示高亮背景色
        onArticlePreview: (content, title) => undefined, //预览文章
        origin: 'qiniu', // 默认为七牛云
        scrollId: '', // 滚动条所在容器id，不传默认页面编辑器容器id
        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);
            }
        },
    },
    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.content &&
                this.state.content.length > 0 &&
                this.state.html !== '<p><br></p>') {
                await this.execute();
                if (this.props.changeIsEdit) {
                    this.props.changeIsEdit();
                }
            }
            else if (this.state.name && this.state.name.length > 0) {
                this.setMessage({
                    content: '请填写文章内容!',
                    type: 'warning',
                });
            }
            else if (this.state.content &&
                this.state.content.length > 0 &&
                this.state.html !== '<p><br></p>') {
                this.setMessage({
                    content: '请填写文章标题!',
                    type: 'warning',
                });
            }
        },
        async reset() {
            // 重置
            this.clean();
        },
        setHtml(html) {
            this.setState({
                html,
            });
            if (html && html !== '<p><br></p>' && this.state.oakFullpath) {
                this.update({ content: html });
            }
        },
        gotoPreview(content, title) {
            const { onArticlePreview } = this.props;
            onArticlePreview && onArticlePreview(content, title);
        },
    },
});