<template>
	<div>
		<div class="m-bread">
			<div class="line">
				<div class="line-left"></div>
				<div class="line-right"></div>
			</div>
			<div class="bread">
				<el-breadcrumb :separator="separator">
					<el-breadcrumb-item v-for="(item, index) in breadList" :key="'b' + index">
						<span class="bread-span" @click="handleClickItem(item)">{{ item.meta.title }}</span>
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="line">
				<div class="line-left"></div>
				<div class="line-right"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "bread",
		components: {},
		props: {
			//分隔符
			separator: {
				type: String,
				default: "/",
			},
			//面包屑列表
			breadList: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		data() {
			return {
				pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
				pageNo: 1,
			};
		},
		watch: {},
		computed: {
			...mapGetters(["clientHeight", "iframeHeight"]),
		},
		mounted() {},
		created() {},
		methods: {
			handleClickItem(item) {
				this.$emit("tap", {
					item
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.m-bread {
		padding: 0 0 15px 0;

		.bread {
			margin: 4px 0;
			padding: 8px 16px;
			height: 40px;
			background: rgba(26, 149, 255, 0.15);
			width: 100%;

			/deep/ .el-breadcrumb__item {
				line-height: 25px;
				font-size: 14px;
			}

			/deep/ .el-breadcrumb__item .el-breadcrumb__inner {
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}

			/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner {
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.65);
			}

			/deep/ .bread-span {
				cursor: pointer;
			}

			.router_parents {
				line-height: 25px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.65);

				.arrow {
					padding: 0 5px;
				}
			}

			.router_parents:hover {
				cursor: pointer;
			}

			.router_child {
				line-height: 25px;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.line {
			display: flex;
			width: 100%;

			.line-left {
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: 16px;
				height: 1px;
				background: #1a95ff;
			}

			.line-right {
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 0px;
				height: 1px;
				background: rgba(26, 149, 255, 0.45);
			}
		}
	}
</style>
