<template>
	<view class="container">
		<Navbar title="气瓶自提" canBack></Navbar>
		<view class="flex padding-sm" style="background: #F5E4C2;" v-if="qptipsObj.type">
			<u-icon name="warning-fill" color="#FFA500"></u-icon>
			<view class="" style="color: #ffa500;">
				注意:发出气瓶数{{this.qptipsObj.type}}订单所需数，请确认是否继续配送！
			</view>
		</view>
		<view class="cardCss usuallyCard">
			<view class="flex justify-between" v-for="(item,index) in ddxqList" :key="index">
				<view class="flex">
					<view class="">
						<u-image width="50px" height="50px" radius="10" :src="item.image"></u-image>
					</view>
					<view class="flex flex-direction justify-between margin-left-sm">
						<view class="text-bold text-lg">
							{{item.fSpmc || ""}}
						</view>
						<view class="text-sm text-grey">
							{{item.fMs || ""}}
						</view>
					</view>
				</view>
				<view class="flex align-center text-grey">
					X{{item.fSl || ""}}
				</view>
			</view>
		</view>
		<view class="cardCss usuallyCard">
			<u-collapse ref="collapse1" :border="false" :value="qpsf.mpfc.length?['1']:['']">
				<u-collapse-item title="满瓶发出" name="1">
					<view class="flex justify-between align-center margin-top-sm" v-for="(item,index) in qpsf.mpfc"
						:key="index">
						<view class="">
							{{item}}
						</view>
						<view class="" @click="del(1,index)">
							<u-icon name="trash" size="18"></u-icon>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="cardCss usuallyCard">
			<u-collapse ref="collapse2" :border="false" :value="qpsf.kphs.length?['2']:['']">
				<u-collapse-item title="空瓶回收" name="2">
					<view class="flex justify-between align-center margin-top-sm" v-for="(item,index) in qpsf.kphs"
						:key="index">
						<view class="">
							{{item}}
						</view>
						<view class="" @click="del(2,index)">
							<u-icon name="trash" size="18"></u-icon>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<!-- <view class="cardCss usuallyCard">
			<u-collapse ref="collapse3" :border="false" :value="qpsf.mphs.length?['3']:['']">
				<u-collapse-item title="满瓶回收" name="3">
					<view class="flex justify-between align-center margin-top-sm" v-for="(item,index) in qpsf.mphs"
						:key="index">
						<view class="">
							{{item}}
						</view>
						<view class="" @click="del(3,index)">
							<u-icon name="trash" size="18"></u-icon>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view> -->
		<view class="scanAreaCss flex justify-around">
			<view class="flex flex-direction align-center margin-tb-sm" @click="openScan(1)">
				<view class="">
					<u-image src="/static/images/home/saoma.png" width="22px" height="22px"></u-image>
				</view>
				<view class="margin-top-xs themeColor">
					满瓶发出
				</view>
			</view>
			<view class="flex flex-direction align-center margin-tb-sm" @click="openScan(2)">
				<view class="">
					<u-image src="/static/images/home/saoma.png" width="22px" height="22px"></u-image>
				</view>
				<view class="margin-top-xs themeColor">
					空瓶回收
				</view>
			</view>
			<!-- <view class="flex flex-direction align-center margin-tb-sm" @click="openScan(3)">
				<view class="">
					<u-image src="/static/images/home/saoma.png" width="22px" height="22px"></u-image>
				</view>
				<view class="margin-top-xs themeColor">
					满瓶回收
				</view>
			</view> -->
		</view>
		<view class="ztBtncss" @click="handleZt">
			<u-button color="#EA5504">自提完成</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				qpsf: {
					mpfc: [],
					kphs: [],
					mphs: []
				},
				ddxqList: [],
				ddid: "",
				qptipsObj: {
					type: "",
					num: ""
				},
				scanType: "",

			};
		},
		watch: {
			qpsf: {
				handler() {
					this.setQplist();
				},
				immediate: true,
				deep: true,
			}
		},
		onLoad(data) {
			// console.log(data);
			if (data.ddObj) {
				let JsonParse = JSON.parse(data.ddObj);
				this.ddid = JsonParse.id;
				this.ddxqList = JsonParse.ddxqList;
			}

			//获取app自定义扫码结果
			uni.$on('scanCode', (code, name) => {
				if (name === 'gasCylinderSelfPickup') {
					console.log("gasCylinderSelfPickup监听code", code);
					this.setCode(code);
				}
			});
		},
		onShow() {

		},
		mounted() {

		},
		methods: {
			setQplist() {
				setTimeout(() => {
					this.$nextTick(() => {
						// nextTick延迟回调，否则第一次不更新
						this.$refs.collapse1.init();
						this.$refs.collapse2.init();
						// this.$refs.collapse3.init();
					})
				}, 500)
			},
			openScan(e) {
				let tempNum = parseInt(e);
				if (tempNum === 1) {
					this.scanType = 'mpfc';
				} else if (tempNum === 2) {
					this.scanType = 'kphs';
				} else if (tempNum === 3) {
					this.scanType = 'mphs';
				}
				uni.navigateTo({
					url: `/pages/scan/scanCode?mode=2&lx=${this.scanType}&ddid=${this.ddid}`
				})
			},
			del(e, index) {
				if (e === 1) {
					this.qpsf.mpfc.splice(index, 1)
				}
				if (e === 2) {
					this.qpsf.kphs.splice(index, 1)
				}
				if (e === 3) {
					this.qpsf.mphs.splice(index, 1)
				}
				this.isGoBeyond();
			},
			setCode(code) {
				switch (this.scanType) {
					case 'mpfc':
						this.handleScanType(this.qpsf.mpfc, code);
						break;
					case 'kphs':
						this.handleScanType(this.qpsf.kphs, code);
						break;
					case 'mphs':
						this.handleScanType(this.qpsf.mphs, code);
						break;
					default:
				}
				this.isGoBeyond();
				console.log('气瓶详情', JSON.parse(JSON.stringify(this.qpsf)));
				// console.log("满瓶发出", this.qpsf.mpfc);
				// console.log("空瓶回收", this.qpsf.kphs);
				// console.log("满瓶回收", this.qpsf.mphs);
			},
			handleScanType(array, code) {
				console.log("array", array);
				// if (!array.includes(code)) {
				if (!this.qpsf.mpfc.includes(code) && !this.qpsf.kphs.includes(code) && !this.qpsf.mphs.includes(code)) {
					array.push(code);
				} else {
					setTimeout(() => {
						uni.$u.toast('已录入');
					}, 100)
				}
			},
			// 超出或缺少提示
			isGoBeyond() {
				// 待发瓶数匹配
				if (this.qpsf.mpfc.length !== this.ddxqList[0].fSl) {
					let dfNum = this.ddxqList[0].fSl; //待发
					let yfNum = this.qpsf.mpfc.length //已发
					console.log("待发", dfNum);
					console.log("已发", yfNum);
					if (dfNum > yfNum) {
						let num = dfNum - yfNum;
						this.qptipsObj.type = '小于';
						this.qptipsObj.num = num;
						// uni.$u.toast(`缺少${num}瓶`);
					} else if (yfNum > dfNum) {
						let num = yfNum - dfNum;
						this.qptipsObj.type = '大于';
						this.qptipsObj.num = num;
						// uni.$u.toast(`超出${num}瓶`);
					} else {
						this.qptipsObj.type = "";
						this.qptipsObj.num = "";
					}
				} else {
					this.qptipsObj.type = "";
					this.qptipsObj.num = "";
				}
			},
			async handleZt() {
				if (!this.qpsf.mpfc.length) {
					uni.$u.toast('满瓶发出为空');
					return
				}
				let queryData = {
					qpsf: this.qpsf,
					ddid: this.ddid
				}
				console.log("自提数据", queryData);
				this.$modal.confirm('确认完成本次自提？', '提示').then(async () => {
					this.$modal.showLoading('提交中...')
					const result = await this.$api.orderApi.savaWddSelfPickup(queryData);
					let {
						code,
						state,
						message,
						value
					} = result;
					if (code === 200 && state) {
						let successData = JSON.stringify(value);
						this.$modal.closeLoading();
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/home/appList/securityCheck/step/success?type=0&successData=' +
									successData
							})
						}, 1000)
					} else {
						uni.$u.toast(message)
					}
				}).catch(() => {
					console.log("取消");
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.cardCss {
		margin: 10px 12px;
		padding: 20px 15px;
	}

	.scanAreaCss {
		width: 100%;
		position: fixed;
		bottom: 45px;
		height: 60px;
		background: #3D3935;
	}

	.ztBtncss {
		width: 100%;
		position: fixed;
		bottom: 0px;
	}
</style>