<template>
    <div class="form-item flex-align-center" :class="{ border }">
        <div class="form-title">{{ title }}</div>
        <div class="form-content flex-between">
            <div class="slot-wrap">
                <slot name="default"></slot>
            </div>
            <div v-if="arrow" class="arrow"></div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from "vue";
const { title, border, arrow } = defineProps({
    title: {
        type: String,
        default: "默认标题"
    },
    arrow: {
        type: Boolean,
        default: false
    },
    border: {
        type: Boolean,
        default: true
    }
});
</script>

<style lang="scss" scoped>
.form-item {
    padding: 32rpx 0;
    .form-title {
        width: 200rpx;
        flex-shrink: 0;
        font-size: 24rpx;
        text-wrap: nowrap;
        font-weight: normal;
        color: #77818f;
    }
    .form-content {
        box-sizing: border-box;
        flex-grow: 1;
        padding-right: 16rpx;
        .slot-wrap {
            flex: 1;
            font-size: 14px;
            color: #1b2026;
        }
    }
    &.border {
        border-bottom: 2rpx solid rgb(31 35 41 / 15%);
    }
}
</style>
