<template>
    <div class="form-item" :style="{ borderWidth: props.border ? '2rpx' : '0' }">
        <p class="title">
            {{ props.title }} <span>{{ props.subTitle }}</span
            ><span class="required" v-if="props.required">*</span>
        </p>
        <div class="temp"></div>
        <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"
    },
    //小标题
    subTitle: {
        type: String,
        default: ""
    },
    // 边框
    border: {
        type: Boolean,
        default: () => true
    },
    required: {
        type: Boolean,
        default: () => false
    },
    // 图标 (如果为空不显示)
    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-top: 36rpx;
    padding-bottom: 16rpx;
    margin-top: 32rpx;
    border-bottom: 2rpx solid rgb(31 35 41 / 15%);
    .title {
        position: absolute;
        top: 0;
        left: 0;
        height: 36rpx;
        margin-bottom: 32rpx;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 36rpx;
        white-space: nowrap;
        span {
            font-size: 12px;
            color: #77818f;
        }
        .required {
            color: red;
        }
    }
    .temp {
        margin-top: 72rpx;
    }
    .icon {
        position: absolute;
        right: 20rpx;
        bottom: 24rpx;
        width: 28rpx;
        height: 28rpx;
    }
}
</style>
