<template>
  <view class="im-col" :class="[
    `im-col--span-${span}`,
    `im-col--offset-${offset}`,
    `im-col--order-${order}`,
    `im-col--align-self-${alignSelf}`,
    { 'im-col--gutter': hasGutter }
  ]" :style="colStyle" @tap="handleClick">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue'
import { validator } from '../../index'
import { ColProps, ColEmits } from '../../types/components/col'

// // 定义 Props
// interface Props {
//   // 布局配置
//   span?: number | string
//   offset?: number | string
//   order?: number | string
//   alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch'
//   flex?: string

//   // 响应式配置
//   xs?: number | string
//   sm?: number | string
//   md?: number | string
//   lg?: number | string
//   xl?: number | string

//   // 样式配置
//   width?: string
//   height?: string
//   margin?: string
//   padding?: string
//   bgColor?: string
//   borderColor?: string
//   borderRadius?: string

//   // 点击事件
//   clickable?: boolean
// }

// // 定义 Emits
// interface Emits {
//   (e: 'click', event: any): void
// }

// 定义 Props 默认值
const props = withDefaults(defineProps<ColProps>(), {
  span: 24,
  offset: 0,
  order: 0,
  alignSelf: 'auto',
  flex: 'none',

  xs: 0,
  sm: 0,
  md: 0,
  lg: 0,
  xl: 0,

  width: 'auto',
  height: 'auto',
  margin: '0',
  padding: '0',
  bgColor: 'transparent',
  borderColor: 'transparent',
  borderRadius: '0',

  clickable: false
})

const emit = defineEmits<ColEmits>()

// 注入 row context
const rowContext = inject('imRowContext', { gutter: 0 })

// 计算是否有 gutter
const hasGutter = computed(() => {
  return Number(rowContext.gutter) > 0
})

// 计算响应式 span
const computedSpan = computed(() => {
  // 这里可以添加响应式逻辑，根据屏幕宽度返回不同的 span
  // 简化版本：直接使用 props.span
  return props.span
})

// 计算列样式
const colStyle = computed(() => {
  let width = props.width
  let height = props.height
  let margin = props.margin
  let padding = props.padding
  let borderRadius = props.borderRadius

  if (validator.isNumber(props.width)) {
    width = `${props.width}rpx`
  }

  if (validator.isNumber(props.height)) {
    height = `${props.height}rpx`
  }

  if (validator.isNumber(props.margin)) {
    margin = `${props.margin}rpx`
  }

  if (validator.isNumber(props.padding)) {
    padding = `${props.padding}rpx`
  }

  if (validator.isNumber(props.borderRadius)) {
    borderRadius = `${props.borderRadius}rpx`
  }

  const style: any = {
    width: width,
    height: height,
    margin: margin,
    padding: padding,
    backgroundColor: props.bgColor,
    borderColor: props.borderColor,
    borderRadius: borderRadius,
    order: props.order,
    alignSelf: props.alignSelf
  }

  // 设置 flex
  if (props.flex !== 'none') {
    style.flex = props.flex
  }

  // 设置边框
  if (props.borderColor !== 'transparent') {
    style.borderWidth = '2rpx'
    style.borderStyle = 'solid'
  }

  // 设置 gutter
  if (hasGutter.value) {
    const gutter = typeof rowContext.gutter === 'number'
      ? `${rowContext.gutter}rpx`
      : rowContext.gutter

    style.paddingLeft = `calc(${gutter} / 2)`
    style.paddingRight = `calc(${gutter} / 2)`
  }

  return style
})

// 点击事件
const handleClick = (event: any) => {
  if (props.clickable) {
    emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
.im-col {
  box-sizing: border-box;
  position: relative;

  // 基本 span 类
  @for $i from 1 through 24 {
    &--span-#{$i} {
      width: calc(100% * $i / 24);
    }

    &--offset-#{$i} {
      margin-left: calc(100% * $i / 24);
    }

    &--order-#{$i} {
      order: $i;
    }
  }

  // 对齐方式
  &--align-self-auto {
    align-self: auto;
  }

  &--align-self-start {
    align-self: flex-start;
  }

  &--align-self-end {
    align-self: flex-end;
  }

  &--align-self-center {
    align-self: center;
  }

  &--align-self-stretch {
    align-self: stretch;
  }

  // 点击效果
  &:active {
    &.im-col--clickable {
      opacity: 0.7;
    }
  }
}
</style>