<template>
 <div class="ts-crumbs rc-max-width--xl rc-padding-y--md" v-if="showTab" :style="crumbStyle">
	<el-breadcrumb separator-class="el-icon-arrow-right">
		<el-breadcrumb-item to="/" >{{ this.homepageName }}</el-breadcrumb-item>
		
		<el-breadcrumb-item :to=item.path   v-for="(item, index) in displayData"
		:key="index">{{ item.title }}</el-breadcrumb-item>
	</el-breadcrumb>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import tabs from "~/components/tabs.vue";
export default {
	props:["crumbs","crumbStyle"],
	name:"crumbs",
    data() {
		return {
			displayData:[],
			homepageName:'定制营养方案',
			nameMapping:{
				'/productdetails/productlist':'产品分类',
				'/usersearch/search':'产品搜索',
				'/personal/mypersonal':'个人中心',
				'/personal/usermember/':'会员权益',
				'/personal/integral/':'积分明细',
				'/personal/settlement/':'订单确认',
				'/personal/useraddress/':'我的订单',
				'/myorder/userrecord/':'购物车',
				'/useraddress/openaddress/':'收货地址',
				'/personal/discount/':'优惠券'
			},
		};
	},
	created(){
		if(this.showTab != false)
			this.showTab=true;
		this.build();
	},
	watch: {
		crumbs(val) {
			this.crumbs = val;
			this.build();
		}
	},
	mounted() {
	},

	methods: {
		//...mapMutations(["changemessage",'selectMenu']),
		build() {
			let _self = this;
			this.displayData=[];
			if(this.crumbs && this.crumbs.length>0)
			{
				this.crumbs.forEach(function(ele,index){
					let displayObj= {path:'',title:''};
					if(ele.path) {
						displayObj.path = ele.path;
						for(let path in _self.nameMapping) {
							if(ele.path.indexOf(path)>-1) {
								displayObj.path = path;
								displayObj.title = _self.nameMapping[path];
							}
						}
					}
					if(ele.title) {
						displayObj.title = ele.title;
					}
					_self.displayData.push(displayObj);
				});
			}
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.el-breadcrumb__inner.is-link:hover {
	color:#E2001A;
}
.ts-crumbs{
	padding-left:1.25rem;
}
</style>
