<template>
  <view class="w-full bg-white box-border py-[32rpx] px-4" :class="classes">
    <view
      class="w-full box-border flex justify-between items-center text-base text-[#333]"
      :class="labelClass"
    >
      <view>
        <span v-if="required && !requiredRight" class="text-[#FB4848]">*</span>
        {{ label }}
        <span v-if="required && requiredRight" class="text-[#FB4848]">*</span>
      </view>
      <slot name="value" />
    </view>
    <slot name="default" />
  </view>
  <view v-if="border" style="border-bottom: 2rpx solid #f2f2f2" class="ml-4"></view>
</template>

<script setup>
  defineOptions({
    name: 'ItemForm',
  })

  defineProps({
    classes: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
    labelClass: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
      default: false,
    },
    requiredRight: {
      type: Boolean,
      default: false,
    },

    border: {
      type: Boolean,
      default: true,
    },
  })
</script>

<style lang="scss" scoped></style>
