<script setup lang="ts">
import { computed } from 'vue'

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

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

// 生成唯一的ID
const checkboxId = computed(() => `checkbox-${props.df.fieldname}-${Math.random().toString(36).substr(2, 9)}`)
</script>

<template>
  <div :class="['field-wrapper', `layout-${labelLayout}`]">
    <!-- Vertical模式：Label在上，复选框在下 -->
    <template v-if="labelLayout === 'vertical'">
      <div class="field-label">
        {{ ctx.t(df.label || df.fieldname) }}
        <span v-if="df.reqd" class="required">*</span>
      </div>
      <div class="checkbox-container">
        <input 
          :id="checkboxId"
          type="checkbox" 
          :checked="!!record[df.fieldname]"
          @change="(event) => { record[df.fieldname] = (event.target as HTMLInputElement).checked ? 1 : 0 }"
          :disabled="!canEdit"
          class="native-checkbox"
        />
      </div>
    </template>
    
    <!-- Horizontal模式：复选框在左，Label在右 -->
    <template v-else>
      <div class="checkbox-container">
        <input 
          :id="checkboxId"
          type="checkbox" 
          :checked="!!record[df.fieldname]"
          @change="(event) => { record[df.fieldname] = (event.target as HTMLInputElement).checked ? 1 : 0 }"
          :disabled="!canEdit"
          class="native-checkbox"
        />
      </div>
      <div class="field-label">
        {{ ctx.t(df.label || df.fieldname) }}
        <span v-if="df.reqd" class="required">*</span>
      </div>
    </template>
  </div>
</template>

<style scoped>
.checkbox-container {
  display: flex;
  align-items: center;
  pointer-events: none;
}

.native-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  pointer-events: auto;
  accent-color: #18a058;
}

.native-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
</style>


