<template>
    <view class="ut-col" :style="colStyle" @click="handleClick">
        <slot />
    </view>
</template>

<script setup lang="ts">
import { computed, inject, unref } from 'vue';

interface UtColProps {
    /** 占用份数（列宽），最大不超过 30 */
    span?: number;
}

const props = withDefaults(defineProps<UtColProps>(), {
    span: 10,
});

const emit = defineEmits(['click']);

const handleClick = () => {
    emit('click');
};

const ROW_INJECT_KEY = 'ut-row-context';

const rowContext = inject<any>(ROW_INJECT_KEY, null);

const colStyle = computed(() => {
    const styles: Record<string, string> = {};
    if (!rowContext) return styles;
    const columns = Number(unref(rowContext.columns) || 0);
    const gap = Number(unref(rowContext.gap) || 0);
    const span = props.span || 0;

    if (columns > 0 && span > 0) {
        const percent = (span / columns) * 100;
        styles.flex = `0 0 ${percent}%`;
        styles.maxWidth = `${percent}%`;
    }

    if (gap > 0) {
        const half = `${gap / 2}px`;
        styles.paddingLeft = half;
        styles.paddingRight = half;
        styles.paddingTop = half;
        styles.paddingBottom = half;
    }

    return styles;
});
</script>
<script lang="ts">
export default {
    options: {
        // 微信小程序中 options 选项
        multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
        styleIsolation: 'shared', //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
        addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
        virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
    },
};
</script>
<style scoped lang="scss">
.ut-col {
    min-width: 0; // 防止内容撑破
    box-sizing: border-box;
}
</style>
