<template>
    <view class="ut-row" :class="{ 'ut-row--wrap': wrap }" :style="rowStyle">
        <slot />
    </view>
</template>

<script setup lang="ts">
interface UtRowProps {
    /** 总栅格份数，默认 30 */
    columns?: number;
    /** 列间距，字符串形式，可为数值字符串，内部转为 px */
    gap?: string | number;
    /** 是否允许换行 */
    wrap?: boolean;
}

const props = withDefaults(defineProps<UtRowProps>(), {
    columns: 30,
    gap: '16rpx',
    wrap: true,
});

const ROW_INJECT_KEY = 'ut-row-context';
// 将 gap 统一转成 px 数值
const gapPx = computed(() => {
    const val = props.gap;
    if (val === '' || val == null) return 0;
    // 使用 uView 提供的 px 转换，兼容 rpx / rpx 字符串 / 数值字符串
    // @ts-ignore
    const fn = uni?.$u?.getPx;
    if (typeof fn === 'function') return fn(val as any) || 0;
    const n = Number(val);
    return Number.isFinite(n) ? n : 0;
});

// 提供给 ut-col 使用的上下文
provide(ROW_INJECT_KEY, {
    columns: computed(() => props.columns),
    gap: gapPx,
});

// 外层行样式：用负 margin 抵消子项 padding，实现水平 / 垂直间距
const rowStyle = computed(() => {
    const g = gapPx.value;
    if (!g) return '';
    const half = `${g / 2}px`;
    return {
        marginLeft: `-${half}`,
        marginRight: `-${half}`,
        marginTop: `-${half}`,
        marginBottom: `-${half}`,
    } as any;
});

defineExpose({ ROW_INJECT_KEY });
</script>

<style scoped lang="scss">
.ut-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.ut-row--wrap {
    flex-wrap: wrap;
}
</style>
