<template>
	<!-- 商品分类导航 -->
	<div class="type-nav">
		<div class="container">
			<div @mouseleave="leave" @mouseenter="enter">
				<h2 class="all">全部商品分类</h2>
				<!-- 三级联动 -->
				<transition name="sort">
					<div class="sort" v-show="isShow">
						<div class="all-sort-list2" @click="goSearch">
							<div class="item" v-for="(a, aaaaa) in categoryList" :key="a.categoryId">
								<h3 @mouseover="mouse(aaaaa)" :class="{ cur: currentindex == aaaaa }">
									<a :data-categoryName="a.categoryName" :data-category1Id="a.categoryId">{{ a.categoryName }}</a>
								</h3>
								<div class="item-list clearfix" :style="{ display: currentindex == aaaaa ? 'block' : 'none' }">
									<div class="subitem" v-for="(b, bbbb) in a.categoryChild" :key="b.categoryId">
										<dl class="fore">
											<dt>
												<a :data-categoryName="b.categoryName" :data-category2Id="b.categoryId">{{ b.categoryName }}</a>
											</dt>
											<dd>
												<em v-for="(c, ccc) in b.categoryChild" :key="c.categoryId">
													<a :data-categoryName="c.categoryName" :data-category3Id="c.categoryId">{{ c.categoryName }}</a>
												</em>
											</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</transition>
			</div>

			<nav class="nav">
				<a href="###">服装城</a>
				<a href="###">美妆馆</a>
				<a href="###">尚品汇超市</a>
				<a href="###">全球购</a>
				<a href="###">闪购</a>
				<a href="###">团购</a>
				<a href="###">有趣</a>
				<a href="###">秒杀</a>
			</nav>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import throttle from 'lodash/throttle'

export default {
	name: 'TypeNav',
	// 当页面DOM挂载完成之后。请求服务器
	mounted() {
		if (this.$route.path != '/home') {
			this.isShow = false
		}
	},
	data() {
		return {
			currentindex: -1,
			isShow: true
		}
	},
	methods: {
		mouse: throttle(function (index) {
			this.currentindex = index
			// console.log(index);
		}, 50),
		// 鼠标离开事件
		leave(index) {
			this.currentindex = -1
			if (this.$route.path != '/home') {
				this.isShow = false
			}
		},
		// 鼠标经过事件
		enter() {
			if (this.$route.path != '/home') {
				this.isShow = true
			}
		},
		goSearch(event) {
			// 通过event.target.dataset获取到标签的所有属性 categoryname...这些是用户的自定义属性
			const categoryname = event.target.dataset.categoryname
			const category1id = event.target.dataset.category1id
			const category2id = event.target.dataset.category2id
			const category3id = event.target.dataset.category3id
			// 通过categoryname识别是a标签
			if (categoryname) {
				let location = { name: 'search' }
				let query = { categoryName: categoryname } //query需要传categoryname和category1Id
				// 通过category1id，category2id，category3id识别是哪一级联动
				if (category1id) {
					query.category1Id = category1id
				} else if (category2id) {
					query.category2Id = category2id
				} else {
					query.category3Id = category3id
				}
				location.query = query
				// this.Router.push({name:"search",query:{k:this.keyword.toUpperCase()}})
				console.log(location)
				if (this.$route.params) {
					location.params = this.$route.params
					this.$router.push(location)
				}
			}
		}
	},
	computed: {
		...mapState({
			// 右侧是一个函数,当使用这个计算属性的时候，右侧函数会立即执行
			// 注入一个state参数.是大仓库中的数据
			categoryList: (state) => {
				// console.log(state); //home,search
				return state.home.categoryList
			}
		})
	}
}
</script>

<style lang="less" scoped>
.cur {
	background-color: red;
}
.type-nav {
	border-bottom: 2px solid #e1251b;

	.container {
		width: 1200px;
		margin: 0 auto;
		display: flex;
		position: relative;

		.all {
			width: 210px;
			height: 45px;
			background-color: #e1251b;
			line-height: 45px;
			text-align: center;
			color: #fff;
			font-size: 14px;
			font-weight: bold;
		}

		.nav {
			a {
				height: 45px;
				margin: 0 22px;
				line-height: 45px;
				font-size: 16px;
				color: #333;
			}
		}

		.sort {
			position: absolute;
			left: 0;
			top: 45px;
			width: 210px;
			height: 461px;
			position: absolute;
			background: #fafafa;
			z-index: 999;

			.all-sort-list2 {
				.item {
					h3 {
						line-height: 30px;
						font-size: 14px;
						font-weight: 400;
						overflow: hidden;
						padding: 0 20px;
						margin: 0;

						a {
							color: #333;
						}
					}

					.item-list {
						display: none;
						position: absolute;
						width: 734px;
						min-height: 460px;
						_height: 200px;
						background: #f7f7f7;
						left: 210px;
						border: 1px solid #ddd;
						top: 0;
						z-index: 9999 !important;

						.subitem {
							float: left;
							width: 650px;
							padding: 0 4px 0 8px;

							dl {
								border-top: 1px solid #eee;
								padding: 6px 0;
								overflow: hidden;
								zoom: 1;

								&.fore {
									border-top: 0;
								}

								dt {
									float: left;
									width: 54px;
									line-height: 22px;
									text-align: right;
									padding: 3px 6px 0 0;
									font-weight: 700;
								}

								dd {
									float: left;
									width: 415px;
									padding: 3px 0 0;
									overflow: hidden;

									em {
										float: left;
										height: 14px;
										line-height: 14px;
										padding: 0 8px;
										margin-top: 5px;
										border-left: 1px solid #ccc;
									}
								}
							}
						}
					}

					&:hover {
						.item-list {
							// display: block;
						}
					}
				}
			}
		}

		// 过渡动画样式
		// 一开始的状态(刚进入)
		.sort-enter {
			// 一开始的高度是0px
			height: 0px;
			transform: rotate(0deg);
		}
		// 进入后的动态(过渡动画结束)
		.sort-enter-to {
			// 商品分类原来的高度
			height: 461px;
			// transform: rotate(360deg);
		}
		// 定义动画时间，速率
		.sort-enter-active {
			transition: all 0.4s linear;
			// transition: all .5s ease;
		}

		// 离开后的动画(将enter改成leave即可)
	}
}
</style>
