<template>
  <div class="form-item">
    <div class="form-item-label" v-if="props.label">
      <em class="text-red-600" v-if="props.required">*</em>{{ props.label }}
      <a-tooltip v-if="props.tip" :title="props.tip" color="#545454">
        <Icon
          icon="ant-design:question-circle-outlined"
          class="ml-5px"
          color="#999999"
        /> </a-tooltip
    ></div>
    <div class="form-item-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Icon } from '/@/components/Icon';
  const props = defineProps({
    required: Boolean,
    label: String,
    tip: String,
  });
</script>

<style lang="less" scoped>
  /* 表单 */
  .form-item {
    display: flex;
    margin: 0 0 10px;
    align-items: flex-start;
  }

  .form-item-content {
    flex: 1;
    padding-right: 8px;
  }

  .form-item-label {
    width: 110px;
    line-height: 2;
    display: flex;
    align-items: center;
    padding-left: 16px;
  }

  :deep(.ant-select),
  :deep(.ant-select-item) {
    font-size: 14px;
  }
</style>
