<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-09 15:53:27
 -->
<template>
  <div class="nav-wrap border-box flex flex-space-between">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <template v-for="(item, index) in navpath">
        <template v-if="!!item.path">
          <el-breadcrumb-item :key="'nav' + index" :to="{ path: item.path }" @click="changeRoute(item.path, item.relocation)">
            <span class="el-breadcrumb__inner is-link" @click="changeRoute(item.path, item.relocation)">
              {{ item.name }}
            </span>
          </el-breadcrumb-item>
        </template>
        <template v-else>
          <el-breadcrumb-item :key="'nav' + index">{{ item.name }}</el-breadcrumb-item>
        </template>
      </template>
    </el-breadcrumb>
    <div class="my-customer-brand">
      <el-tooltip class="item" effect="dark" content="不同商户的工作台可分别进行管理。点击后切换，可以管理不同商户下的应用" placement="top-start">
        <span class="font-14 color-606266" style="cursor: pointer;padding-bottom: 2px; border-bottom: 1px dashed #2F54EB;">授权商户名称 </span>
      </el-tooltip>
      <el-select class="p-l-10" v-model="activeBrand" placeholder="请选择" @change="changeSelect">
        <el-option v-for="item in brandListData" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId"> </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import fetch from '@/api/review.js';
const { getWxEnterprise } = fetch;
export default {
  name: 'NavAppPath',
  props: {
    navpath: {
      type: Array,
      default: function() {
        return [];
      }
    },
  },
  data() {
    return {
      projectName: 'haoban', // 当前项目名
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      activeBrand: '',
      brandListData: []
    };
  },
  mounted() {
    const that = this;
    that.getBrandData();
  },
  methods: {
    /**
     * @description: 路由跳转
     * @param {String} path
     * @param {String} relocation
     * @author: 无尘
     */
    changeRoute(path, relocation) {
      const that = this;
      if (relocation) {
        window.location.href = path;
      } else {
        that.$router.push(path);
      }
    },
    /**
     * @description: 选择品牌
     * @param {String} val
     * @author: 无尘
     */
    changeSelect(val) {
      const that = this;
      let enterpriseId = '';
      that.brandListData.forEach(ele => {
        if (ele.enterpriseId == val) {
          enterpriseId = ele.enterpriseId;
        }
      });
      that.$emit('selectBrandId', val, enterpriseId);
    },

    /**
     * @description: 获取品牌
     * @author: 无尘
     */
    getBrandData() {
      const that = this;
      getWxEnterprise({ wxEnterpriseId: that.wxEnterpriseId })
        .then(res => {
          if (!!res.result && !!res.result.length) {
            that.brandListData = res.result;
            if (!!that.$route.query.enterpriseId) {
              that.activeBrand = that.$route.query.enterpriseId;
              that.$emit('selectBrandId', that.$route.query.enterpriseId);
              return false;
            }
            that.activeBrand = that.brandListData[0].enterpriseId;
            // 由于门店选择组件中没有品牌id ,只有 groupId
            that.$emit('selectBrandId', that.brandListData[0].enterpriseId, that.brandListData[0].enterpriseId);
          }
        })
        .catch(function(error) {});
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      that.getBrandData();
    }
  }
};
</script>

<style type="text/less" lang="less" scoped>
.nav-wrap {
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  box-sizing: border-box;
  .el-breadcrumb {
    line-height: 48px;
  }
}

.el-breadcrumb__inner.is-link:hover,
.el-breadcrumb__inner a:hover {
  color: #2f54eb;
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  color: #303133;
}
</style>
