<template>
	<div class="title">
		<div class="title-name" @click="handleTitle(orderData)">
			<slot>
			</slot>
		</div>
		<!-- <div class="title-icon" @click="handleMore">
			<div :class="[isActive ? 'moreActive' : 'more']" @click="openMore(orderData)">
					<span>全部企业</span>
			</div>
		</div> -->

	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			orderData: {
				type: Object
			},
			hierarchy: {
				type: Number
			},
			lowerType: {
				type: Boolean
			},
		},
		data() {
			return {
				isActive: false
			}
		},
		methods: {
			handleTitle(val) {
				if(!this.lowerType){
					return
				}
				
				window.localStorage.setItem("indexData", JSON.stringify(val));
				if (this.hierarchy == 1) {
					window.localStorage.setItem("firstPageName", JSON.stringify(val));
					this.$router.push({
						name: 'firstLevelPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 2) {
					window.localStorage.setItem("secondPageName", JSON.stringify(val));
					this.$router.push({
						name: 'secondLevelPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 3) {
					window.localStorage.setItem("thirdPageName", JSON.stringify(val));
					this.$router.push({
						name: 'thirdLevelPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 4) {
					window.localStorage.setItem("fourthPageName", JSON.stringify(val));
					this.$router.push({
						name: 'fourthLevelPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				}

			},
			handleMore() {
				this.isActive = !this.isActive;
			},
			openMore(val) {
				this.isActive = false
				// this.$refs.echartsDialog.add(val)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}

	@-webkit-keyframes breath {
		from {
			opacity: 0.1;
		}

		50% {
			opacity: 1;
		}

		to {
			opacity: 0.1;
		}
	}


	.title {
		width: 100%;
		height: 32px;
		display: flex;
		justify-content: space-between;
		text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
		position: relative;
		background: url('~@/assets/img/title-bg.png') center / 100% 100% no-repeat;

		.title-name {
			font-size: 19px;
			font-family: Alimama ShuHeiTi;
			font-weight: bold;
			font-style: italic;
			color: #cfdfec;
			margin-left: 15px;
			cursor: pointer;
		}

		.title-name:hover {
			color: #02F5F2;
		}


	}
</style>
