<template>
  <div class="bread">
    <div class="example-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="index"
          :to="item.name.includes('seeDoctor') ? item.path + '?info=' + queryList.info : item.path"
          @click.native="breadcrumbClick(item)"
        >{{ item.meta.title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      breadList: [], // 路由集合,
      userData: {},
      queryList: {}
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.userData = JSON.parse(window.localStorage.getItem('qg-userData'))
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      const matched = this.$route.matched
      // 浏览器参数点击面包屑传回给seeDoctor页面
      if (this.$route.name === 'templateManagement') {
        this.queryList = this.$route.query
      }
      matched.forEach((item, i) => {
        if (item.meta.title === '首页' && item.redirect && item.redirect.name) {
          item.name = 'outpatientManagement'
          item.path = '/outpatientManagement-call'
          item.meta.title = '首页'
        }
      })
      this.breadList = matched
    },
    breadcrumbClick(item) {
      console.log(item)
      if (item.meta.title === '首页') {
        this.$store.commit('activeIndexFun', window.SITE_CONFIG.menuList[0].id)
      }
    }
  }
}
</script>
<style scoped>
.bread  /deep/ .el-breadcrumb{
  display: inline-block;
  display: inline-block;
  height: 50px;
  vertical-align: top;
  line-height: 50px;
}
.bread /deep/ .is-link{
  font-weight: normal;
}
.bread{
  float:left;
}
</style>
