<template>
	<view class="pages">
		<!-- head -->
		<view class="scrollPage-header">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="header-title">
				<view class="header-left" @click="goBack">
					<image style="width: 16px; height: 16px;margin-right:3px;" mode="aspectFit" src="../static/arrow-left.png"></image>
					<text>返回</text>
				</view>
				<view class="header-title"><text class="ellipsis-one" overflow="ellipsis">{{title}}</text></view>
				<view class="header-right"></view>
			</view>
		</view>
		<view class="search-result">
			<view class="tab-left" v-if="clzId">
				<view class="item-clz active">滤清器</view>
				<view class="item-clz">机油</view>
				<view class="item-clz">轮胎</view>
				<view class="item-clz">火花塞</view>
				<view class="item-clz">刹车片</view>
			</view>
			<view class="right-box" :style="{width:clzId?'75%':'100%'}">
				<!-- body -->
				<scroll-view 
				class="scrollPage-body" 
				:style="{height: (screenHeight - statusBarHeight - safeAreaBottom - 40) + 'px'}" 
				scroll-y="true" 
				type="custom" 
				@scrolltolower="reachBottom">
					<!-- 搜索，吸顶 -->
					<sticky-header>
						<view class="search-head">
							<uni-search-bar v-model="queryWord" radius="100" placeholder="请输入产品名称/轮胎规格" bgColor="#fff" textColor="#666" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="searchList" />
						</view>
					</sticky-header>
					<!-- 产品列表 -->
					<chooseProductItem
					v-for="(item, index) in list"
					:key="item.id"  
					:index="index"
					:list="item" 
					:edit="editChoose" 
					>
					</chooseProductItem>
					<!-- loading -->
					<view class="loading-bar" v-if="list.length && (loading||loadEnd)">{{loadText}}</view>
					<view class="empty-bar" v-if="total==0&&!loading">
						<image mode="aspectFit" :src="empty.imgUrl"></image>
						<view v-if="queryWord!=''">{{empty.tip}}</view>
					</view>
					<!-- 搜索记录 -->
					<view class="search-history" v-if="historyList.length&&queryWord==''">
						<view class="search-history-title">
							<text>搜索记录</text>
							<image @click="clearHistory" style="width: 30px; height: 30px;" mode="aspectFit" src="../static/del.png"></image>
						</view>
						<view class="search-history-body">
							<view class="item" v-for="item in historyList" :key="item.id" @click="toSearch(item)">
								<text class="ellipsis-one" max-lines="1" overflow="ellipsis">{{item.text}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import chooseProductItem from '@/pagesB/components/chooseProductItemSkline.vue'
	import { queryPromoProductByPage } from '@/api/video.js'
	export default {
		components:{
			chooseProductItem
		},
		data() {
			return {
				clzId: null,
				title: '',
				loadText: '加载中...',
				empty: {
					tip: '',
					imgUrl: '/static/nodata.png'
				},
				queryWord:'',
				screenWidth: 325,
				screenHeight: 0,
				statusBarHeight: 44,
				safeAreaBottom: 0,
				pageSize: 10,
				pageNo:1,
				total:0,
				list: [],
				loading:false,
				loadEnd: false,
				searchHistoryList: []
			};
		},
		computed: {
			historyList() {
				return this.searchHistoryList.filter(item=>item.text!='')
			}
		},
		onLoad(opts) {
			this.clzId = opts.clzId
			
			// 搜索历史
			this.searchHistoryList = uni.getStorageSync('searchHistoryList') || []
			
			if(opts.clzId==''){
				this.title = '商城商品搜索'
				this.queryWord = opts.queryWord
				this.searchList()
			}else{
				this.title = opts.clzName
			}
			// 计算区域高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.screenWidth = uni.getSystemInfoSync().windowWidth
			this.screenHeight = uni.getSystemInfoSync().windowHeight
			this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			// 清空历史记录
			clearHistory(){
				const _this = this
				uni.showModal({
					title: '提示',
					content: '确定清空搜索历史？',
					confirmText: '确定',
					success(res) {
						if(res.confirm){
							_this.searchHistoryList = []
							uni.setStorageSync('searchHistoryList', _this.searchHistoryList)
						}
					}
				})
			},
			// 选择搜索记录
			toSearch(item){
				this.queryWord = item.text
				this.searchList()
			},
			// 搜索列表
			searchList(event) {
				 //  存储搜索记录
				 const has = this.searchHistoryList.some(k => k.text == this.queryWord)
				 if(!has && this.queryWord!=''){
					 this.searchHistoryList.push({
						 id: new Date().getTime(),
						 text: this.queryWord
					 })
					 uni.setStorageSync('searchHistoryList', this.searchHistoryList)
				 }
				 
				 this.loadEnd = false
				 this.loadText = '加载中...'
				 this.list = []
				 this.pageNo = 1
				 this.getList()
			},
			// 滚动到底部
			reachBottom() {
				if(!this.loading && !this.loadEnd){
					this.pageNo++
					this.getList()
				}
			},
			// 列表查询
			getList(){
				this.loading = true
				queryPromoProductByPage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					queryWord: this.queryWord,
					promoActiveSn: '693459699332595712'
				}).then(res => {
					this.loading = false
					if(res.status == 200){
						this.total = res.data.count
						if(this.total){
							const list = res.data.list || []
							const ret = []
							// 更新已选状态
							list.forEach(k => {
							  ret.push({
								  id: k.id,
								  cost: k.cost,
								  productCode: k.productCode,
								  productSn: k.productSn,
								  productImage: k.productImage,
								  productName: k.productName,
								  productOrigCode: k.productOrigCode,
								  promoActiveSn: k.promoActiveSn,
								  promoRuleSn: k.promoRuleSn,
								  promoRuleValue: k.promoRuleValue,
								  promoRuleType: k.promoRuleType,
							  })
							})
							// 追加数据
							this.list.push(ret)
							// 判断是否最后一页
							const maxPages = Math.ceil(this.total / this.pageSize)
							if(this.pageNo >= maxPages){
								this.loadEnd = true
								this.loadText = '没有更多了'
							}
						}else{
							this.loadEnd = false
							this.loadText = '没有找到相关产品'
						}
					}else{
						this.loadEnd = false
						this.loadText = res.message
					}
				}).catch(err => {
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	display: flex;
	flex-direction: column;
	.scrollPage-header{
		z-index: 1;
		.header-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			height: 44px;
			background-color: #FFFFFF;
			box-shadow: 0px 1px 0px 0px #E6E6E6;
			.header-title{
				font-size: 16px;
				color: #333333;
				max-width: 70%;
			}
			.header-left{
				display: flex;
				align-items: center;
				text{
					font-size: 14px;
					color: #333333;
					margin-left: 5px;
				}
			}
			.header-right{
				width: 50px;
			}
		}
	}
	.search-result{
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		.tab-left{
			width: 25%;
			flex-grow: 1;
			background: #FFFFFF;
			.item-clz{
				font-size: 14px;
				padding: 8px 10px;
				line-height: 30px;
			}
			.active{
				border-left: 3px solid #00aaff;
				background: #f8f8f8;
			}
		}
		.right-box{
			width: 75%;
			.scrollPage-body{
				width:100%;
				.search-head input{
					background-color: #FFFFFF;
				}
				.loading-bar{
					text-align: center;
					padding: 10px 0;
					color: #999999;
				}
				.empty-bar{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 20px 0;
					image{
						width: 100px;
						height: 100px;
					}
					view{
						font-size: 12px;
						color: #999999;
					}
				}
				.search-history{
					padding: 0 1.5rem;
					.search-history-title{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 6px 0;
						font-size: 14px;
						color: #333333;
						border-bottom: 1px solid #E6E6E6;
					}
					.search-history-body{
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						justify-content: space-between;
						padding: 10px 10px;
						.item{
							padding: 6px 0;
							background-color: #f8f8f8;
							border-radius: 20px;
							font-size: 12px;
							color: #333333;
							width: 46%;
						}
					}
				}
			}
		}
	}
}
</style>
