<template>
  <div 
    class="mb-2"
    :class="{
      'form-item--vertical': top,
      'form-item--horizontal': !top,
      ...rootClasses
    }"
    :style="rootStyles"
  >
    <div 
      v-if="label && !top"
      class="d-inline-block vtk-width-2 align-middle pb-5"
      :class="{ 'text-right': !left, 'text-left': left }"
      style="min-width: 120px; vertical-align: middle;"
    >
      <span v-if="must" :class="left ? 'vtk-width-2' : ''" class="text-red mr-1">*</span>
      <span>{{ label }}</span>
    </div>
    
    <div 
      v-if="label && top"
      class="pb-2 text-left"
    >
      <span v-if="must" class="text-red mr-1">*</span>
      <span>{{ label }}</span>
    </div>
    
    <div 
      v-if="!top"
      class="d-inline-block vtk-width-6 align-middle"
      :class="left ? 'vtk-width-8' : ''"
      style="min-width: 300px; vertical-align: middle;"
    >
      <slot></slot>
    </div>
    
    <div 
      v-if="top"
      :style="contentStyles"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { computed, useAttrs } from 'vue';

// 定义组件名称和选项
defineOptions({
  name: "VtkFormItem",
  inheritAttrs: false,
});

// 获取所有传递的属性
const attrs = useAttrs();

// 定义props
const props = defineProps({
  label: {
    type: String,
    default: null,
  },
  must: {
    type: Boolean,
    default: false,
  },
  left: {
    type: Boolean,
    default: false,
  },
  // 标签在上方的垂直布局
  top: {
    type: Boolean,
    default: false,
  },
  // 控制top模式下内容的最大宽度
  maxWidth: {
    type: [String, Number],
    default: '100%'
  }
});

// 根元素的类名
const rootClasses = computed(() => {
  const classes = {};
  if (attrs.class) {
    // 如果是字符串，直接添加
    if (typeof attrs.class === 'string') {
      attrs.class.split(' ').forEach(cls => {
        if (cls) classes[cls] = true;
      });
    } 
    // 如果是对象，合并
    else if (typeof attrs.class === 'object') {
      Object.assign(classes, attrs.class);
    }
  }
  return classes;
});

// 根元素的样式
const rootStyles = computed(() => {
  // 合并传入的样式和组件内部样式
  const styles = {};
  
  // 应用父组件传递的样式
  if (attrs.style) {
    if (typeof attrs.style === 'string') {
      // 解析字符串样式
      attrs.style.split(';').forEach(style => {
        const [key, value] = style.split(':');
        if (key && value) {
          styles[key.trim()] = value.trim();
        }
      });
    } else if (typeof attrs.style === 'object') {
      // 直接使用对象样式
      Object.assign(styles, attrs.style);
    }
  }
  
  return styles;
});

// 处理maxWidth属性
const processedMaxWidth = computed(() => {
  if (typeof props.maxWidth === 'number') {
    return props.maxWidth + 'px';
  }
  return props.maxWidth;
});

// 内容样式（仅在top模式下应用maxWidth）
const contentStyles = computed(() => {
  const styles = {};
  
  // 在top模式下应用maxWidth
  if (props.top && props.maxWidth) {
    styles.maxWidth = processedMaxWidth.value;
  }
  
  // 在非top模式下保持原有最小宽度
  if (!props.top) {
    styles.minWidth = '300px';
    styles.verticalAlign = 'middle';
  }
  
  return styles;
});
</script>

<style scoped>
.mb-2 {
  margin-bottom: 0.5rem;
}

.form-item--vertical {
  display: block;
}

.form-item--horizontal {
  display: block;
}
</style>