<!--
 * @Description: 顶部广告图和面包屑
 * @Author: 空白格
 * @Date: 2022-08-11 13:44:08
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-26 13:06:42
 * @FilePath: \veterans_client_web\src\components\BannerBreadcrumb\index.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="banner-breadcrumb">
    <!-- 广告图 -->
    <div class="banner-breadcrumb-header">
      <div class="banner-breadcrumb-header-title">{{ title }}</div>
    </div>
    <!-- 面包屑 -->
    <template v-if="breadcrumb">
      <div class="banner-breadcrumb-breadcrumb">
        <template v-if="isRouter">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="(item, index) in breadcrumbList"
              :key="index"
              :to="'/' + item.path"
              >{{ item.label }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </template>
        <template v-else>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "BannerBreadcrumb",
  props: {
    title: {
      type: String,
      default: "",
    },
    breadcrumb: {
      type: Boolean,
      default: true,
    },
    isRouter: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      breadcrumbList: [],
    };
  },
  mounted() {
    if (this.isRouter) {
      this.handleRouter();
    }
  },
  methods: {
    /**
     * 根据路由获取面包屑
     * @date 2022-08-25
     * @returns {any}
     */
    handleRouter() {
      let path = this.$router.currentRoute.path.slice(1),
        routerOptions = this.$router.options.routes[0].children,
        breadcrumbList = [],
        pathList,
        newPathList = [];
      if (path) {
        pathList = path.split("/").filter((item) => item && item.trim());
        newPathList.push(pathList[0]);
        for (let i = 1; i < pathList.length; i++) {
          newPathList.push(newPathList[i - 1] + "/" + pathList[i]);
        }
        newPathList.forEach((item) => {
          routerOptions.forEach((jitem) => {
            if (item === jitem.path) {
              breadcrumbList.push({
                path: jitem.path,
                label: jitem.meta.title,
              });
            }
          });
        });
        this.breadcrumbList = breadcrumbList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-breadcrumb {
  &-header {
    width: 100%;
    height: 104px;
    line-height: 104px;
    background-image: url("./../../assets/images/policy-advice-bg.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-title {
      width: 70%;
      min-width: 600px;
      margin: 0 auto;
      text-align: right;
      color: #416050;
      font-size: 30px;
    }
  }
  &-breadcrumb {
    background-color: #f5f7fa;
    :deep(.el-breadcrumb) {
      width: 70%;
      height: 64px;
      line-height: 64px;
      min-width: 600px;
      margin: 0 auto;
      font-size: 16px;
    }
    :deep(.el-breadcrumb__inner.is-link) {
      color: #7e7e7e;
      font-weight: normal;
    }
    :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
      color: #ff0000;
    }
  }
}
</style>
