<template>
    <view class="uni-form-item" :class="{ labelTop: labelPosition == 'top' }">
        <view class="uni-form-item-label" :style="{ width: labelWidth ? labelWidth + 'rpx' : 'auto', color: labelColor }">
            <uni-icons v-if="required" class="required-icon" name="required-icon" color="#f00"></uni-icons>
            {{ label }}
            <text v-if="must" class="must-icon">*</text>
        </view>
        <view class="uni-form-item-body">
            <view class="uni-form-item-content">
                <slot></slot>
            </view>
            <uni-icons v-if="arrow" :name="arrowName" :color="arrowColor" :size="35"></uni-icons>
        </view>
    </view>
</template>

<script setup>
const ps = defineProps({
    labelWidth: {
        type: Number,
        default: 0
    },
    label: {
        type: String,
        default: ''
    },
    labelPosition: {
        type: String,
        default: 'left'
    },
    arrow: {
        type: Boolean,
        default: false
    },
    arrowName: {
        type: String,
        default: 'icon-arrow-right'
    },
    labelColor: {
        type: String,
        default: '#1D2129'
    },
    arrowColor: {
        type: String,
        default: '#999'
    },
    required: {
        type: Boolean,
        default: false
    },
    must: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
</script>

<style lang="scss" scoped>
.uni-form-item {
    display: flex;
    border-bottom: 2rpx solid #f4f4f4;
    background: #fff;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    &.labelTop {
        flex-direction: column;
        .uni-form-item-content {
            margin-top: 8rpx;
        }
    }
    &-label {
        font-size: 28rpx;
        margin-right: 20rpx;
        min-width: 20%;
        max-width: 60%;
        .required-icon {
            width: 28rpx;
        }
        .must-icon {
            color: red;
            position: relative;
            bottom: -3rpx;
        }
    }
    &-body {
        flex: auto;
        overflow: hidden;
        display: flex;
        font-size: 28rpx;
        color: #4e5969;
        align-items: center;
    }
    &-content {
        flex: auto;
        display: flex;
        overflow: hidden;
        justify-content: flex-end;
        font-size: 28rpx;
        :deep(textarea) {
            height: 80rpx;
            width: 100%;
        }
        :deep(.input-placeholder),
        :deep(.uni-input-input),
        :deep(input) {
            flex: auto;
            text-align: right;
            font-size: 28rpx;
        }
    }
}
</style>
