<template>
  <!-- 创建一个带有 setting-drawer-index-item 类名的 div 容器，作为一个可复用的设置项组件的外层包裹元素 -->
  <div class="setting-drawer-index-item">
    <!-- 使用双括号插值语法展示 title 属性的值，将其作为标题展示在 h3 元素中，h3 元素添加了 setting-drawer-index-title 类名，用于后续样式控制 -->
    <h3 class="setting-drawer-index-title">{{ title }}</h3>
    <!-- 使用默认插槽（<slot>），用于让使用该组件的父组件可以向此处插入自定义的内容，增加组件的灵活性和复用性 -->
    <slot></slot>
    <!-- 使用 a-divider 组件绘制一条分割线，通过 v-if 指令根据 divider 属性的值来决定是否显示该分割线，若 divider 属性为 true，则显示分割线 -->
    <a-divider v-if="divider"/>
  </div>
</template>
<script>
export default {
  name: 'SettingItem',
  // 定义组件接收的属性（props），用于外部向组件内部传递数据
  props: {
    title: {
      // title 属性的类型被定义为字符串（String），意味着外部传入的值应该是字符串类型
      type: String,
      // 设置 title 属性的默认值为空字符串，如果外部没有传入该属性值，则使用这个默认值
      default: ''
    },
    divider: {
      // divider 属性的类型定义为布尔值（Boolean），表示外部传入的值应该是 true 或者 false
      type: Boolean,
      // 设置 divider 属性的默认值为 false，即默认情况下不显示分割线，除非外部传入 true 来改变此默认行为
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
/* 对类名为 setting-drawer-index-item 的元素设置样式 */
.setting-drawer-index-item {
  // 设置该元素底部外边距为 24px，用于与下方元素隔开一定距离，方便布局和视觉区分
  margin-bottom: 24px;

  .setting-drawer-index-title {
    // 设置标题文字（.setting-drawer-index-title 类名对应的元素）的字体大小为 14px，颜色为带有一定透明度的黑色（rgba 颜色模式），行高为 22px，底部外边距为 12px，使其在外观上有合适的展示效果
    font-size: 14px;
    color: rgba(0, 0, 0,.85);
    line-height: 22px;
    margin-bottom: 12px;
  }
}
</style>