<template>
	<view class="modal-box">
		<view class="searchBox">
			<view class="searchBox_l">
				<u-search
					placeholder="请输入产品编码/产品名称"
					@change="getSearchCon"
					@search="getSearchCon"
					@custom="getSearchCon"
					@clear="clearSearch"
					v-model="keyword"
					bg-color="#fff"
					:action-style="searchStyle"
				></u-search>
			</view>
			<view class="searchBox_r" @click="sortShow = true">
				<text>排序</text>
				<u-icon color="#666666" name="paixu" custom-prefix="iscm-icon"></u-icon>
			</view>
		</view>
		<view v-if="list.length > 0">
			<view class="listBox" v-for="(item, i) in list" :key="i">
				<view class="listBox_l"><image :src="item.images ? item.images : `../../static/${theme}/def_img@2x.png`" width="100%" height="100%"></image></view>
				<view class="listBox_r">
					<view class="type">{{ item.productCode }}</view>
					<view class="tit">{{ item.productName }}i</view>
					<view class="bot u-flex u-row-between">
						<view>
							适配有货
							<text>{{ item.inStockCount || 0 }}</text>
							次
						</view>
						<view>
							适配无货
							<text>{{ item.notStockCount || 0 }}</text>
							次
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 20rpx 0;"><u-loadmore :status="status" /></view>
		</view>

		<view v-else class="emptyStyle"><u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="150" text="暂无匹配产品" mode="list"></u-empty></view>

		<!-- 排序弹窗 -->
		<u-popup v-model="sortShow" mode="right" width="60%">
			<view class="sortPopup">
				<view class="sortList" v-for="(item, i) in sortList" :key="i" :class="isSortFlag == i ? 'sortChecked' : ''" @click="chooseSort(i)">{{ item.name }}</view>
				<view class="butBox u-flex u-row-between">
					<u-button hover-class="none" shape="circle" size="medium" @click="reset">重置</u-button>
					<u-button hover-class="none" :custom-style="customBtnStyle"  shape="circle" size="medium" @click="handelSort">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { reportPage } from '@/api/vinLog';
export default {
	data() {
		return {
			searchStyle: {
				border: '1rpx solid #189Dff',
				marginRight: '10rpx',
				borderRadius: '26rpx',
				color: '#189Dff',
				fontSize: '26rpx',
				padding: '4rpx 10rpx'
			},
			sortShow: false,
			keyword: '',
			sortList: [
				{
					id: 1,
					name: '最近一次VIN扫描时间降序'
				},
				{
					id: 2,
					name: '适配有货降序'
				},
				{
					id: 3,
					name: '适配无货降序'
				}
			],
			isSortFlag: 0,
			list: [],
			shelfSn: '',
			pageNo: 1,
			pageSize: 10,
			noDataText: '暂无数据',
			status: 'loading',
			totalNum: 0,
			total: 0,
			theme:'',
			customBtnStyle: {  //  自定义按钮样式
				borderColor: this.$config('primaryColor'),
				backgroundColor: this.$config('primaryColor'),
				color: '#fff'
			}
		};
	},
	onLoad(options) {
		this.theme = getApp().globalData.theme;
		this.shelfSn = options.shelfSn;
		let ajaxData = {
			pageNo: this.pageNo,
			pageSize: this.pageSize,
			shelfSn: this.shelfSn
		};
		this.loadData(ajaxData);
		uni.setNavigationBarTitle({
			title: options.shelfName
		});
	},
	onBackPress(e) {
		if (this.sortShow) {
			this.sortShow = false;
			this.isSortFlag = 0;
			return true;
		}
	},
	methods: {
		// 获取数字货架列表
		loadData(params) {
			const _this = this;
			_this.status = 'loading';
			reportPage(params).then(res => {
				if (res.status == 200) {
					if (this.pageNo > 1) {
						this.list = this.list.concat(res.data.list || []);
					} else {
						this.list = res.data.list || [];
					}
					this.totalNum = res.data.count || 0;
				} else {
					this.list = [];
					this.totalNum = 0;
					this.noDataText = res.message;
				}
				this.status = 'loadmore';
			});
		},
		chooseSort(i) {
			this.isSortFlag = i;
		},
		reset() {
			this.isSortFlag = 0;
			let ajaxData = {
				pageNo: 1,
				pageSize: this.pageSize,
				shelfSn: this.shelfSn
			};
			this.loadData(ajaxData);
		},
		// 搜索
		getSearchCon() {
			var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
			var ajaxData = null;
			if (reg.test(this.keyword)) {
				//包含汉字
				ajaxData = {
					pageNo: 1,
					pageSize: this.pageSize,
					shelfSn: this.shelfSn,
					productName: this.keyword.trim()
				};
			} else {
				ajaxData = {
					pageNo: 1,
					pageSize: this.pageSize,
					shelfSn: this.shelfSn,
					productCode: this.keyword.trim()
				};
			}
			this.loadData(ajaxData);
		},
		// 清空搜索内容
		clearSearch() {
			this.keyword = '';
			this.reset();
		},
		handelSort() {
			this.pageNo = 1;
			var ajaxData = {
				shelfSn: this.shelfSn,
				pageNo: 1,
				pageSize: this.pageSize
			};
			if (this.keyword) {
				var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
				if (reg.test(this.keyword)) {
					ajaxData.productName=this.keyword.trim();
				}else{
					ajaxData.productCode=this.keyword.trim();
				}
			}
			if (this.isSortFlag == 0) {
				ajaxData.orderBy = 'xvfp.scan_vin_date desc,xp.code asc';
			} else if (this.isSortFlag == 1) {
				ajaxData.orderBy = 'xvfp.in_stock_count desc,xp.code asc';
			} else {
				ajaxData.orderBy = 'xvfp.not_stock_count desc,xp.code asc';
			}
			this.sortShow = false;
			this.loadData(ajaxData);
		}
	},
	//到底部加载更多
	onReachBottom() {
		if (this.list.length < this.totalNum) {
			this.pageNo += 1;
			var ajaxData = {
				shelfSn: this.shelfSn,
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			if (this.keyword) {
				var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
				if (reg.test(this.keyword)) {
					ajaxData.productName=this.keyword.trim();
				}else{
					ajaxData.productCode=this.keyword.trim();
				}
			}
			if (this.isSortFlag == 0) {
				ajaxData.orderBy = 'xvfp.scan_vin_date desc,xp.code asc';
			} else if (this.isSortFlag == 1) {
				ajaxData.orderBy = 'xvfp.in_stock_count desc,xp.code asc';
			} else {
				ajaxData.orderBy = 'xvfp.not_stock_count desc,xp.code asc';
			}
			this.loadData(ajaxData);
		} else {
			this.status = 'nomore';
		}
	}
};
</script>

<style lang="less" scoped>
.modal-box {
	background: #ffffff;
	padding: 20rpx;
	width: 100%;
	.searchBox {
		width: 100%;
		display: flex;
		align-items: center;
		.searchBox_l {
			width: 80%;
			border: 1rpx solid #e0e0e0;
			border-radius: 36rpx;
			box-sizing: border-box;
		}
		.searchBox_r {
			width: 19%;
			color: #666666;
			text-align: right;
			text {
				margin-right: 10rpx;
			}
		}
	}
	.listBox {
		width: 100%;
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #e0e0e0;
		.listBox_l {
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			border-radius: 20rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.listBox_r {
			width: calc(100% - 170rpx);
			.type {
				color: #222;
				font-size: 32rpx;
			}
			.tit {
				margin: 10rpx 0;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.bot {
				width: 100%;
				view {
					&:first-child {
						color: #999;
						text {
							color: green;
							margin: 0 10rpx;
						}
					}
					&:last-child {
						color: #999;
						text {
							color: red;
							margin: 0 10rpx;
						}
					}
				}
			}
		}
	}
	// 弹窗样式
	.sortPopup {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		.sortList {
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 60rpx;
			color: #333;
			margin-bottom: 30rpx;
			font-size: 26rpx;
			border: 1rpx solid #e0e0e0;
		}
		.butBox {
			margin-top: 100rpx;
		}
		.sortChecked {
			background-color: rgb(0, 122, 255);
			color: #ffffff;
		}
	}
	.emptyStyle {
		margin-top: 280rpx;
	}
	.u-size-medium {
		padding: 0 60rpx !important;
	}
}
</style>
