<template>
	<div>
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--bread 面包屑-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<a href="#">全部结果</a>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<!-- 分类面包屑 -->
						<li class="with-x" v-if="this.Objectname.categoryName">{{ this.Objectname.categoryName }}<i @click="removecategoryName">x</i></li>
						<!-- 关键字 -->
						<li class="with-x" v-if="this.Objectname.keyword">{{ this.Objectname.keyword }}<i @click="removekeyword">x</i></li>
						<!-- 品牌信息面包屑 -->
						<li class="with-x" v-if="this.Objectname.trademark">{{ this.Objectname.trademark.split(':')[1] }}<i @click="removepinpaixinxi">x</i></li>
						<!-- 平台售卖属性面包屑 -->

						<li class="with-x" v-for="(item, index) in this.Objectname.props" :key="item">{{ item.split(':')[1] }}<i @click="removeprops(index)">x</i></li>
					</ul>
				</div>

				<!--selector-->
				<SearchSelector @tdnamechange="childrenchange" @propschange="propschange" />

				<!--details -->
				<div class="details clearfix">
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<!-- 价格 -->
							<ul class="sui-nav">
								<li :class="{ active: isshowOne }" @click="updownchange(1)">
									<a
										>综合
										<!-- v-show的原因是只有在综合下才出来 -->
										<span
											v-show="isshowOne"
											class="iconfont"
											:class="{
												'icon-run-up': siShowasc,
												'icon-run-in': siShowdesc
											}"
										></span>
									</a>
								</li>
								<li :class="{ active: isshowTwo }" @click="updownchange(2)">
									<a
										>价格<span
											v-show="isshowTwo"
											class="iconfont"
											:class="{
												'icon-run-up': siShowasc,
												'icon-run-in': siShowdesc
											}"
										></span
									></a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 产品 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="item in goodsList" :key="item.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link :to="`/detail/${item.id}`"><img v-lazy="item.defaultImg" /></router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i> {{ item.price }}</i>
										</strong>
									</div>
									<div class="attr">
										<a target="_blank" href="item.html" title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">{{ item.title }}</a>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
									<div class="operate">
										<a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
										<a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- 分页 -->
					<Pagination :pageNo="Objectname.pageNo" :pagesize="Objectname.pageSize" :total="goodlisttotal" :continues="5" @pagechangelist="pagechangelist"></Pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchSelector from './SearchSelector/SearchSelector'
import { mapGetters, mapState } from 'vuex'
export default {
	name: 'Search',
	components: {
		SearchSelector
	},
	data() {
		return {
			Objectname: {
				// 一级分类
				category1Id: '',
				// 二级分类
				category2Id: '',
				// 三级分类
				category3Id: '',
				// 分类名字
				categoryName: '',
				// 关键字
				keyword: '',
				// 排序 默认是综合+降序
				order: '1:desc',
				// 第一页
				pageNo: 1,
				// 每页数量
				pageSize: 10,
				// 平台售卖属性操作带的参数
				props: [],
				// 品牌
				trademark: ''
			}
		}
	},
	// 请求ajax之前更新最新的data
	//
	beforeMount() {
		// Object.assign新增语法
		// 将后两个对象合并到第一个对象 返回第一个对象
		Object.assign(this.Objectname, this.$route.query, this.$route.params)
	},
	mounted() {
		this.getsearchlist()
	},
	// getters不分仓库 是共用的 用数组接收
	computed: {
		...mapState({
			goodlisttotal: (state) => {
				return state.search.searchlist.total
			}
		}),
		...mapGetters(['goodsList']),
		// 1 综合 2 价格
		isshowOne() {
			// indexOf判断是否包含这个值 -1没找到 >0找到 这里找到的就返回true
			return this.Objectname.order.indexOf('1') != -1
		},
		isshowTwo() {
			return this.Objectname.order.indexOf('2') != -1
		},
		//asc升序 desc降序
		siShowasc() {
			return this.Objectname.order.indexOf('asc') != -1
		},
		siShowdesc() {
			return this.Objectname.order.indexOf('desc') != -1
		}
	},
	methods: {
		// 封装ajax请求为一个方法
		getsearchlist() {
			this.$store.dispatch('getsearchlist', this.Objectname)
			// 每一次获取查询数据 都会清空掉parmas关键字参数
			// this.$route.params.keyword=""
		},
		// 删除分类面包屑 (显示默认数据 但是不删除params参数)
		removecategoryName() {
			// 清除面包屑之后,展示默认数据
			// 带给服务器参数说明可有可无的，如果属性值为空的字符串还是会把相应的字段带给服务器
			// 但是把相应的字段改为underfind,当前字段不会带给服务器
			// 能够减轻服务器的压力
			this.Objectname.trademark = undefined
			this.Objectname.categoryName = undefined
			this.Objectname.category1Id = undefined
			this.Objectname.category2Id = undefined
			this.Objectname.category3Id = undefined
			this.getsearchlist()
			// 清空路由参数
			// 清空的是query参数,不是parmas参数
			console.log('params参数是', this.$route.params)
			if (this.$route.params) {
				this.$router.push({ name: 'search', params: this.$route.params })
			} else {
				this.$router.push({ name: 'search' })
			}
		},
		// 删除关键字面包屑   (不删除query数据 显示query的数据)
		removekeyword() {
			this.Objectname.props = undefined
			this.Objectname.trademark = undefined
			this.Objectname.keyword = undefined
			this.getsearchlist()
			// 当面包屑的关键字清除以后,需要让兄弟Header组件中的关键字消除
			// 通知Header兄弟组件删除
			this.$bus.$emit('clear')
			// 清空路由参数
			if (this.$route.query) {
				this.$router.push({ name: 'search', query: this.$route.query })
			} else {
				// 什么都没就展示默认数据
				this.$route.push({ name: 'search' })
			}
		},
		// 清除品牌信息面包屑
		removepinpaixinxi() {
			this.Objectname.props = undefined
			this.Objectname.trademark = undefined
			this.getsearchlist()
		},
		removeprops(index) {
			// 数组
			// 根据索引来删除数组中对应的值
			this.Objectname.props.splice(index, 1)
			this.getsearchlist()
		},
		// 接收来自子组件的数据，品牌信息获取数据
		childrenchange(e) {
			this.Objectname.trademark = e.tmId + ':' + e.tmName
			this.getsearchlist()
		},
		// 接收来自子组件的 售卖属性信息
		propschange(a, b, c) {
			console.log(a, b, c)
			let objprops = a + ':' + b + ':' + c
			// push的主要用处是能够让项目展示多条面包屑
			// 数组查重 等于-1没重复值 1有重复值
			if (this.Objectname.props.indexOf(objprops) == -1) {
				this.Objectname.props.push(objprops)
			}

			console.log(this.Objectname.props)
			// this.getsearchlist()
		},

		updownchange(flag) {
			// flag-1综合 2-价格 (区分每次用户点击的是哪个按钮)
			// 获取order初始状态 通过初始状态进行判断接下来做什么
			let orginOrder = this.Objectname.order.split(':')[0]
			let orginFlag = this.Objectname.order.split(':')[1]
			// 新的排序方式
			let newArr = []
			// 用户点击的跟初始状态一致
			if (flag == orginOrder) {
				// 通过三目运算法 一开始选中的是desc(就切换为asc) asc(转换为desc)
				newArr = `${flag}:${orginFlag == 'desc' ? 'asc' : 'desc'}`
			} else {
				// 用户点击其他按钮  默认向下
				newArr = `${flag}:${'desc'}`
			}
			this.Objectname.order = newArr
			this.getsearchlist()
		},
		// 接收分页器当前点击的page
		pagechangelist(page) {
			console.log(page)
			this.Objectname.pageNo = page
			this.getsearchlist()
		}
	},
	// 通过watch监听组件$route属性的params和query 一旦发生变化就执行下方语句  (处理搜索框关键字问题以及左侧商品分类的跳转问题)
	watch: {
		$route: {
			handler(newValue, oldValue) {
				// 能够获取到最新的路由参数,合并到Objectname中
				Object.assign(this.Objectname, this.$route.query, this.$route.params)
				// 进行ajax请求数据
				this.getsearchlist()
				//分类名字与关键字不用清理:因为每一次路由发生变化的时候，都会给他赋予新的数据
				this.Objectname.category1Id = ''
				this.Objectname.category2Id = ''
				this.Objectname.category3Id = ''
			},
			deep: true
		}
	}
}
</script>

<style lang="less" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px 15px;
								color: #777;
								text-decoration: none;
							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;

									i {
										margin-left: -5px;
									}
								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}

			.page {
				width: 733px;
				height: 66px;
				overflow: hidden;
				float: right;

				.sui-pagination {
					margin: 18px 0;

					ul {
						margin-left: 0;
						margin-bottom: 0;
						vertical-align: middle;
						width: 490px;
						float: left;

						li {
							line-height: 18px;
							display: inline-block;

							a {
								position: relative;
								float: left;
								line-height: 18px;
								text-decoration: none;
								background-color: #fff;
								border: 1px solid #e0e9ee;
								margin-left: -1px;
								font-size: 14px;
								padding: 9px 18px;
								color: #333;
							}

							&.active {
								a {
									background-color: #fff;
									color: #e1251b;
									border-color: #fff;
									cursor: default;
								}
							}

							&.prev {
								a {
									background-color: #fafafa;
								}
							}

							&.disabled {
								a {
									color: #999;
									cursor: default;
								}
							}

							&.dotted {
								span {
									margin-left: -1px;
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									font-size: 14px;
									border: 0;
									padding: 9px 18px;
									color: #333;
								}
							}

							&.next {
								a {
									background-color: #fafafa;
								}
							}
						}
					}

					div {
						color: #333;
						font-size: 14px;
						float: right;
						width: 241px;
					}
				}
			}
		}
	}
}
</style>
