<template>
  <!-- 创建一个 div 元素，通过动态绑定 class 属性，根据组件的不同属性状态来添加相应的类名。prefixCls、lastCls、blockCls、gridCls 这些类名会根据组件内部的计算属性和传入的属性值来确定是否添加 -->
  <div :class="[prefixCls, lastCls, blockCls, gridCls]">
    <!-- 通过 v-if 指令判断 title 属性是否有值，如果有值则创建一个带有 antd-pro-components-standard-form-row-index-label 类名的 div 容器，用于展示标题内容 -->
    <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
      <!-- 在 span 元素内使用双括号插值语法展示 title 属性的值，用于在页面上显示对应的标题文字 -->
      <span>{{ title }}</span>
    </div>
    <!-- 创建一个带有 antd-pro-components-standard-form-row-index-content 类名的 div 容器，用于放置通过插槽传入的内容 -->
    <div class="antd-pro-components-standard-form-row-index-content">
      <!-- 使用默认插槽（<slot>），允许外部组件在使用该组件时插入自定义的内容，增强组件的复用性和灵活性 -->
      <slot></slot>
    </div>
  </div>
</template>
<script>
// 定义一个常量数组 classes，数组中的元素是一些特定的类名字符串，这些类名可能用于在不同条件下为组件添加不同的样式，以实现不同的布局或展示效果
const classes = [
  'antd-pro-components-standard-form-row-index-standardFormRowBlock',
  'antd-pro-components-standard-form-row-index-standardFormRowGrid',
  'antd-pro-components-standard-form-row-index-standardFormRowLast'
];

export default {
  name: 'StandardFormRow',
  props: {
    // 定义 prefixCls 属性，类型为字符串，用于设置组件最外层的基础类名前缀，默认值是 'antd-pro-components-standard-form-row-index-standardFormRow'，外部可以传入不同的值来改变类名前缀，进而影响样式的应用
    prefixCls: {
      type: String,
      default: 'antd-pro-components-standard-form-row-index-standardFormRow'
    },
    // 定义 title 属性，类型为字符串，用于设置组件展示的标题内容，默认值为 undefined，意味着如果外部没有传入该属性值，组件内相关的标题展示部分可能会有不同的处理逻辑（比如隐藏等，取决于模板中的 v-if 判断）
    title: {
      type: String,
      default: undefined
    },
    // 定义 last 属性，类型为布尔值，用于标识当前组件是否处于一组表单行的最后一个位置，外部传入 true 或 false 来控制相关样式和逻辑
    last: {
      type: Boolean
    },
    // 定义 block 属性，类型为布尔值，可能用于控制表单元素是否以块状形式展示等相关样式和布局逻辑，外部传入相应布尔值来决定是否应用对应的样式效果
    block: {
      type: Boolean
    },
    // 定义 grid 属性，类型为布尔值，也许和表单元素按照网格布局等相关样式和布局逻辑有关，同样依赖外部传入的布尔值来控制对应样式的应用与否
    grid: {
      type: Boolean
    }
  },
  computed: {
    // 定义一个计算属性 lastCls，通过判断 this.last 的值（即传入的 last 属性值），如果为 true，则返回 classes 数组中的第三个元素（对应的类名用于标识最后一个表单行的样式相关逻辑），否则返回 null，表示不添加该类名
    lastCls () {
      return this.last? classes[2] : null;
    },
    // 定义一个计算属性 blockCls，根据 this.block 的值来决定是否返回 classes 数组中的第一个元素对应的类名，用于控制表单元素块状展示相关的样式添加与否，为 true 则返回相应类名，否则返回 null
    blockCls () {
      return this.block? classes[0] : null;
    },
    // 定义一个计算属性 gridCls，类似前面的逻辑，依据 this.grid 的值来确定是否返回 classes 数组中第二个元素对应的类名，用于控制与网格布局相关的样式应用，为 true 时返回该类名，否则返回 null
    gridCls () {
      return this.grid? classes[1] : null;
    }
  }
}
</script>

<style lang="less" scoped>
// 导入上级目录下的 index.less 文件，可能是为了引入一些基础的样式变量、混入（mixin）或者通用的样式规则等，以便在当前样式中复用或基于其进行扩展
@import '../index.less';

// 对类名为 antd-pro-components-standard-form-row-index-standardFormRow 的元素设置样式，这是组件的基础类名，以下是相关样式规则的定义
.antd-pro-components-standard-form-row-index-standardFormRow {
  // 设置元素为弹性布局（flexbox），方便内部元素进行灵活排列和对齐等操作
  display: flex;
  // 设置底部外边距为 16px，用于与下方元素隔开一定距离，在视觉上有一定的间隔效果
  margin-bottom: 16px;
  // 设置底部内边距为 16px，可能用于在内部元素与底部边框等之间留出一定空间
  padding-bottom: 16px;
  // 设置底部边框样式，为 1px 宽度的虚线，颜色通过 @border-color-split 变量来确定（该变量应该在导入的 index.less 或者其他地方定义好了具体的颜色值）
  border-bottom: 1px dashed @border-color-split;

  // 使用 /deep/ 选择器（在一些预处理器或者框架中用于穿透组件内部的样式作用域，比如在 Vue 项目中处理组件库样式时可能会用到），对内部的.ant-form-item 类名对应的元素设置样式，这里设置其右边距为 24px，用于调整表单元素之间的水平间距
  /deep/.ant-form-item {
    margin-right: 24px;
  }
  // 同样使用 /deep/ 选择器，对内部的.ant-form-item-label label 元素设置样式，将其右边距设置为 0，改变标签文字与其他元素的间距，并设置文字颜色通过 @text-color 变量来确定（该变量应该已定义好具体颜色值）
  /deep/.ant-form-item-label label {
    margin-right: 0;
    color: @text-color;
  }
  // 对内部的.ant-form-item-label 和.ant-form-item-control 类名对应的元素设置样式，将它们的内边距都设置为 0，统一去除默认的内边距，并设置行高为 32px，使内部文字等元素在垂直方向上有合适的对齐和布局效果
  /deep/.ant-form-item-label,
  .ant-form-item-control {
    padding: 0;
    line-height: 32px;
  }

  // 对类名为 antd-pro-components-standard-form-row-index-label 的元素（用于展示标题部分）设置样式
  .antd-pro-components-standard-form-row-index-label {
    // 设置弹性伸缩属性，不自动缩放，初始宽度为自动（根据内容确定），用于控制标题部分在弹性布局中的宽度表现
    flex: 0 0 auto;
    // 设置右边距为 24px，用于与右侧的内容区域隔开一定距离
    margin-right: 24px;
    // 设置文字颜色通过 @heading-color 变量来确定（通常是一种适合标题展示的颜色）
    color: @heading-color;
    // 设置字体大小通过 @font-size-base 变量来确定（基础字体大小相关变量）
    font-size: @font-size-base;
    // 设置文本水平对齐方式为右对齐，符合标题通常在左侧，内容在右侧的布局习惯
    text-align: right;
    & > span {
      // 设置 span 元素为内联块级元素，使其既可以像内联元素一样在一行内排列，又能像块级元素一样设置宽高、内外边距等样式属性
      display: inline-block;
      // 设置高度为 32px，与前面设置的行高一致，保证文字垂直居中显示等效果
      height: 32px;
      // 设置行高为 32px，使文字在垂直方向上居中
      line-height: 32px;
      &::after {
        // 使用伪元素 ::after 在 span 元素内容后面添加一个中文冒号（：），可能是用于标题与内容之间的一种格式上的分隔标识
        content: '：';
      }
    }
  }

  // 对类名为 antd-pro-components-standard-form-row-index-content 的元素（用于放置通过插槽传入的内容区域）设置样式
  .antd-pro-components-standard-form-row-index-content {
    // 设置弹性伸缩属性，自动缩放以填充剩余空间，初始宽度为 0，用于让内容区域在弹性布局中能够自适应占据剩余的宽度空间
    flex: 1 1 0;
    // 使用 /deep/ 选择器，对内部的.ant-form-item:last-child 元素（即内容区域内最后一个表单元素）设置样式，将其右边距设置为 0，避免最后一个元素出现多余的间距
    /deep/.ant-form-item:last-child {
      margin-right: 0;
    }
  }

  // 当元素同时具有 antd-pro-components-standard-form-row-index-standardFormRowLast 类名时（通过前面的计算属性根据 last 属性判断添加该类名），应用以下样式规则，用于处理处于最后一个表单行的特殊样式情况
  &.antd-pro-components-standard-form-row-index-standardFormRowLast {
    // 清除底部外边距，使该表单行与下方元素之间没有额外的间隔距离
    margin-bottom: 0;
    // 清除底部内边距，让内容等更贴合底部边界等
    padding-bottom: 0;
    // 清除底部边框，与其他表单行在样式上进行区分，比如最后一行不需要底部边框等情况
    border: none;
  }

  // 当元素同时具有 antd-pro-components-standard-form-row-index-standardFormRowBlock 类名时（通过 blockCls 计算属性根据 block 属性判断添加该类名），应用以下样式规则，用于控制表单元素以块状形式展示的相关样式效果
  &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
    // 使用 /deep/ 选择器，对内部的.ant-form-item 和 div.ant-form-item-control-wrapper 元素设置样式，让它们以块级元素的形式展示，改变默认的布局和显示方式，实现块状展示的效果
    /deep/.ant-form-item,
    div.ant-form-item-control-wrapper {
      display: block;
    }
  }

  // 当元素同时具有 antd-pro-components-standard-form-row-index-standardFormRowGrid 类名时（通过 gridCls 计算属性根据 grid 属性判断添加该类名），应用以下样式规则，用于与网格布局相关的样式设置
  &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
    // 类似前面的块状布局样式设置，使用 /deep/ 选择器让内部的.ant-form-item 和 div.ant-form-item-control-wrapper 元素以块级元素形式展示
    /deep/.ant-form-item,
    div.ant-form-item-control-wrapper {
      display: block;
    }
    // 使用 /deep/ 选择器，对内部的.ant-form-item-label 元素设置样式，让其向左浮动，可能用于网格布局中标签元素在左侧等特定的布局排列方式
    /deep/.ant-form-item-label {
      float: left;
    }
  }
}

</style>
