import dayjs from "dayjs";
import copy from 'copy-to-clipboard';
export default OakComponent({
    entity: 'articleMenu',
    isList: true,
    projection: {
        id: 1,
        name: 1,
        entity: 1,
        entityId: 1,
        parentId: 1,
        isArticle: 1,
        articleMenu$parent: {
            $entity: 'articleMenu',
            data: {
                id: 1,
            },
        },
        article$articleMenu: {
            $entity: 'article',
            data: {
                id: 1,
            },
        },
        extraFile$entity: {
            $entity: 'extraFile',
            data: {
                id: 1,
                tag1: 1,
                origin: 1,
                bucket: 1,
                objectId: 1,
                filename: 1,
                extra1: 1,
                extension: 1,
                type: 1,
                entity: 1,
            },
            filter: {
                tag1: {
                    $in: ['logo'],
                },
            },
        },
        $$updateAt$$: 1,
        latestAt: 1,
    },
    sorters: [
        {
            sorter: {
                $attr: {
                    $$createAt$$: 1,
                },
                $direction: 'asc',
            },
        },
    ],
    filters: [
        {
            filter() {
                const { entity, entityId, parentId, } = this.props;
                if (parentId) {
                    return {
                        entity,
                        entityId,
                        parentId,
                    };
                }
                return {
                    entity,
                    entityId,
                    parentId: {
                        $exists: false,
                    },
                };
            }
        }
    ],
    formData({ data }) {
        const { changeAddArticle } = this.props;
        changeAddArticle && changeAddArticle(!(data && data.length > 0));
        return {
            articleMenus: data.map((ele) => {
                return {
                    ...ele,
                    latestAtStr: ele.latestAt ? dayjs(ele.latestAt).format('YYYY-MM-DD HH:mm:ss') : (ele.$$updateAt$$ ? dayjs(ele.$$updateAt$$).format('YYYY-MM-DD HH:mm:ss') : '--'),
                };
            }),
            execuable: this.tryExecute() === true,
        };
    },
    properties: {
        entity: '',
        entityId: '',
        parentId: '',
        origin: null,
        onMenuClick: (menuId, menuName, isArticle) => undefined,
        onArticleClick: (atricleId) => undefined,
        empty: undefined,
        changeAddArticle: (show) => undefined,
        generateUrl: ((mode, type, id) => { }),
    },
    listeners: {
        'entity,entityId,parentId'(prev, next) {
            if (prev.entity !== next.entity || prev.entityId !== next.entityId || prev.parentId !== next.parentId) {
                this.refresh();
            }
        },
    },
    methods: {
        goDetail(menuId) {
            const { generateUrl } = this.props;
            const url = generateUrl ? generateUrl('menu', 'detail', menuId) : '';
            window.open(url, '_blank');
        },
        onCopy(menuId) {
            const { generateUrl } = this.props;
            const url = generateUrl ? generateUrl('menu', 'copy', menuId) : '';
            copy(url);
            this.setMessage({
                type: 'success',
                content: this.t('success.copy'),
            });
        }
    }
});