<template>
  <!-- 模板部分，定义了组件的HTML结构 -->
  <div class="exception">
    <div class="imgBlock">
      <!-- 图片区域 -->
      <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
      </div>
    </div>
    <div class="content">
      <!-- 内容区域 -->
      <h1>{{ config[type].title }}</h1> <!-- 异常标题 -->
      <div class="desc">{{ config[type].desc }}</div> <!-- 异常描述 -->
      <div class="actions">
        <a-button type="primary" @click="handleToHome">返回首页</a-button> <!-- 返回首页按钮 -->
      </div>
    </div>
  </div>
</template>

<script>
import types from './type' // 导入类型定义，可能包含不同异常类型的配置

export default {
  name: 'Exception', // 组件名称
  props: {
    type: {
      type: String, // prop类型为字符串
      default: '404' // 默认值为'404'
    }
    data () {
      return {
        config: types // 返回类型定义，用于渲染异常信息
      }
    },
    methods: {
      handleToHome () { // 返回首页的方法
        this.$router.push({ name: 'dashboard' }) // 使用Vue Router跳转到dashboard路由
      }
    }
</script>

<style lang="less">
@import "~ant-design-vue/lib/style/index"; // 导入Ant Design Vue的样式

.exception {
  display: flex; // 使用flex布局
  align-items: center; // 垂直居中对齐
  height: 80%; // 高度为视口的80%
  min-height: 500px; // 最小高度为500px

  .imgBlock {
    flex: 0 0 62.5%; // 图片区域占据62.5%
    width: 62.5%; // 宽度为62.5%
    padding-right: 152px; // 右边距为152px
    zoom: 1; // 图片放大为1
    &::before,
    &::after {
      content: ' '; // 伪元素内容为空
      display: table; // 伪元素显示为表格
    }
    &::after {
      clear: both; // 清除浮动
      height: 0; // 高度为0
      font-size: 0; // 字体大小为0
      visibility: hidden; // 隐藏伪元素
    }
  }

  .imgEle {
    float: right; // 图片浮动到右侧
    width: 100%; // 宽度为100%
    max-width: 430px; // 最大宽度为430px
    height: 360px; // 高度为360px
    background-repeat: no-repeat; // 背景不重复
    background-position: 50% 50%; // 背景位置在中心
    background-size: contain; // 背景大小包含整个元素
  }

  .content {
    flex: auto; // 内容区域flex增长

    h1 {
      margin-bottom: 24px; // 底部外边距为24px
      color: #434e59; // 字体颜色
      font-weight: 600; // 字体加粗
      font-size: 72px; // 字体大小为72px
      line-height: 72px; // 行高为72px
    }

    .desc {
      margin-bottom: 16px; // 底部外边距为16px
      color: @text-color-secondary; // 字体颜色为次要文字颜色
      font-size: 20px; // 字体大小为20px
      line-height: 28px; // 行高为28px
    }

    .actions {
      button:not(:last-child) {
        margin-right: 8px; // 除了最后一个按钮，其他按钮右边距为8px
      }
    }
  }
</style>