<template>
	<view class="modal-box">
		<view class="searchBox">
			<view class="searchBox_l"><u-search placeholder="请输入产品编码/产品名称" 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" 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.isStockCount || 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 shape="circle" size="medium" @click="reset">重置</u-button>
					<u-button shape="circle" size="medium" type="primary" @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: -1,
			list: [],
			shelfSn: '',
			pageNo: 1,
			pageSize: 10,
			noDataText: '暂无数据',
			status: 'loading',
			totalNum:0,
			total:0
		};
	},
	onLoad(options) {
		this.shelfSn = options.shelfSn;
		let ajaxData = {
			pageNo: this.pageNo,
			pageSize: this.pageSize,
			shelfSn: this.shelfSn
		};
		this.loadData(ajaxData);
		uni.setNavigationBarTitle({
			title:options.shelfName
		})
	},
	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 = -1;
			let ajaxData = {
				pageNo: 1,
				pageSize: this.pageSize,
				shelfSn: this.shelfSn
			};
			this.loadData(ajaxData);
		},
		handelSort() {
			if (this.isSortFlag == -1) {
				uni.showToast({
					title: '请选择排序方式',
					icon: 'none',
					duration: 4000
				});
			} else {
				var ajaxData = {
					shelfSn: this.shelfSn,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				};
				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.isSortFlag = -1;
				this.sortShow=false;
				this.loadData(ajaxData);
			}
		}
	},
	//到底部加载更多
	onReachBottom() {
		if (this.list.length < this.totalNum) {
			this.pageNo += 1;
			let ajaxData = {
				shelfSn: this.shelfSn,
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			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;
			background-color: #e0e0e0;
		}
		.butBox {
			margin-top: 100rpx;
		}
		.sortChecked {
			background-color: #999;
			color: #ffffff;
		}
	}
	.emptyStyle {
		margin-top: 280rpx;
	}
	.u-size-medium {
		padding: 0 60rpx !important;
	}
}
</style>
