<template>
  <el-form-item :label="label" :required="required" :style="outerStyle">
    <el-row :gutter="20">
      <el-col :span="11">
        <el-form-item :prop="startProp">
          <slot name="startDatePicker">
          </slot>
        </el-form-item>
      </el-col>
      <el-col :span="2" class="time-separator">
        <slot name="separator">
          <span>{{ separator }}</span>
        </slot>
      </el-col>
      <el-col :span="11">
        <el-form-item :prop="endProp">
          <slot name="endDatePicker">
          </slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form-item>
</template>

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

interface Props {
  label: string
  startProp: string
  endProp: string
  startValue: string
  endValue: string
  required?: boolean
  separator?: string
  startPlaceholder?: string
  endPlaceholder?: string
  outerStyle?: string | Record<string, string>
}

const props = withDefaults(defineProps<Props>(), {
  required: false,
  separator: '至',
  outerStyle: () => ({})
})

// 将 outerStyle 字符串或对象转换为样式对象
const outerStyle = computed(() => {
  if (typeof props.outerStyle === 'object' && !Array.isArray(props.outerStyle)) {
    return props.outerStyle
  }
  if (typeof props.outerStyle === 'string' && props.outerStyle) {
    const style: Record<string, string> = {}
    props.outerStyle.split(';').forEach((rule) => {
      const [key, value] = rule.split(':').map(s => s.trim())
      if (key && value) {
        // 将 kebab-case 转换为 camelCase
        const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
        style[camelKey] = value
      }
    })
    return style
  }
  return {}
})
</script>

<style lang="scss" scoped>
.time-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 32px;
  
  span {
    color: #909399;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
  }
}
</style>
