<template>
	<view class="modal-box">
		<view class="header_box">
			<view class="headerName u-flex">
				<text class="barBox"></text>
				<view class="shelfName u-line-1">{{ shelfName }}对方的观点和个人就一个人国服日服固定板</view>
				<view class="screeningBox" @click="chooseShow = true">
					<text>滞销天数</text>
					<u-icon color="#666666" size="36" name="shaixuan" custom-prefix="iscm-icon"></u-icon>
				</view>
			</view>
			<view class="searchBox">
				<view class="searchBox_l">
					<u-search
						placeholder="请输入产品编码或产品名称搜索"
						@change="getSearchCon"
						@search="getSearchCon"
						@custom="getSearchCon"
						@clear="clearSearch"
						v-model="keyword"
						bg-color="#FFF"
						shape="round"
						:show-action="false"
					></u-search>
				</view>
				<view class="searchBox_r"><u-icon color="#666666" size="40" name="saomiao" custom-prefix="iscm-icon"></u-icon></view>
			</view>
		</view>
		<view class="backOrderCon">
			<scroll-view scroll-y class="scroll-view">
					<view class="partList-list-box">
						<view class="product flex align_center">
							<view class="checkbox"><u-checkbox v-model="checked" name="A" @change="checkChange" size="40" shape="circle"></u-checkbox></view>
							<view class="flex align_center flex_1">
								<view class="pimgs">
									<u-image src="`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
								</view>
								<view class="pinfo">
									<view class="pname">
										<text>A01</text>
										JQ-21026E
									</view>
									<view class="productName u-line-1">
										名i嘻嘻嘻嘻嘻嘻
									</view>
									<view class="ptxt flex align_center">
										<view>
											最大库容
											<text class="pnums">100</text>
										</view>
										<view>
											/货架库存
											<text class="pnums">20</text>
										</view>
										<view>
											/滞销
											<text class="pnums">12个月23天</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="ptools flex align_center justify_between">
							<view class="ptools_l u-flex">
								<view>
									补货在途
									<text class="pnums">1</text>
								</view>
								<view>
									/调回在途
									<text class="pnums">2</text>
								</view>
							</view>
							<view class="pcurnums flex align_center">
								<text>调回数量</text>
								<view class="u-ninput"><u-number-box color="#000" :input-height="60" bg-color="#fff" v-model="shifa" :min="0" :max="10"></u-number-box></view>
							</view>
						</view>
					</view>
				<!-- <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty> -->
			</scroll-view>
		</view>
		<view class="backOrderFooter u-flex">
			<view class="checkBox">
				<u-checkbox-group><u-checkbox label-size="24" icon-size="26" v-model="allChecked" shape="circle">全选</u-checkbox></u-checkbox-group>
			</view>
			<view class="footerBox u-flex u-row-between">
				<view class="footerBox_m u-flex">
					<view class="middle_l">
						已选
						<text>2</text>
						款/
						<text>15</text>
						件
					</view>
					<view class="middle_r" @click="detailFlag=true">
						<text>查看明细</text>
						<u-icon name="arrow-up" color="#999" size="28"></u-icon>
					</view>
				</view>
				<view class="footerBox_r"><u-button type="primary" shape="circle">新增调回单</u-button></view>
			</view>
		</view>
		<!-- 排序弹窗 -->
		<u-popup v-model="chooseShow" mode="right" width="60%">
			<view class="choosePopup">
				<view class="chooseTit">滞销天数</view>
				<view class="chooseDay u-flex">
					<u-input v-model="startDay" input-align="center" placeholder="起始天数" type="number" />
					<text>至</text>
					<u-input v-model="endDay" input-align="center" placeholder="截止天数" type="number" />
				</view>
				<view class="butBox u-flex">
					<u-button hover-class="none" shape="circle" size="medium" @click="reset">重置</u-button>
					<u-button hover-class="none" :custom-style="customBtnStyle" size="medium" shape="circle" @click="handelSort">查询</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 查看明细弹窗 -->
		<detailModal :detailShow="detailFlag"  @close="detailFlag=false"></detailModal>
	</view>
</template>

<script>
import { reportPage } from '@/api/vinLog';
import detailModal from './detailModal'
export default {
	components: {
		detailModal
	},
	data() {
		return {
			detailFlag:false,
			chooseShow: false,
			checked: true,
			keyword: '',
			sortList: [
				{
					id: 1,
					name: '最近一次VIN扫描时间降序'
				},
				{
					id: 2,
					name: '适配有货降序'
				},
				{
					id: 3,
					name: '适配无货降序'
				}
			],
			isSortFlag: 0,
			list: [],
			shelfSn: '',
			shelfName: '',
			pageNo: 1,
			pageSize: 10,
			noDataText: '暂无数据',
			status: 'loading',
			totalNum: 0,
			total: 0,
			theme: '',
			customBtnStyle: {
				//  自定义按钮样式
				borderColor: this.$config('primaryColor'),
				backgroundColor: this.$config('primaryColor'),
				color: '#fff'
			},
			startDay: null,
			endDay: null,
			allChecked: false
		};
	},
	onLoad(options) {
		this.theme = getApp().globalData.theme;
		this.shelfSn = options.shelfSn;
		this.shelfName = options.shelfName;
		let ajaxData = {
			pageNo: this.pageNo,
			pageSize: this.pageSize,
			shelfSn: this.shelfSn
		};
		this.loadData(ajaxData);
	},
	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;
			this.handelSort();
		},
		reset() {
			this.isSortFlag = 0;
			this.pageNo = 1;
			let ajaxData = {
				pageNo: 1,
				pageSize: this.pageSize,
				shelfSn: this.shelfSn
			};
			this.loadData(ajaxData);
		},
		// 搜索
		getSearchCon() {
			this.pageNo = 1;
			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()
				};
			}
			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);
		},
		// 清空搜索内容
		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);
		}
	}
};
</script>

<style lang="less" scoped>
.modal-box {
	background: #ffffff;
	padding: 20rpx;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	.header_box {
		width: 100%;
		height: 142rpx;
		padding: 0 20rpx 20rpx;
		.headerName {
			padding-bottom: 15rpx;
			color: #222;
			font-size: 30rpx;
			.barBox {
				display: block;
				height: 30rpx;
				width: 6rpx;
				background: #0485f6;
				margin-right: 10rpx;
				border-radius: 10rpx;
			}
			.shelfName {
				font-weight: bold;
				width: calc(100% - 166rpx);
			}
			.screeningBox {
				font-size: 26rpx;
				width: 150rpx;
				text-align: right;
				text {
					vertical-align: top;
				}
			}
		}
		.searchBox {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			border: 1rpx solid #e0e0e0;
			border-radius: 32rpx;
			box-sizing: border-box;
			.searchBox_l {
				width: 93%;
			}
			.searchBox_r {
				width: 7%;
			}
		}
	}
	.backOrderCon {
		width: 100%;
		height: calc(100vh - 280rpx);
		.partList-list-box {
			padding: 10px 0;
			border-bottom: 2rpx solid #f5f5f5;
			&:last-child {
				border: 0;
			}
			.product {
				flex-grow: 1;
				.checkbox {
					width: 60rpx;
				}
				.pinfo {
					flex-grow: 1;
					padding-left: 20rpx;
					.pname {
						font-size: 32rpx;
						color: #191919;
						margin-bottom: 10rpx;
						text {
							font-weight: normal;
							margin-right: 6rpx;
							padding: 0 10rpx;
							background: rgba(3, 54, 146, 0.15);
							border-radius: 100rpx;
							color: #033692;
							font-size: 28rpx;
						}
					}
					.productName{
						width: 90%;
						font-size: 32rpx;
						color: #191919;
						font-weight: bold;
						margin:10rpx 0;
					}
					.pno {
						background-color: rgba(3, 54, 146, 0.15);
						border-radius: 50rpx;
						padding: 0 20rpx;
						color: #033692;
						font-size: 24rpx;
						margin-right: 10rpx;
					}
					.ptxt {
						font-size: 24rpx;
						color: #999;
						.pnums {
							color: #222;
							padding: 0 4upx;
						}
					}
				}
			}
			.ptools {
				margin-top: 30rpx;
				margin-left: 60rpx;
				.ptools_l{
					font-size: 24rpx;
					color: #999;
					.pnums {
						color: #ff5500;
						padding: 0 4rpx;
					}
				}
				.pcurnums {
					> text {
						font-size: 24rpx;
						color: #999;
						margin-right: 20rpx;
					}
				}
				.u-ninput {
					border: 2rpx solid #eee;
					border-radius: 50rpx;
					padding: 0 6rpx;
				}
				/deep/ .u-icon-disabled {
					background: #fff !important;
				}
				/deep/ .u-number-input {
					margin: 0 0;
					border: 2rpx solid #eee;
					border-top: 0;
					border-bottom: 0;
				}
				/deep/ .u-icon-plus,
				/deep/ .u-icon-minus {
					border-radius: 50rpx;
				}
			}
		}
	}
	.backOrderFooter {
		height: 98rpx;
		box-sizing: border-box;
		padding: 10rpx 0;
		vertical-align: top;
		.checkBox {
			width: 20%;
		}
		.footerBox {
			width: 80%;
			.footerBox_m {
				.middle_l {
					text {
						color: #ff5500;
						margin: 0 6rpx;
					}
				}
				.middle_r {
					font-size: 24rpx;
					color: #999;
					margin-left: 10rpx;
				}
			}
			.footerBox_r {
				width: 200rpx;
				button {
					width: 100%;
					font-size: 26rpx;
				}
			}
		}
	}
	// 弹窗样式
	.choosePopup {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		.chooseTit {
			text-align: center;
		}
		.chooseDay {
			margin: 60rpx 0;
			.u-input {
				border-bottom: 1rpx solid #e0e0e0;
			}
		}
		.butBox {
			margin-top: 100rpx;
			.u-size-medium {
				padding: 0 60rpx !important;
			}
		}
	}
}
</style>
