<template>
    <div class="info-dropdown">
        <el-dropdown
            v-if="(row.show === undefined ? true : row.show()) && someButtonHandler(dropdown) > 0"
            class="dropdown-default"
            size="small"
            :trigger="row.trigger || 'click'"
            @command="handleCommand"
            @click="open"
            @visible-change="handleVisibleChange"
        >
            <el-button
                plain
                :disabled="row.disabled?.()"
                :size="row.size || 'default'"
                :link="row.link || row.useTip"
                @mouseenter="showTip($event)"
                @mouseleave="hideTip"
                @click="hideTip"
            >
                <span v-if="!row.useTip">{{ $t(row.title?.()) }}</span>
                <el-icon
                    class="el-icon--right"
                    :size="row.iconSize"
                >
                    <component :is="row.icon ? row.icon : (row.useTip ? MoreFilled : ArrowDown)"></component>
                </el-icon>
            </el-button>
            <template #dropdown>
                <el-dropdown-menu
                    v-if="menuVisible"
                    :class="`${row.class}-drop-down`">
                    <template v-for="item in dropdown">
                        <el-dropdown-item
                            v-if="(item.show === undefined ? true : item.show()) && filterButtonHandler(item.code)"
                            :key="item.command"
                            :class="`dropdown${pathname}-${item?.command || 'default'}`"
                            :test-cy="item.code || item.command"
                            :disabled="item.disabled?.()"
                            :command="item.command"
                            :divided="item.divided"
                            :icon="item.icon"
                        >
                            <span :style="item.style">
                                {{ $t(item.name) }}
                            </span>
                        </el-dropdown-item>
                    </template>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <el-tooltip
            effect="dark"
            placement="top"
            :content="$t(row.title?.()) || $t('more')"
            :visible="visible"
            virtual-triggering
            :virtual-ref="buttonRef"
        >
        </el-tooltip>
    </div>
</template>
<script lang="ts" setup>
import { computed, PropType, ref, toRef } from 'vue'
import { RowInterface } from './index'
import { filterButtonHandler, someButtonHandler } from '../../script/util'
import { ArrowDown, MoreFilled } from '@element-plus/icons-vue'

let props = defineProps({
    row: {
        type: Object as PropType<RowInterface>,
        default: () => {
        }
    }
})

let emits = defineEmits(['handleCommand'])
const menuVisible = ref(false)
let visible = ref(false)
let buttonRef = ref()

// const { row } = props
const row = toRef(props, 'row')
const pathname = window.location.pathname.replace(/\//g, '-')
const dropdown = computed(() => row.value.dropdown())
const handleCommand = (command: any) => {
    emits('handleCommand', command)
    row.value.method?.(command)
}
const open = () => { // split-button
}
const handleVisibleChange = (val: boolean) => { // split-button
    menuVisible.value = val
}
const showTip = (e) => {
    if (!row.value.useTip) return
    buttonRef.value = e.currentTarget
    visible.value = true
}
const hideTip = () => {
    visible.value = false
}
</script>
<style lang="scss" scoped>
.info-dropdown {
    display: inline-block;
}
.el-dropdown {
    display: inline-block !important;
    line-height: 60px !important;
}
.el-dropdown-menu {
    max-height: 360px;
    overflow-y: auto;
}
</style>
