<template>
    <div v-memo="[field]" class="ba-table-operate-buttons">
        <template v-for="(btn, idx) in field.buttons" :key="idx">
            <template v-if="btn.display ? btn.display(row, field) : true">
                <!-- 常规按钮 -->
                <el-button
                    v-if="btn.render == 'basicButton'"
                    v-blur
                    @click="onButtonClick(btn)"
                    :class="btn.class"
                    size="small"
                    class="ba-table-render-buttons-item buttons-ml-6"
                    :type="btn.type"
                    :loading="btn.loading && btn.loading(row, field)"
                    :disabled="btn.disabled && btn.disabled(row, field)"
                    v-bind="invokeTableContextDataFun(btn.attr, { row, field, cellValue: btn, column, index })"
                >
                    <Icon v-if="btn.icon" size="14" color="var(--ba-bg-color-overlay)" :name="btn.icon" />
                    <div v-if="btn.text" class="text">{{ getTranslation(btn.text) }}</div>
                </el-button>

                <!-- 带提示信息的按钮 -->
                <el-tooltip
                    v-if="btn.render == 'tipButton' && ((btn.name == 'edit' && baTable.auth('edit')) || btn.name != 'edit')"
                    :disabled="btn.title && !btn.disabledTip ? false : true"
                    :content="getTranslation(btn.title)"
                    placement="top"
                    v-bind="invokeTableContextDataFun(field.customRenderAttr?.tooltip, { row, field, cellValue: btn, column, index })"
                >
                    <el-button
                        v-blur
                        @click="onButtonClick(btn)"
                        :class="btn.class"
                        size="small"
                        class="ba-table-render-buttons-item buttons-ml-6"
                        :type="btn.type"
                        :loading="btn.loading && btn.loading(row, field)"
                        :disabled="btn.disabled && btn.disabled(row, field)"
                        v-bind="invokeTableContextDataFun(btn.attr, { row, field, cellValue: btn, column, index })"
                    >
                        <Icon v-if="btn.icon" size="14" color="var(--ba-bg-color-overlay)" :name="btn.icon" />
                        <div v-if="btn.text" class="text">{{ getTranslation(btn.text) }}</div>
                    </el-button>
                </el-tooltip>

                <!-- 带确认框的按钮 -->
                <el-popconfirm
                    v-if="btn.render == 'confirmButton' && isConfirmButtonVisible(btn)"
                    :disabled="btn.disabled && btn.disabled(row, field)"
                    v-bind="invokeTableContextDataFun(btn.popconfirm, { row, field, cellValue: btn, column, index })"
                    @confirm="onButtonClick(btn)"
                >
                    <template #reference>
                        <div class="buttons-popconfirm-reference-box buttons-ml-6">
                            <el-tooltip
                                :disabled="btn.title ? false : true"
                                :content="getTranslation(btn.title)"
                                placement="top"
                                v-bind="invokeTableContextDataFun(field.customRenderAttr?.tooltip, { row, field, cellValue: btn, column, index })"
                            >
                                <el-button
                                    v-blur
                                    :class="btn.class"
                                    size="small"
                                    class="ba-table-render-buttons-item"
                                    :type="btn.type"
                                    :loading="btn.loading && btn.loading(row, field)"
                                    :disabled="btn.disabled && btn.disabled(row, field)"
                                    v-bind="invokeTableContextDataFun(btn.attr, { row, field, cellValue: btn, column, index })"
                                >
                                    <Icon v-if="btn.icon" size="14" color="var(--ba-bg-color-overlay)" :name="btn.icon" />
                                    <div v-if="btn.text" class="text">{{ getTranslation(btn.text) }}</div>
                                </el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-popconfirm>

                <!-- 带提示的可拖拽按钮 -->
                <el-tooltip
                    v-if="btn.render == 'moveButton' && ((btn.name == 'weigh-sort' && baTable.auth('sortable')) || btn.name != 'weigh-sort')"
                    :disabled="btn.title && !btn.disabledTip ? false : true"
                    :content="getTranslation(btn.title)"
                    placement="top"
                    v-bind="invokeTableContextDataFun(field.customRenderAttr?.tooltip, { row, field, cellValue: btn, column, index })"
                >
                    <el-button
                        :class="btn.class"
                        size="small"
                        class="ba-table-render-buttons-item move-button buttons-ml-6"
                        :type="btn.type"
                        :loading="btn.loading && btn.loading(row, field)"
                        :disabled="btn.disabled && btn.disabled(row, field)"
                        v-bind="invokeTableContextDataFun(btn.attr, { row, field, cellValue: btn, column, index })"
                    >
                        <Icon v-if="btn.icon" size="14" color="var(--ba-bg-color-overlay)" :name="btn.icon" />
                        <div v-if="btn.text" class="text">{{ getTranslation(btn.text) }}</div>
                    </el-button>
                </el-tooltip>
            </template>
        </template>
    </div>
</template>

<script setup lang="ts">
import { TableColumnCtx } from 'element-plus'
import { inject } from 'vue'
import { useI18n } from 'vue-i18n'
import { invokeTableContextDataFun } from '/@/components/table/index'
import type baTableClass from '/@/utils/baTable'
import { useAdminInfo } from '/@/stores/adminInfo'

interface Props {
    row: TableRow
    field: TableColumn
    column: TableColumnCtx<TableRow>
    index: number
}

const { t, te } = useI18n()
const props = defineProps<Props>()
const baTable = inject('baTable') as baTableClass
const adminInfo = useAdminInfo()

const onButtonClick = (btn: OptButton) => {
    if (typeof btn.click === 'function') {
        btn.click(props.row, props.field)
        return
    }
    baTable.onTableAction(btn.name as BaTableActionEventName, props)
}

const isConfirmButtonVisible = (btn: OptButton) => {
    if (btn.name === 'delete') {
        return baTable.auth('del')
    }
    if (btn.name === 'resetTotp') {
        return adminInfo.super || baTable.auth('resetTotp')
    }
    return true
}

const getTranslation = (key?: string) => {
    if (!key) return ''
    return te(key) ? t(key) : key
}
</script>

<style scoped lang="scss">
.ba-table-operate-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
    vertical-align: middle;
}
.ba-table-render-buttons-item {
    width: 40px;
    min-width: 40px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    .text {
        font-size: 12px;
        line-height: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    .icon + .text {
        padding-left: 2px;
    }
}
.ba-table-render-buttons-move {
    cursor: move;
}
.buttons-popconfirm-reference-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    vertical-align: middle;
}
</style>
