<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-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="usuallyCard topCardCss">
				<view class="text-sm text-bold">
					出库接收车辆信息
				</view>
				<view class="flex margin-top">
					<view class="w20 text-gray">
						接收车辆
					</view>
					<view class="w70" @click="pickerCl">
						{{clpz}}
					</view>
					<view class="" @click="pickerCl">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="flex margin-top">
					<view class="w20 text-gray">
						车辆类型
					</view>
					<view class="w70">
						{{cllx}}
					</view>
				</view>
			</view>
			<view class="CardCss">
				<view class="">
					<u-tabs :list="list" lineColor="#EA5504" :activeStyle="{fontSize:'18px',fontWeight:'bold'}"
						:current="current" :itemStyle="{width:'50%',height:'50px'}" @change="tabChange"></u-tabs>
				</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 kpck" :key="index">
							<view class="">
								{{item}}
							</view>
							<view class="">
								<u-icon name="trash"></u-icon>
							</view>
						</view>
						<view class="text-center padding" v-if="!kpck.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 mpck" :key="index">
							<view class="">
								{{item}}
							</view>
							<view class="">
								<u-icon name="trash"></u-icon>
							</view>
						</view>
						<view class="text-center padding" v-if="!mpck.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>
		<u-picker :show="pickerShow" :columns="columns" keyName="label" @cancel="pickerShow = false"
			@confirm="handleConfirm" closeOnClickOverlay @close="pickerShow = false"></u-picker>
	</view>
</template>

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

		},
		data() {
			return {
				current: 0,
				list: [{
						name: '空瓶出库'
					},
					{
						name: '满瓶出库'
					},
				],
				clpz: "",
				cllx: "",
				clId: "",
				kpck: [],
				mpck: [],
				kpckList:[],
				mpckList:[],
				columns: [],
				pickerShow: false,
			}
		},
		computed: {

		},
		onLoad() {
			this.initData();

			uni.$on('scanCode', (code,name,fQptmObj) => {
				if (name === 'gasCylinderOutbound') {
					console.log("气瓶对象",fQptmObj);
					// if (this.current) {
					// 	if (!this.mpck.includes(code)) {
					// 		this.mpck.push(code);
					// 		this.mpckList.push(fQptmObj);
					// 	} else {
					// 		setTimeout(() => {
					// 			uni.$u.toast('已录入');
					// 		}, 100)
					// 	}
					// } else {
					// 	if (!this.kpck.includes(code)) {
					// 		this.kpck.push(code);
					// 		this.kpckList.push(fQptmObj);
					// 	} else {
					// 		setTimeout(() => {
					// 			uni.$u.toast('已录入');
					// 		}, 100)
					// 	}
					// }
					
					if (!this.mpck.includes(code) && !this.kpck.includes(code)) {
						this.current ? this.mpck.push(code) : this.kpck.push(code)
						this.current ? this.mpckList.push(fQptmObj) : this.kpckList.push(fQptmObj)
					} else {
						uni.$u.toast(`已录入`);
						// setTimeout(() => {
						// 	if(this.mpck.includes(code)){
						// 		uni.$u.toast(`满瓶已录入`);
						// 	}else if(this.kpck.includes(code)){
						// 		uni.$u.toast(`空瓶已录入`);
						// 	}
						// }, 100)
					}
					this.changeState();
				}
			});
		},
		methods: {
			changeState() {
				this.list[0].name = `空瓶出库(${this.kpck.length})`
				this.list[1].name = `满瓶出库(${this.mpck.length})`;
			},
			async initData() {
				// 查询车辆信息
				let query = {
					page: 1,
					size: 10
				}
				const result = await this.$api.employeeApi.getClxxPage(query);
				let {
					code,
					state,
					value
				} = result;
				if (state && code === 200) {
					let {
						records
					} = value;
					let data = records.map(res => {
						return {
							type: res.fCllx,
							label: res.fCph,
							value: res.id
						}
					})
					this.columns.push(data);
					if (this.columns.length) {
						this.cllx = this.columns[0][0].label
						this.clpz = this.columns[0][0].type
						this.clId = this.columns[0][0].value;
					}
					console.log("车辆信息", this.columns);
				}
			},
			tabChange(e) {
				this.current = e.index;
			},
			handleCode() {
				// 组件扫码
				// this.$refs.scanCode.open();
				let lx = this.current ? 'mpck' : 'kpck';
				uni.navigateTo({
					url: '/pages/scan/scanCode?mode=2&lx=' + lx
				})
			},
			// 打开车辆选择
			pickerCl() {
				this.pickerShow = true;
			},
			handleConfirm(e) {
				console.log(e);
				let temp = e.value[0];
				this.clId = temp.value;
				this.cllx = temp.type;
				this.clpz = temp.label;
				console.log("选择车辆id", this.clId);
				this.pickerShow = false;
			},
			async handleSubmit() {
				if (!this.clId) {
					uni.$u.toast('请先选择车辆');
					return;
				}
				if (!this.kpck.length && !this.mpck.length) {
					uni.$u.toast('请先扫码添加条码');
					return;
				}
				// let queryParams = {
				// 	czlx:''
				// 	kpck: this.kpck,
				// 	mpck: this.mpck,
				// 	clId: this.clId
				// }
				// const result = await this.$api.gasApi.submitQpcrk(queryParams);
				// console.log("提交出库");
				let queryParams = {
					czlx: "ck",
					mpckList: this.mpckList,
					kpckList: this.kpckList,
					clId: this.clId
				}
				console.log("提交出库", queryParams);
				const result = await this.$api.gasApi.savaLiquefiedGasBottle(queryParams);
				let {
					code,
					state,
					message
				} = result;
				if (state && code === 200) {
					uni.$u.toast("全部出库成功");
					this.kpck = [];
					this.mpck = [];
					this.mpckList = [];
					this.kpckList = [];
					this.changeState();
				} else {
					uni.$u.toast(message)
				}
			}
		}
	}
</script>

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

		.topCardCss {
			margin: 0 12px 10px 12px;
			padding: 15px 10px;
		}

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

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

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

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

		.btnCss {
			position: fixed;
			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>