<template>
  <!-- 创建一个带有 result 类名的 div 容器，作为整个结果展示组件的外层包裹元素 -->
  <div class="result">
    <!-- 内部的一个 div 容器，用于放置图标相关元素 -->
    <div>
      <!-- 使用 a-icon 组件来展示图标，通过动态绑定 class 和 type 属性来根据不同情况显示相应图标 -->
      <!-- 根据表达式判断，如果 localIsSuccess 为 true，则显示成功图标（check-circle），否则显示失败图标（close-circle） -->
      <!-- 同时，根据 type 属性的值动态添加对应的类名（success 或 error），用于样式控制 -->
      <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess? 'check-circle' : 'close-circle'"/>
    </div>
    <!-- 创建一个带有 title 类名的 div 容器，用于展示标题内容 -->
    <div class="title">
      <!-- 使用具名插槽（name="title"），如果外部在使用该组件时传入了名为 title 的插槽内容，则优先显示插槽内容，否则显示组件内部绑定的 title 属性值 -->
      <slot name="title">
        {{ title }}
      </slot>
    </div>
    <!-- 创建一个带有 description 类名的 div 容器，用于展示描述性文字内容 -->
    <div class="description">
      <!-- 同样使用具名插槽（name="description"），若外部传入相应插槽内容则展示插槽内容，否则展示组件内部绑定的 description 属性值 -->
      <slot name="description">
        {{ description }}
      </slot>
    </div>
    <!-- 创建一个带有 extra 类名的 div 容器，通过 v-if 指令判断，如果组件使用时有默认插槽（$slots.default 存在），则展示默认插槽内容 -->
    <div class="extra" v-if="$slots.default">
      <slot></slot>
    </div>
    <!-- 创建一个带有 action 类名的 div 容器，利用 v-if 指令判断，当存在名为 action 的插槽（$slots.action 存在）时，展示 action 插槽内容 -->
    <div class="action" v-if="$slots.action">
      <slot name="action"></slot>
    </div>
  </div>
</template>

<script>
// 定义一个名为 resultEnum 的常量数组，包含了两种结果状态对应的字符串值，分别是 'success' 和 'error'，用于后续属性验证等操作
const resultEnum = ['success', 'error']

export default {
  name: 'Result',
  props: {
    /** @Deprecated 表示该属性已被弃用，建议后续不再使用此属性，此处定义的 isSuccess 用于表示结果是否成功 */
    isSuccess: {
      type: Boolean,
      default: false
    },
    // 定义 type 属性，类型为字符串，默认值取自 resultEnum 数组的第一个元素（即'success'）
    type: {
      type: String,
      default: resultEnum[0],
      // 定义一个验证器函数，用于验证传入的 type 属性值是否在 resultEnum 数组中，确保传入的值是合法的预期值
      validator(val) {
        return (val) => resultEnum.includes(val)
      }
    },
    // 定义 title 属性，类型为字符串，默认值为空字符串，用于展示主要的标题文字内容
    title: {
      type: String,
      default: ''
    },
    // 定义 description 属性，类型为字符串，默认值为空字符串，用于展示辅助说明性的文字内容
    description: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 定义一个计算属性 localIsSuccess，通过判断 type 属性的值是否等于 resultEnum 数组中的第一个元素（'success'）来确定当前是否处于成功状态
    localIsSuccess: function () {
      return this.type === resultEnum[0]
    }
  }
}
</script>

<style lang="less" scoped>
/* 对类名为 result 的元素设置样式 */
.result {
  // 设置文本水平对齐方式为居中对齐
  text-align: center;
  // 设置宽度占父元素的 72%
  width: 72%;
  // 设置水平方向自动居中（左右外边距自动计算为相等值）
  margin: 0 auto;
  // 设置上下内边距，上内边距 24px，下内边距 8px
  padding: 24px 0 8px;

  .icon {
    // 设置图标字体大小为 72px，并且行高也为 72px，使图标垂直居中显示，同时设置底部外边距为 24px
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
  }

  .success {
    // 当元素具有 success 类名时，设置文字颜色为特定的绿色（#52c41a），可能用于表示成功状态的图标或文字颜色
    color: #52c41a;
  }

  .error {
    // 当元素具有 error 类名时，设置文字颜色为红色，用于表示失败状态的图标或文字颜色
    color: red;
  }

  .title {
    // 设置标题文字的字体大小为 24px，颜色为带有一定透明度的黑色（rgba 颜色模式），字体粗细为 500，行高为 32px，底部外边距为 16px
    font-size: 24px;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 16px;
  }

  .description {
    // 设置描述文字的字体大小为 14px，行高为 22px，颜色为带有一定透明度的灰色（rgba 颜色模式），底部外边距为 24px
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 24px;
  }

  .extra {
    // 设置背景颜色为浅灰色（#fafafa），设置内边距，左右内边距分别为 40px，设置边框圆角为 2px，文本对齐方式改为左对齐
    background: #fafafa;
    padding: 24px 40px;
    border-radius: 2px;
    text-align: left;
  }

  .action {
    // 设置顶部外边距为 32px，可能用于与下方元素隔开一定距离，便于布局和视觉区分
    margin-top: 32px;
  }
}

.mobile {
  .result {
    // 在类名为 mobile 的父元素下，针对类名为 result 的元素设置特定样式，将宽度设置为 100%（可能用于移动端适配，占满屏幕宽度），清除默认的上下内边距（unset）
    width: 100%;
    margin: 0 auto;
    padding: unset;
  }
}
</style>