<script lang="ts" setup>
import { $t } from "@/common/languages";
import { computed } from "vue";

const props = defineProps({
  authShowFunc: Function,
});

const emit = defineEmits<{ "operate-button-click": [eventName: string, row: any] }>();

const buttonList = useRoute().meta.toolButtonAuth ?? [];

// 根据按钮数量计算列宽
// 中文：2字按钮约40px，4字按钮约60px
// 英文：1词按钮约40px，3词按钮约80px
// 间隙：每个按钮间8px
const columnWidth = computed(() => {
  const count = buttonList.length;
  // 基础边距20px + 每个按钮平均45px + 间隙
  return 20 + count * 45 + (count - 1) * 8;
});

const authShowFunc = (row: any, button: globalThis.ButtonProp) => {
  if (props.authShowFunc !== undefined) {
    return props.authShowFunc(row, button);
  }
  return true;
};
</script>
<template>
  <el-table-column
    :label="$t('_prop.common.operate')"
    v-if="buttonList?.length !== 0"
    :min-width="columnWidth"
    align="center"
    fixed="right"
    class-name="operate-column"
  >
    <template #default="{ row }">
      <div class="operate-buttons">
        <template v-for="button of buttonList" :key="button.buttonName">
          <el-button
            v-if="authShowFunc(row, button)"
            :type="button.colorType || 'primary'"
            @click="emit('operate-button-click', button.eventName, row)"
            link
            size="small"
            class="operate-btn"
          >
            {{ $t("_button." + button.eventName) }}
          </el-button>
        </template>
      </div>
    </template>
  </el-table-column>
</template>
<style scoped>
.operate-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

.operate-btn {
  padding: 2px 4px;
  font-size: 13px;
  white-space: nowrap;
}

.operate-btn:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}
</style>
