<template>
    <div class="form-item" :style="{ borderWidth: props.border ? '2rpx' : '0' }">
        <p class="title">{{ props.title }}</p>
        <img v-if="icon" class="icon" :src="iconPath" alt="" />
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    // 标题
    title: {
        type: String,
        default: () => "默认title"
    },
    // 边框
    border: {
        type: Boolean,
        default: () => true
    },
    // 图标 (如果为空不显示)
    icon: {
        type: String as PropType<"arrow" | "edit" | "">,
        default: () => "arrow"
    }
});
const iconPath = new URL(`../../static/image/icon/${props.icon}.png`, import.meta.url).href;
</script>

<style lang="scss" scoped>
.form-item {
    position: relative;
    padding-bottom: 16rpx;
    margin-top: 32rpx;
    border-bottom: 2rpx solid rgb(31 35 41 / 15%);
    .title {
        margin-bottom: 32rpx;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 36rpx;
    }
    .icon {
        position: absolute;
        right: 20rpx;
        bottom: 24rpx;
        width: 28rpx;
        height: 28rpx;
    }
}
</style>
