/**
 * 通用操作规范组件
 * 1. uiType: 整合 按钮、下来按钮、按钮组、链接
 * 2. 支持打开: route(路由)、href(浏览器标签)、业务组件(模态框模式) 、asyncHandler(异步操作) handler(同步操作)
 * 3. 支持禁用 disabled
 * 4. helpText帮助提示
 * 5. shouldConfirmTxt: 需要确认提示
 * 6. resourceKey: 资源Id,用于权限控制
 * 7. 控制点击频率
 * 目标:
 *   简化开发者这部分业务的处理逻辑
 * @author xiufu.wang
 */
import ElButton from 'mars-pro/packages/button';
import ElButtonGroup from 'mars-pro/packages/button-group';
import ElDropdown from 'mars-pro/packages/dropdown';
import ElDropdownMenu from 'mars-pro/packages/dropdown-menu';
import ElPopover from 'mars-pro/packages/popover';
import baseMixin from './mixins/base';
import Message from 'mars-pro/packages/message'
import { objectProperty } from 'mars-pro/src/pro/util';

import deepmerge from 'deepmerge';

// this.$attrs.xpopover === true
//pro-action默认样式
const DEFAULT_CLS_FOR_PROACTION = {
    'pro-action': true
}

export default {
    name: 'ProAction',
    componentName: 'ProAction',
    components: {
        ElButton,
        ElButtonGroup,
        ElDropdown,
        ElDropdownMenu,
        ElPopover
    },
    mixins: [baseMixin],
    props: {
        // 按钮(button)、下拉按钮(dropdown)、按钮组(group)、链接(link默认_blank模式)
        uiType: String
    },
    computed: {
        isSplitButton() {
            return this.$attrs.splitButton || this.$attrs['split-button']
        }
    },
    created() { },
    methods: {
        doHandler(...args) {
            //点击时隐藏tooltip
            this.handleMouseleave({})
            const disabledShowMessageWhenProActionBeforeHandler = objectProperty(this.getConfigProvide() || {}, 'config.disabledShowMessageWhenProActionBeforeHandler')
            const useHanlder = this.importUrl ? this.handleImportClick : this.debouncedHandleClick
            if (typeof this.beforeHandler === 'function') {
                const res = this.beforeHandler(this.$attrs || {})
                if (res) {
                    if (!res.then) {
                        if (disabledShowMessageWhenProActionBeforeHandler !== true) {
                            Message.warning(res.message || res)
                        }
                        return
                    } else {
                        res.then(m => {
                            if (!m) {
                                useHanlder(...args)
                                return
                            }
                            if (disabledShowMessageWhenProActionBeforeHandler !== true) {
                                Message.warning(m.message || m)
                            }
                        })
                        return
                    }
                }
            }
            useHanlder(...args)
        },
        // 按钮
        renderButton(extendProps) {
            const attrs = { ...(this.$attrs) }
            const buttonDatas = deepmerge({
                props: {
                    ...attrs,
                    disabled: this.isDisabled || !this.isAllow,
                    loading: this.isLoading,
                    icon: this.uiType === 'dropdown' && !this.isSplitButton ? null : this.icon
                },
                on: {
                    click: this.doHandler
                },
                attrs: this.$attrs,
                nativeOn: {
                    mouseenter: this.handleMouseenter,
                    mouseleave: this.handleMouseleave
                },
                'class': {
                    ...DEFAULT_CLS_FOR_PROACTION
                }
            }, extendProps || {})

            if (attrs.xpopover) {
                return this.renderComponentDialog(buttonDatas)
            }
            return (
                <ElButton {...buttonDatas} ref="buttonRef">
                    {this.$slots.default || (
                        <span>
                            {this.text}
                            {(this.uiType === 'dropdown' && !this.isSplitButton) && <i key="icon" class="el-dropdown__icon el-icon-arrow-down"></i>}
                        </span>
                    )}
                    {
                        this.toComponentUrl && this.renderComponentDialog()
                    }
                    {
                        this.renderUploader()
                    }
                </ElButton>
            )
        },
        // 按钮组
        renderButtonGroup() {
            const _datas = {
                'class': {
                    ...DEFAULT_CLS_FOR_PROACTION,
                    'pro-action--group': true
                }
            }
            return <ElButtonGroup {..._datas}>{this.$slots.default}</ElButtonGroup>
        },
        // dropdown
        renderDropDown() {
            const _datas = {
                props: {
                    ...this.$attrs,
                    splitButton: false,
                    customerSplitButton: this.isSplitButton,

                },
                'class': {
                    ...DEFAULT_CLS_FOR_PROACTION,
                    'pro-action--dropdown': true
                },
                scopedSlots: {
                    // 当this.$attrs.splitButton = true 有效
                    leftButton: ({ click, disabled, size, type }) => {
                        return this.renderButton({})
                    }
                }
            }
            return (
                <ElDropdown {..._datas}>
                    {!this.isSplitButton && (this.renderButton({ props: { disabled: this.disabled } }))}
                    <template slot="dropdown">
                        <ElDropdownMenu>
                            {this.$slots.subActions}
                        </ElDropdownMenu>
                    </template>
                </ElDropdown>
            )
        },
        // link
        renderLink() {
            return this.renderButton({
                props: {
                    type: 'text',
                },
                'class': {
                    'pro-action--link': true
                }
            })
        }
    },
    render(h) {
        let vnodes = null
        switch (this.uiType) {
            case 'button':
                vnodes = this.renderButton();
                break;
            case 'dropdown':
                vnodes = this.renderDropDown();
                break;
            case 'group':
                vnodes = this.renderButtonGroup();
                break;
            case 'link':
                vnodes = this.renderLink();
                break;
            default:
                vnodes = this.renderButton();
        }
        return vnodes
    }
}