<template>
  <!-- 模板部分 -->
  <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
    <!-- 根据size和layout动态设置类名 -->
    <div v-if="title" class="title">{{ title }}</div>
    <!-- 如果存在title属性，则显示标题 -->
    <a-row>
      <slot></slot>
      <!-- 使用slot来插入内容 -->
    </a-row>
  </div>
</template>

<script>
import { Col } from 'ant-design-vue/es/grid' // 导入Ant Design Vue的栅格系统组件

const Item = {
  name: 'DetailListItem', // 组件名称
  props: {
    term: {
      type: String, // 定义term属性，类型为字符串
      default: '', // 默认值为空字符串
      required: false // 不是必需属性
    }
  },
  inject: {
    col: {
      type: Number // 注入col属性，类型为数字
    }
  },
  render () {
    return (
      <Col {...{props: responsive[this.col]}}>
        <div class="term">{this.$props.term}</div>
        <div class="content">{this.$slots.default}</div>
      </Col>
    )
  }
}

// 定义响应式对象，用于栅格系统的响应式布局
const responsive = {
  1: {xs: 24},
  2: {xs: 24, sm: 12},
  3: {xs: 24, sm: 12, md: 8},
  4: {xs: 24, sm: 12, md: 6}
}

export default {
  name: 'DetailList', // 组件名称
  Item: Item, // 注册子组件
  components: {
    Col // 注册栅格组件
  },
  props: {
    title: {
      type: String,
      default: '',
      required: false
    },
    col: {
      type: Number,
      required: false,
      default: 3
    },
    size: {
      type: String,
      required: false,
      default: 'large'
    },
    layout: {
      type: String,
      required: false,
      default: 'horizontal'
    }
  },
  provide() {
    return {
      col: this.col > 4 ? 4 : this.col // 如果col大于4，则使用4，否则使用col
    }
  }
</script>

<style lang="less" scoped>
/* 样式部分，使用Less编写，并且是作用域样式，只影响当前组件 */
.description-list {
  .title {
    color: rgba(0, 0, 0, .85); // 标题颜色为半透明黑色
    font-size: 14px; // 字体大小为14px
    font-weight: 500; // 字体加粗
    margin-bottom: 16px; // 底部外边距为16px
  }

  /deep/ .term {
    color: rgba(0, 0, 0, .85); // 项颜色为半透明黑色
    display: table-cell; // 显示为表格单元格
    line-height: 20px; // 行高20px
    margin-right: 8px; // 右边距8px
    padding-bottom: 16px; // 底部内边距16px
    white-space: nowrap; // 不换行显示
  }

  /deep/ .content {
    color: rgba(0, 0, 0, .65); // 内容颜色为半透明黑色
    display: table-cell; // 显示为表格单元格
    min-height: 22px; // 最小高度222px
    line-height: 22px; // 行高222px
    padding-bottom: 16px; // 底部内边距16px
    width: 100%; // 宽度100%
  }

  &.small {
    .title {
      font-size: 14px; // 字体大小为14px
      color: rgba(0, 0, 0, .65); // 颜色为半透明黑色
      font-weight: normal; // 字体不加粗
      margin-bottom: 12px; // 底部外边距12px
    }

    /deep/ .term, .content {
      padding-bottom: 8px; // 底部内边距8px
    }
  }

  &.large {
    /deep/ .term, .content {
      padding-bottom: 16px; // 底部内边距16px
    }

    .title {
      font-size: 16px; // 字体大小为16px
    }
  }

  &.vertical {
    .term {
      padding-bottom: 8px; // 底部内边距8px
    }

    /deep/ .term, .content {
      display: block; // 显示为块级元素
    }
  }
</style>