/**
 * pro-input base mixins
 * @author xiufu.wang
 */
import omit from 'mars-pro/src/pro/omit'
import { PRO_CONFIG_PROVIDE_CONTEXT } from 'mars-pro/packages/pro-config-provide';
import debounce from 'throttle-debounce/debounce';
import { getElementWidth, getSingleTextWidth,stopAndPreventDomEvent } from 'mars-pro/src/pro/util';

export default {
    props: {
        value: {},
        //输入类型: String|number|date
        inputType: {
            type: String,
            default: String
        }
    },
    data() {
        return {
            forceValidateEvent: true
        }
    },

    computed: {
        _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
        },
        inputSize() {
            return this.$attrs.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        }
    },

    inject: {
        elForm: {
            default: "",
        },
        elFormItem: {
            default: "",
        },
        proDetail: {
            default: ''
        },
        [PRO_CONFIG_PROVIDE_CONTEXT]: {
            default: null
        }
    },
    created() {
        // global tooltip
        this.activateGlobalTooltip = debounce(500, tooltip => tooltip.handleShowPopper());
    },
    methods: {
        getConfigProvide() {
            return this[PRO_CONFIG_PROVIDE_CONTEXT]
        },
        handleMouseenter(e){
            stopAndPreventDomEvent(e)
            if (this.hasTooltipWapper() === true) {
                return;
            }
            const configProvide = this.getConfigProvide()
            const globalTooltipScope = configProvide.proGlobalTooltip
            const tooltip = globalTooltipScope.$refs.proGlobalTooltip;
            const refEl = this.$el
            const elInput = refEl.getElementsByTagName('span')[0] || refEl
            // 计算是否需要显示
            const textWidth = getSingleTextWidth(refEl.innerText, window.getComputedStyle(elInput).fontSize)
            const inputWidth = getElementWidth(refEl)
            if (textWidth < inputWidth) {
                return
            }
            globalTooltipScope.tooltipContent = this.value
            tooltip.referenceElm = refEl;
            tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
            tooltip.doDestroy();
            tooltip.setExpectedState(true);
            this.activateGlobalTooltip(tooltip)

        },
        handleMouseleave(e){
            stopAndPreventDomEvent(e)
            if (this.hasTooltipWapper() === true) {
                return
            }
            const configProvide = this.getConfigProvide()
            if (configProvide && configProvide.proGlobalTooltip) {
                const globalTooltipScope = configProvide.proGlobalTooltip
                const tooltip = globalTooltipScope.$refs.proGlobalTooltip;
                tooltip.setExpectedState(false);
                tooltip.handleClosePopper();
            }
        },
        //判断是否被tooltip包裹
        hasTooltipWapper() {
            var parent = this.$parent || this.$root;
            var name = parent.$options.name;
            while (parent) {
                if ('ElTooltip' === name || 'ElTableRow' === name) {
                    return true
                }
                parent = parent.$parent;
            }
            return false
        },
        renderSlots() {
            const slots = omit(this.$slots || {}, ['default'])
            return Object.keys(slots).map(item => (
                <template slot={item}>{slots[item]}</template>
            ))
        }
    }
}