<template>
	<div class="title">
		<div class="title-name" @click="handleTitle(orderData)">
			<slot>
			</slot>
		</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 (val.lowerType === 0) {
					return
				}
				window.localStorage.setItem("indexData", JSON.stringify(val));
				if (this.hierarchy == 1) {
					window.localStorage.setItem("fundfirstPageName", JSON.stringify(val));
					this.$router.push({
						name: 'fundFirstPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 2) {
					window.localStorage.setItem("fundsecondPageName", JSON.stringify(val));
					this.$router.push({
						name: 'fundSecondPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 3) {
					window.localStorage.setItem("fundthirdPageName", JSON.stringify(val));
					this.$router.push({
						name: 'fundThirdPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				} else if (this.hierarchy == 4) {
					window.localStorage.setItem("fundfourthPageName", JSON.stringify(val));
					this.$router.push({
						name: 'fundFourthPage',
						params: {
							targetId: val.targetId,
							name: val.targetName
						}
					})
				}
			},
		}
	}
</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>