<template>
	<!-- 我的物料 -->
	<view class="ware-house-spare">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="物料库" titleColor="#333333"
			:border-bottom="false" title-bold></u-navbar>
			<!-- 搜索 -->
		<view class="search-view">
			<u-search v-model="keyword" :action-text="searchButtonText" @search="handleClickSearch" @clear="handleClear"
				@custom="handleClickButton" placeholder="请输入关键字" :action-style="actionStyle" placeholder-color="#999999"
				color="#333333" bg-color="#FFFFFF" height="72"  search-icon-color="#999999">
			</u-search>
		</view>
		<!-- 无结果 -->
		<NoOrder v-if="noParts" imageName="wupeijianxinxi.png" text="当前暂无物料信息" :customStyle="noPartsCustomStyle" />
		<!-- 物料 -->
		<template v-else>
			<view class="title-view" v-if="loaded">
				<view>物料列表</view>
				<view class="title-right-view">
					<!-- 开启退件模式 -->
					<view class="bounce-view" v-if="!showBounce" @click="showBounce = true">退件</view>
					<!-- 取消退件模式 -->
					<u-button v-else :custom-style="buttonStyle" shape="circle" @click="handleClickBounce">退件 ×</u-button>
				</view>
			</view>
			<!-- 物料列表 -->
			<view class="tab-view">
				<scroll-view scroll-y style="height: 100%;width: 100%;" scroll-anchoring enable-back-to-top>
					<!-- 加载转圈页面 -->
					<view class="loading-view" v-if="!loaded">
						<u-loading mode="flower"></u-loading>
					</view>
					<!-- 列表 -->
					<template v-else>
						<view class="list-item" v-for="(item, index) in partsList" :key="item.id">
							<SpareCell :item="item" :showChecked="showBounce" type="stock"
								@change="handleChange($event, index)"@numChange="handleNumChange($event, index)" />
						</view>
						<!-- 底部加载状态 -->
						<view class="load-more-view" v-if="partsList.length > 0">
							<u-loadmore status="nomore" bgColor="#F4F5F7"></u-loadmore>
						</view>
					</template>
				</scroll-view>
			</view>
			<!-- 底部按钮控件 -->
			<view class="bar" v-show="showBounce">
				<SubmitBar :partNum="subBarInfo.partNum" :num="subBarInfo.num" :btnStatus="subBarInfo.btnStatus"
					submitTxt="退件" :allChecked="subBarInfo.allChecked" :customStyle="customStyle" @select="allSelect"
					@submit="$u.throttle(handleSubmit, 500)" />
			</view>
		</template>
		<!-- 悬浮申请按钮 -->
		<view class="fixed-button" v-show="!showBounce">
			<ApplyButton :type.sync="buttonType" @click="handleClickApply"/>
		</view>
	</view>
</template>

<script>
	// import AppliedCell from "@/components/parts/appliedPartsCell.vue"
	import NoOrder from "@/components/order/noOrder.vue"
	import SubmitBar from "@/components/submit-bar/index"
	import SpareCell from "@/components/parts/spareCell.vue"
	import ApplyButton from "@/components/parts/applyButton.vue"

	export default {
		components: {
			// AppliedCell,
			NoOrder,
			SubmitBar,
			SpareCell,
			ApplyButton
		},
		data() {
			return {
				partsList: [], // 物料列表
				loaded: false, // 加载状态
				showBounce: false, // 是否进入推荐模式
				keyword: '', // 搜索框内的关键字
				searchedKeyword: '',  // 最新向后台传过的关键字
				buttonType: 'expand' // 申请按钮宽 collapse': '80rpx', 'expand': '220rpx''
			};
		},
		computed: {
			// 搜索图标
			sousuoImage() {
				return process.uniEnv.qn_base_url + 'sousuo.png'
			},
			// 无结果，展示无结果页面
			noParts() {
				return this.partsList.length == 0 && this.loaded
			},
			// 无结果页面样式
			noPartsCustomStyle() {
				return 'margin-top: 100rpx;background-color: #F4F5F7'
			},
			// 取消退件模式按钮风格
			buttonStyle() {
				return {
					width: '100rpx',
					height: '48rpx',
					background: '#FFFFFF',
					color: '#2272FF',
					fontSize: '26rpx',
				}
			},
			// 搜索控件右面'搜索'/'取消'按钮风格
			actionStyle() {
				return {
					'font-size': '32rpx',
					'color': '#2272FF',
					'margin-left': '20rpx'
				}
			},
			// 底部按钮控件数据
			subBarInfo() {
				var i = 0
				var j = 0
				for (var item of this.partsList) {
					if (item.selected) {
						i += item.quantity
						j += 1
					}
				}
				return {
					partNum: j, // 种类
					num: i, // 总数
					btnStatus: j > 0, // 提交按钮可以点击
					allChecked: j > 0 && j == this.partsList.length // 勾选了全选
				}
			},
			// 底部按钮控件样式
			customStyle() {
				return 'background-color: #F4F5F7;padding: 0rpx;'
			},
			// 搜索控件右面按钮文字 已经搜索过 && 搜多过的文字和传入后台的文字相同：取消；其他：搜索
			searchButtonText() {
				return this.searchedKeyword == this.keyword && this.keyword ? '取消' : '搜索'
			},
			// 选中的退件
			selectedParts() {
				return this.partsList.filter((item)=> {
					return item.selected == true
				})
			}
		},
		onLoad(e) {
			getApp().trackPage('物料库页')
			this.getReserveList() // 获取物料列表
		},
		onShow() {
			// 退件之后刷新页面
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			let needRefresh = page.needRefresh;
			if (needRefresh) {
				page.needRefresh = false
				this.showBounce = false
				this.getReserveList()
			}
		},
		methods: {
			getReserveList() { // 物料列表
				this.loaded = false
				var param = {}
				if (this.keyword) {
					param.keyword = this.keyword
				}
				this.searchedKeyword = this.keyword

				this.$u.api.getMyReserve(param).then((res) => {
					if (res.code == 200) {
						this.partsList = []
						let list = res.data || []
						for (var item of list) {
							item.selected = false // 添加新属性 勾选：false
							this.partsList.push(item)
						}

					} else {
						console.log(res.message);
					}
					this.loaded = true
				});
			},
			handleClickSearch() { // 软键盘搜索
				this.getReserveList()
			},
			handleClear() { // 清空搜索
				if (this.searchedKeyword) { // 已经搜索过，清空就重新初始搜索
					this.getReserveList()
				}
			},
			handleClickButton() { // 点了搜索/取消按钮
				if (this.searchedKeyword == this.keyword) { // 取消按钮
					this.keyword = '' // 初始化搜索条件
				}
				this.getReserveList()
			},
			handleClickBounce() { // 关闭退件模式
				this.showBounce = false
				for (var item of this.partsList) {
					item.selected = false
					item.quantity = 0
				}
			},
			allSelect(value) { // 底部勾选全选
				for (var item of this.partsList) {
					item.selected = value
					item.quantity = value ? item.stock : 0
				}
			},
			handleChange(value, index) { // 物料cell勾选改变
				this.partsList[index].selected = value
			},
			handleNumChange(value, index) { // 物料cell内数量改变
			  this.partsList[index].quantity = value
			},
			handleSubmit() { // 提交
				this.$u.route({
					url: 'pages/parts/returnParts',
				})
			},
			// 点击了申请物料按钮
			handleClickApply() {
				uni.navigateTo({
					url: 'pages/parts/application?applyType=1'
				})
			},
			// 滚动触发悬浮按钮变为收起状态
			scroll() {
				this.buttonType = 'collapse'
			},
		}
	};
</script>

<style lang="scss" scoped>
	.ware-house-spare {
		padding: 0 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.search-view {
			margin-bottom: 30rpx;
			margin-top: 10rpx;
			/deep/ .u-search .u-content {
				padding-left: 40rpx;
			}
			/deep/ .u-search .u-input {
				margin: 0 20rpx;
			}
			/deep/ .u-search .u-icon--right .u-iconfont {
				font-size: 36rpx !important;
			}
		}

		.title-view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333333;
			font-weight: bold;
			font-size: 32rpx;
			margin: 0 10rpx 20rpx 10rpx;

			.title-right-view {
				text-align: right;

				.bounce-view {
					color: #666666;
					font-size: 26rpx;
					font-weight: 400;
					width: 100rpx;
					height: 48rpx;
					margin-right: 30rpx;
					line-height: 48rpx;
				}
			}
		}

		.tab-view {
			height: 100%;
			overflow: auto;

			.list-item {
				padding: 30rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				border-radius: 12rpx;
			}

			.load-more-view {
				padding-bottom: 64rpx;
			}

			.loading-view {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 300rpx;
				position: absolute;
			}
		}
		.fixed-button {
			position: fixed;
			right: 20rpx;
			bottom: 64rpx;
			
		}
	}
</style>
