<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2018-10-10 14:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-28 11:29:23
 -->
<template>
  <div class="navwrap 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 class="mult-line-select" v-for="item in brandListData" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId">
          <p class="line-20">{{ item.enterpriseName }}</p>
          <div class="line-20 font-12 color-909399">{{ item.brandName || '--' }}</div>
        </el-option>
      </el-select> -->
      <el-popover placement="bottom" width="300" trigger="click" v-model="brandVisible">
        <div class="company-select">
          <div class="el-scrollbar define-search-select">
            <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="overflow: auto;">
              <ul class="el-scrollbar__view el-select-dropdown__list">
                <li :class="['el-select-dropdown__item ', selectBrand.enterpriseId == item.enterpriseId ? 'selected' : '']" v-for="(item, index) in brandListData" :key="index + 'search'" @click="changeSelect(item)">
                  <div class="flex flex-space-between">
                    <div style="width: 100%;">
                      <span class="block text-ellipsis line-h-20">{{ item.brandName || '--' }}</span>
                      <span class="block text-ellipsis line-h-20 font-12 color-909399">{{ item.enterpriseName || '--' }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="select-search-input cursor-pointer" slot="reference" style="display: inline-block;">
          <div>
            <div class="el-select p-l-10 el-select--large" style="width: 213px">
              <div class="el-input el-input--large el-input--suffix flex" style="display: flex">
                <div class="el-input__inner">
                  <div class="text-ellipsis select-brand max-w-260">{{ selectBrand.brandName }}</div>
                  <div class="text-ellipsis line-h-16 max-w-260 font-12 color-909399">{{ selectBrand.enterpriseName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { postRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'navpath',
  data() {
    return {
      projectName: 'haoban', // 当前项目名
      activeBrand: '',
      brandListData: [],
      selectBrand: {
        brandName: '',
        enterpriseName: ''
      },
      brandVisible: false
    };
  },
  props: {
    navpath: {
      type: Array,
      default: function() {
        return [];
      }
    },
    slotFlag: {
      type: Boolean,
      default: false
    },
    navtip: {
      type: Boolean,
      default: false
    },
    subNavText: {
      type: String,
      default: ''
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      that.getBrandData();
    }
  },
  methods: {
    changeRoute(path, relocation) {
      const that = this;
      if (relocation) {
        window.location.href = path;
      } else {
        that.$router.push(path);
      }
    },
    /**
     * 选择品牌
     */
    changeSelect(item) {
      const that = this;
      that.selectBrand = item;
      this.$store.commit('changeWxEntertype', item.wxEnterpriseType);
      that.$emit('selectBrandId', item.enterpriseId);
      that.brandVisible = false;
    },

    /**
     * 获取品牌
     */
    getBrandData() {
      const that = this;
      postRequest('/haoban-manage3-web/wx-enterprise-list', {})
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (!!resData.result && !!resData.result.length) {
              that.brandListData = resData.result;
              if (!!that.$route.query.enterpriseId) {
                that.activeBrand = that.$route.query.enterpriseId;
                that.$emit('selectBrandId', that.$route.query.enterpriseId);
                that.brandListData.forEach(ele => {
                  if (ele.enterpriseId == that.$route.query.enterpriseId) {
                    that.selectBrand = ele;
                  }
                });
                return false;
              }
              that.selectBrand = that.brandListData[0];
              that.activeBrand = that.brandListData[0].enterpriseId;
              this.$store.commit('changeWxEntertype', that.brandListData[0].wxEnterpriseType);
              // 由于门店选择组件中没有品牌id ,只有 groupId
              that.$emit('selectBrandId', that.brandListData[0].enterpriseId, that.brandListData[0].enterpriseId);
            }
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getBrandData();
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.navwrap {
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  box-sizing: border-box;
  .el-breadcrumb {
    line-height: 48px;
  }
}
.el-select-dropdown__item {
  height: 50px;
  padding: 5px 20px;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.max-w-260 {
  max-width: 260px;
}
.select-brand {
  line-height: 12px;
  padding-top: 2px;
}
.line-h-16 {
  line-height: 16px;
}
.line-h-20 {
  line-height: 20px;
}
.boxbttom {
  border-bottom: 1px solid #e4e7ed;
}
.boxshow {
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 5px -1px 5px #dfdfdf;
}
.navtitle {
  margin: 24px 0 0 0;
  font-size: 20px;
  color: #303133;
  font-weight: 500;
}
.navtip {
  width: 100%;
  height: 38px;
  line-height: 38px;
  font-size: 13px;
  border-radius: 2px;
  color: #606266;
  background-color: #f4f4f5;
}
.navmTop {
  margin-top: 25px;
}
.navtipcolor {
  margin: 0 12px;
  color: #2f54eb;
}
.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>
