<template>
    <view class="mt-[30rpx]">
        <view class="text-base font-bold">图片尺寸</view>
        <view class="flex justify-between flex-wrap mt-[20rpx]">
            <view
                v-for="(item, index) in pictureSize"
                :key="index"
                class="picture-size text-center hover:text-primary"
                :class="{
                    'picture-size-active': modelValue == item.scale
                }"
                @click="emit('update:modelValue', item.scale)"
            >
                <view
                    class="flex justify-center items-center mt-[20rpx] h-[40rpx]"
                >
                    <view class="rect" :style="item.style" />
                </view>
                <view class="text-base text-[#101010] mt-[8rpx] size-scale">
                    {{ item.scale }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: '1:1'
    }
)

const pictureSize = [
    {
        scale: '1:1',
        style: 'width: 40rpx; height: 40rpx'
    },
    {
        scale: '3:4',
        style: 'width: 30rpx; height: 40rpx'
    },
    {
        scale: '4:3',
        style: 'width: 40rpx; height: 30rpx'
    },
    {
        scale: '9:16',
        style: 'width: 26rpx; height: 40rpx'
    },
    {
        scale: '16:9',
        style: 'width: 40rpx; height: 24rpx'
    }
]
</script>

<style lang="scss" scoped>
// 图片尺寸
.picture-size {
    transition: all 0.5s;
    border: 2rpx solid #dcdfe6;
    user-select: none;
    width: 112rpx;
    height: 132rpx;
    border-radius: 8rpx;
    .rect {
        border-radius: 8rpx;
        border: 4rpx solid #101010;
    }
}
.picture-size-active {
    border: 2rpx solid;
    @apply border-primary bg-primary-light-9;
    .rect {
        border: 4rpx solid;
        @apply border-primary;
    }
    .size-scale,
    .size-name {
        @apply text-primary;
    }
}
</style>
