<script setup lang="ts">
import { computed } from 'vue'
import { NButton, NConfigProvider } from 'naive-ui'

const props = defineProps<{ df: any; record: Record<string, any>; canEdit: boolean; ctx: any }>()

// Label布局：上下结构(vertical) 或 左右结构(horizontal)
const labelLayout = computed(() => props.df.label_layout || 'vertical')

// 自定义按钮主题
const themeOverrides = {
  Button: {
    colorDefault: '#f3f4f6',
    colorHoverDefault: '#e5e7eb',
    colorPressedDefault: '#d1d5db',
    textColorDefault: '#374151',
    textColorHoverDefault: '#374151',
    textColorPressedDefault: '#374151',
    borderDefault: '1px solid #d1d5db',
    borderHoverDefault: '1px solid #9ca3af',
    borderPressedDefault: '1px solid #9ca3af',
  }
}
</script>

<template>
  <div :class="['field-wrapper', `layout-${labelLayout}`]">
    <label class="field-label">
      {{ ctx.t(df.label || df.fieldname) }}
      <span v-if="df.reqd" class="required">*</span>
    </label>
    <n-config-provider :theme-overrides="themeOverrides">
      <n-button 
        type="default"
        :disabled="!canEdit"
        @click="ctx.handleButtonClick ? ctx.handleButtonClick(df) : null"
      >
        {{ ctx.t(df.label || df.fieldname) }}
      </n-button>
    </n-config-provider>
  </div>
</template>

<style scoped>
.field-wrapper :deep(.n-button) {
  flex: 1;
}
</style>


