<template>
  <div class="breadcrumb-wrapper">
    <div class="title">当前位置：</div>
    <div class="breadcrumb-box" @click.self="handleClickBreadCrumbSelf">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="(item, index) in breadCrumbList"
          :key="index"
          :to="getRouteQuery(item)"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  name: "BreadCrumb",
  props: {
    // 文件类型
    fileType: {
      required: true,
      type: Number,
    },
    // 文件路径
    filePath: {
      require: true,
      type: String,
    },
  },
  data() {
    return {
      inputFilePath: "", //  路径输入
      breadCrumbList: [],
    };
  },
  watch: {
    $route(value) {
      const { filePath } = value.query;
      let filePathList = filePath ? filePath.split("/") : [];
      let res = []; //  返回结果数组
      let _path = []; //  存放祖先路径
      for (let i = 0; i < filePathList.length; i++) {
        if (filePathList[i]) {
          _path.push(filePathList[i]);
          res.push({
            path: _path.join("/"),
            name: filePathList[i],
          });
        } else if (i === 0) {
          //  根目录
          filePathList[i] = "";
          _path.push(filePathList[i]);
        }
      }
      this.breadCrumbList = res;
    },
  },
  methods: {
    /**
     * 点击面包屑导航栏空白处
     */
    handleClickBreadCrumbSelf() {
      this.inputFilePath = this.filePath;
    },
    /**
     * 路径输入框失去焦点或用户按下回车时触发
     */
    handleInputBlurEnter() {
      if (this.inputFilePath !== this.filePath) {
        const fixInputFilePath = this.inputFilePath.endsWith("/")
          ? this.inputFilePath.slice(0, -1)
          : this.inputFilePath;
        this.$router.push({
          query: { filePath: `${fixInputFilePath}`, fileType: 0 },
        });
      }
    },
    // 获取文件参数
    getRouteQuery(item) {
      return {
        query: { filePath: item.path, fileType: this.$route.query.fileType },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/varibles.scss";

.breadcrumb-wrapper {
  padding: 0;
  height: 30px;
  line-height: 30px;
  display: flex;

  .title,
  ::v-deep .el-breadcrumb {
    height: 30px;
    line-height: 30px;
  }

  .file-path-input {
    flex: 1;
    font-size: 14px;
  }
  .breadcrumb-box {
    padding: 0 8px;
    flex: 1;
    display: flex;
    &.able-input {
      cursor: pointer;
      &:hover {
        background: $tabBackColor;
      }
    }
  }
}
</style>
