import { firstLetterUpperCase } from 'oak-domain/lib/utils/string';
import { composeFileUrl } from '../../../../src/utils/extraFile';
import React from '../../../utils/react';

export default OakPage({
    path: 'userRelation:list',
    entity: 'user',
    projection: async ({ props }) => {
        const { entity, entityId, relation } = props;
        const entityStr = firstLetterUpperCase(entity!);
        return {
            id: 1,
            name: 1,
            nickname: 1,
            mobile$user: {
                $entity: 'mobile',
                data: {
                    id: 1,
                    userId: 1,
                    mobile: 1,
                },
            },
            [`user${entityStr}$user`]: {
                $entity: `user${entityStr}`,
                data: {
                    id: 1,
                    userId: 1,
                    [`${entity}Id`]: 1,
                    relation: 1,
                },
            },
            extraFile$entity: {
                $entity: 'extraFile',
                data: {
                    id: 1,
                    tag1: 1,
                    origin: 1,
                    bucket: 1,
                    objectId: 1,
                    filename: 1,
                    extra1: 1,
                    type: 1,
                    entity: 1,
                    extension: 1,
                },
                filter: {
                    tag1: 'avatar',
                },
                indexFrom: 0,
                count: 1,
            },
        };
    },
    filters: [
        // 由调用者注入oakFilter
        {
            filter: async ({ features, props, onLoadOptions }) => {
                const { entityId, entity } = props;
                const entityStr = firstLetterUpperCase(entity!);
                return {
                    id: {
                        $in: {
                            entity: `user${entityStr}`,
                            data: {
                                userId: 1,
                            },
                            filter: {
                                [`${entity}Id`]: entityId,
                            },
                        },
                    },
                };
            },
        },
    ],
    isList: true,
    formData: async function ({ data: users, props, features }) {
        const { entity, entityId } = props;
        const entityStr = firstLetterUpperCase(entity!);
        const filter = await this.getFilterByName('name');
        return {
            users: users?.map((ele: any) => {
                const { mobile$user, extraFile$entity } = ele || {};
                const mobile = mobile$user && mobile$user[0]?.mobile;
                const relations = ele[`user${entityStr}$user`]
                    ?.filter((ele) => ele[`${entity}Id`] === entityId)
                    .map((ele) => ele.relation);
                const avatar =
                    extraFile$entity &&
                    extraFile$entity[0] &&
                    composeFileUrl(extraFile$entity[0]);
                const user2 = Object.assign({}, ele, {
                    mobile,
                    avatar,
                    relations,
                });
                return user2;
            }),
            searchValue:
                filter?.$or &&
                (filter.$or as [{ name: { $includes: string } }])[0]?.name
                    .$includes,
        };
    },
    properties: {
        entity: String,
        entityId: String,
        userIds: Array,
        relations: Array,
    },
    data: {
        show: false,
        searchValue: '',
        deleteIndex: '',
        editableRowKeys: [],
        btnItems: [
            {
                label: '二维码授权',
            },
            {
                label: '添加授权',
            },
        ],
        visible: false,
    },
    lifetimes: {
        created() {
            if (process.env.OAK_PLATFORM === 'web') {
                this.tableRef = React.createRef();
                this.editMap = {};
                this.currentSaveId = '';
            }
        },
    },
    methods: {
        onAdd() {
            if (process.env.OAK_PLATFORM === 'web') {
                this.goUpsert();
            } else {
                this.setState({
                    visible: true,
                });
            }
        },
        goUpsert() {
             const { entity, entityId, relations } = this.props;
             this.navigateTo(
                 {
                     url: '/userRelation/upsert',
                     entity,
                     entityId,
                     relations,
                 },
                 {
                     relations,
                 }
             );
        },
        goUserEntityGrantWithGrant() {
            const { entity, entityId, relations } = this.props;
            this.navigateTo(
                {
                    url: '/userEntityGrant/grant',
                    entity,
                    entityId,
                },
                {
                    relations,
                }
            );
        },
        onActionSelect(e: any) {
            const { index, selected } = e.detail;
            switch (index) {
                case 0: {
                    this.goUserEntityGrantWithGrant();
                }
                case 1: {
                    this.goUpsert();
                }
            }
        },
        onActionCancel() {
            this.setState({
                visible: false,
            });
        },
        onActionClose() {
            this.onActionCancel();
        },
        bindClicked(e: any) {
            const { id } = e.currentTarget.dataset;
            this.goDetail(id);
        },
        goDetail(id) {
            const { relations, entity, entityId } = this.props;
            this.navigateTo({
                url: '/userRelation/detail2',
                oakId: id,
                relations,
                entity,
                entityId,
            });
        },
        async searchChange(event: any) {
            const { value } = this.resolveInput(event);
            this.addNamedFilter({
                filter: {
                    id: {
                        $in: {
                            entity: 'mobile',
                            data: {
                                userId: 1,
                            },
                            filter: {
                                mobile: {
                                    $includes: value,
                                },
                            },
                        },
                    },
                },
                '#name': 'mobile',
            });
        },
        async searchCancel() {
            this.removeNamedFilterByName('mobile');
        },
        async searchConfirm() {
            this.refresh();
        },
        //web table methods
        onEdit(e) {
            const { editableRowKeys } = this.state;

            const { id } = e.currentTarget.dataset;
            if (!editableRowKeys.includes(id)) {
                this.setState({
                    editableRowKeys: editableRowKeys.concat(id),
                });
            }
        },
        updateEditRowKey(id) {
            const { editableRowKeys } = this.state;
            const index = editableRowKeys.findIndex((t) => t === id);
            editableRowKeys.splice(index, 1);
            this.setState({
                editableRowKeys: [...editableRowKeys],
            });
        },
        onSave(e) {
            const { id } = e.currentTarget.dataset;
            this.currentSaveId = id;
            // 触发内部校验，而后在 onRowValidate 中接收异步校验结果
            this.tableRef.current.validateRowData(id);
        },
        onCancel(e) {
            const { id } = e.currentTarget.dataset;
            this.updateEditRowKey(id);
            this.tableRef.current.clearValidateData();
        },
        onRowValidate(params) {
            if (params.result.length) {
                const r = params.result[0];
                this.setMessage({
                    type: 'error',
                    context: `${r.col.title} ${r.errorList[0].message}`,
                });
                return;
            }
            // 如果是 table 的父组件主动触发校验
            if (params.trigger === 'parent' && !params.result.length) {
                const { users } = this.state;
                const { entity, entityId } = this.props;
                const entityStr = firstLetterUpperCase(entity!);

                const current = this.editMap[this.currentSaveId];
                if (current) {
                    Object.keys(current.editedRow).forEach((ele) => {
                        if (ele === 'relations') {
                            const userRelations =
                                users[current.rowIndex].relations;
                            userRelations.forEach((ele2) => {
                                if (!current.editedRow[ele].includes(ele2)) {
                                    this.toggleNode(
                                        {
                                            relation: ele2,
                                            [`${entity}Id`]: entityId,
                                        },
                                        false,
                                        `${current.rowIndex}.user${entityStr}$user`
                                    );
                                }
                            });
                            current.editedRow[ele].forEach((ele2) => {
                                if (!userRelations.includes(ele2)) {
                                    this.toggleNode(
                                        {
                                            relation: ele2,
                                            [`${entity}Id`]: entityId,
                                        },
                                        true,
                                        `${current.rowIndex}.user${entityStr}$user`
                                    );
                                }
                            });
                            this.execute('grant');
                        } else {
                            this.setUpdateData(
                                `${0}.${ele}`,
                                current.editedRow[ele]
                            );
                            this.execute('update');
                        }
                    });
                }
                this.updateEditRowKey(this.currentSaveId);
            }
        },
        onRowEdit(params) {
            const { row, col, value } = params;
            this.editMap[row.id] = {
                ...params,
                editedRow: { [col.colKey]: value },
            };
        },
    },
});