<template>
	<view class="container">
		<Navbar title="气瓶领取" bgColor="#EA5504" leftIconColor="#fff" textColor="#fff" canBack></Navbar>
		<view class="topBodyCss">
			<view class="padding-lg flex justify-between">
				<view class="">
					<view class="text-lg text-white">
						领取前需确认领取气瓶信息是否准确
					</view>
					<view class="text-white margin-top-lg">
						类型：气瓶领取
					</view>
				</view>
				<view class="">
					<u-image width="100px" height="90px" src="/static/images/gas-icon/receiveBg.png"></u-image>
				</view>
			</view>
			<view class="CardCss">
				<view class="text-center text-lg margin-sm">
					<!-- <u-tabs :list="list" lineColor="#EA5504" :activeStyle="{fontSize:'18px',fontWeight:'bold'}"
						:current="current" :itemStyle="{width:'50%',height:'50px'}" @change="tabChange"></u-tabs> -->
						{{list[1].name}}
				</view>
				<view class="qpCardCss">
					<view class="qpTopCss flex justify-between align-center padding-lg">
						<view class="">
							气瓶条码
						</view>
						<view class="">
							操作
						</view>
					</view>
					<view class="" v-if="!current">
						<view class="qpItemCss flex justify-between align-center padding-lr-lg padding-tb-sm"
							v-for="(item,index) in kptm" :key="index">
							<view class="">
								{{item}}
							</view>
							<view class="">
								<u-icon name="trash" @click="delTm(index)"></u-icon>
							</view>
						</view>
						<view class="text-center padding" v-if="!kptm.length">
							扫码添加条码
						</view>
					</view>
					<view class="" v-else>
						<view class="qpItemCss flex justify-between align-center padding-lr-lg padding-tb-sm"
							v-for="(item,index) in mptm" :key="index">
							<view class="">
								{{item}}
							</view>
							<view class="">
								<u-icon name="trash" @click="delTm(index)"></u-icon>
							</view>
						</view>
						<view class="text-center padding" v-if="!mptm.length">
							扫码添加条码
						</view>
					</view>
				</view>
			</view>
			<view class="btnCss">
				<view class="roundBtnCss flex flex-direction" @click="handleCode">
					<view class="">
						<u-icon name="scan" color="#fff" size="45"></u-icon>
					</view>
					<view class="">
						{{current?'领取满瓶':'领取空瓶'}}
					</view>
				</view>

				<view class="w90 margin-top" @click="handleSubmit">
					<u-button color="#EA5504">全部领取</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				current: 1,
				list: [{
						name: '空瓶领取(0)'
					},
					{
						name: '满瓶领取(0)'
					},
				],
				kptm: [],
				mptm: [],
				mplqList:[],
			}
		},
		computed: {

		},
		onLoad() {
			uni.$on('scanCode', (code, name, fQptmObj) => {
				if (name === 'receiveGas') {
					if (this.current) {
						if (!this.mptm.includes(code)) {
							this.mptm.push(code);
							this.mplqList.push(fQptmObj);
						} else {
							setTimeout(() => {
								uni.$u.toast('已录入');
							}, 100)
						}
					} else {
						if (!this.kptm.includes(code)) {
							this.kptm.push(code);
						} else {
							setTimeout(() => {
								uni.$u.toast('已录入');
							}, 100)
						}
					}
					this.changeState();
				}
			});
		},
		methods: {
			changeState() {
				this.list[0].name = `领取空瓶(${this.kptm.length})`
				this.list[1].name = `领取满瓶(${this.mptm.length})`;
			},
			tabChange(e) {
				this.current = e.index;
			},
			handleCode() {
				// 组件扫码
				// this.$refs.scanCode.open();
				let lx = this.current ? 'mplq' : 'kplq';
				uni.navigateTo({
					url: '/pages/scan/scanCode?mode=2&lx=' + lx
				})
			},
			delTm(index) {
				if (this.current) {
					this.mptm.splice(index, 1)
				} else {
					this.kptm.splice(index, 1)
				}
				this.changeState();
			},
			async handleSubmit() {
				if (!this.kptm.length && !this.mptm.length) {
					uni.$u.toast('请先扫码添加条码');
					return
				}
				// let submitData = {
				// 	kp: this.kptm,
				// 	mp: this.mptm
				// };
				// const result = await this.$api.gasApi.gasReceiveQp(submitData);
				let submitData = {
					czlx:"mplq",
					mplqList:this.mplqList
				};
				const result = await this.$api.gasApi.savaLiquefiedGasBottle(submitData);
				let {
					code,
					state,
					message
				} = result;
				if (code === 200 && state) {
					uni.$u.toast('全部领取成功');
					this.mptm = [];
					this.kptm = [];
					this.mplqList = [];
					this.changeState();
				} else {
					uni.$u.toast(message);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topBodyCss {
		height: 316px;
		background: #EA5504;

		.CardCss {
			width: calc(100% - 24px);
			position: absolute;
			margin: 0 12px;
			background: #fff;
			border-radius: 15px;
			padding-bottom: 20px;
		}

		.qpCardCss {
			margin: 0 12px;
			border: 1px solid #FBDDCD;
			border-radius: 8px 8px 0 0;

			.qpTopCss {
				background: #FBDDCD;
				height: 30px;
				border-radius: 8px 8px 0 0;
			}

			.qpItemCss {
				border-bottom: 1px solid #FBDDCD;
			}
		}

		.btnCss {
			position: absolute;
			bottom: 0;
			height: 120px;
			width: 100%;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.roundBtnCss {
				position: absolute;
				top: -50px;
				width: 85px;
				height: 85px;
				border-radius: 50%;
				background: #EA5504;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}
		}
	}
</style>