<template>
  <view class="im-row" :class="[
    `im-row--align-${align}`,
    `im-row--justify-${justify}`,
    { 'im-row--wrap': wrap },
    { 'im-row--gutter': hasGutter }
  ]" :style="rowStyle">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { computed, provide, reactive, watchEffect } from 'vue'
import { validator } from '../../index'
import { RowProps, RowEmits } from '../../types/components/row'

// 定义 Props 默认值
const props = withDefaults(defineProps<RowProps>(), {
  gutter: 0,
  align: 'top',
  justify: 'start',
  wrap: false,

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

  rowGap: 0,
  columnGap: 0
})

const emit = defineEmits<RowEmits>()

// 获取插槽
// const slots = useSlots()

// 计算样式
const rowStyle = 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
  }

  // 设置阴影
  if (props.shadow) {
    style.boxShadow = '0 4rpx 12rpx rgba(0, 0, 0, 0.08)'
  }

  // 设置间距
  if (props.rowGap || props.columnGap) {
    const rowGap = typeof props.rowGap === 'number' ? `${props.rowGap}rpx` : props.rowGap
    const columnGap = typeof props.columnGap === 'number' ? `${props.columnGap}rpx` : props.columnGap

    if (props.wrap) {
      style.gap = `${rowGap} ${columnGap}`
    } else {
      style.rowGap = rowGap
      style.columnGap = columnGap
    }
  }

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

  return style
})

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

// 提供 context 给子组件
const rowContext = reactive({
  gutter: props.gutter
})

provide('imRowContext', rowContext)

// 监听 gutter 变化
watchEffect(() => {
  rowContext.gutter = props.gutter
})

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

<style lang="scss" scoped>
.im-row {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;

  // 垂直对齐方式
  &--align-top {
    align-items: flex-start;
  }

  &--align-middle {
    align-items: center;
  }

  &--align-bottom {
    align-items: flex-end;
  }

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

  // 水平对齐方式
  &--justify-start {
    justify-content: flex-start;
  }

  &--justify-end {
    justify-content: flex-end;
  }

  &--justify-center {
    justify-content: center;
  }

  &--justify-space-around {
    justify-content: space-around;
  }

  &--justify-space-between {
    justify-content: space-between;
  }

  // 换行
  &--wrap {
    flex-wrap: wrap;
  }

  // 间距
  &--gutter {
    margin-left: calc(var(--im-row-gutter, 0rpx) / -2);
    margin-right: calc(var(--im-row-gutter, 0rpx) / -2);
  }
}
</style>