<template>
	<view class="container">
		<view class="search">
			<uni-search-bar radius="5" placeholder="输入电池编号查询" v-model="batteryCode" @blur="searchInfo"
				@confirm="searchInfo" />
		</view>
		<view class="list-panel">
			<view class="list-item-title">
				<uni-row>
					<uni-col :span="18">
						电池编号
					</uni-col>
					<uni-col :span="6">
						操作
					</uni-col>
				</uni-row>
			</view>
			<view class="list-item" v-for="(item,index) in listBatteryCode" :key="index">
				<uni-row>
					<view>
						<uni-col :span="18">
							{{item.batteryCode}}
						</uni-col>
						<uni-col :span="6">
							<uni-icons type="minus-filled" size="28" @click="onBatteryDelClick(item.batteryCode)"></uni-icons>
						</uni-col>
					</view>
				</uni-row>
			</view>
		</view>
	</view>
	<view class="nav-panel">
		<view class="add-panel" v-if="inputState">
			<uni-easyinput class="uni-mt-5" v-model="inputCodeValue" placeholder="请输入电池编号" prefixIcon="down"
				suffixIcon="plus" @iconClick="addCodeData">
			</uni-easyinput>
		</view>
		<c-uni-goods-nav :fill="true" :options="navOptions" @click="navOptionsClick" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {
		showModelMessage,
		isNullOrEmpty,
		dataFormat
	} from '@/utils/tools.js';
	import {onLoad,onShow} from '@dcloudio/uni-app';
	import {
		useScanCodeStore
	} from '@/stores/scancode.js';
	const scancode = useScanCodeStore();
	const userInfo = ref(null);
	const userDefultOperation = ref(null);
	
	const batteryCode = ref("");
	const listBatteryCode = ref([]);
	const listBatteryData = ref([]);
	
	const inputState = ref(false);
	const inputCodeValue = ref("");
	const componentOutRecordId = ref("");
	
	onLoad((options)=>{
		userInfo.value = uni.getStorageSync('userInfo');
		userDefultOperation.value = uni.getStorageSync('userDefultOperation');
	});
	
	onShow(() => {
		if(!isNullOrEmpty(scancode.code)){
			const arr = scancode.code;
			for (let i = 0; i < arr.length; i++) {
				if(scancode.type == 'pickBattery'){
					const exists = listBatteryData.value.some(item => item.batteryCode == arr[i]);
					if(!exists){
						const oneBattery = {
								"batteryCode": arr[i]
						}
						listBatteryData.value.push(oneBattery);
						inputCodeValue.value = '';
						batteryCode.value = '';
						searchInfo();
					}
				}
				else break;
			}
			scancode.clearCode();
		}	
	});
	
	const searchInfo =(e) =>{
		if(!isNullOrEmpty(batteryCode.value)){
			if(listBatteryData.length > 0){
				const even = listBatteryData.value.filter(item => item.batteryCode.indexOf(batteryCode.value) > -1);
				listBatteryCode.value = even;
			}
		}
		else
		{
			listBatteryCode.value = listBatteryData.value;
		}
	}
	
	const navOptions = reactive([{
		icon: 'scan',
		text: '扫码新增',
		disable: false
	}, {
		icon: 'folder-add',
		text: '编号新增',
		disable: false
	}]);
	
	const navButtonGroup = reactive([{
		text: '确认领取',
		backgroundColor: '#0078D4',
		color: '#fff',
		disable: false
	}]);
	
	const navOptionsClick =(e) =>{
		const index = e.index;
		if(index == 0){
			uni.navigateTo({
				url: `/pages/common/batchscancode?type=pickBattery`, //
			});
		}
		else if(index == 1){
			inputState.value = true;
		}
	}
	
	const navButtonClick = (e) =>{
		const index = e.index;
		let sucessMsg = "领取成功";
		let errorMsg = "领取失败";
		if(index == 0){
			if(listBatteryData.value.length == 0){
				showModelMessage("电池列表不能为空！");
				return false;
			}
			saveBatteryApply((bresult, message) =>{
				if(!bresult){
					uni.showToast({
						title: message,
						icon: 'none',
						duration: 5000
					});
				}
				else
				{
					saveBaseInfo((bresult1, message1) =>{
						if(!bresult1){
							uni.showToast({
								title: errorMsg,
								icon: 'error',
								duration: 5000
							});
						}
						else
						{
							saveBatteryData((bresult2, message2) =>{
								if(!bresult2){
									uni.showToast({
										title: errorMsg,
										icon: 'error',
										duration: 5000
									});
								}
								else
								{
									uni.showToast({
										title: sucessMsg,
										icon: 'success',
										duration: 1000,
										success: (res) => {
											setTimeout(function () {
													uni.navigateBack();
											}, 1000);
										}
									});
								}
							});
						}
					})
				}
			});
		}
	}
	
	const saveBaseInfo = (callback) =>{
		const params = {
			"componentOutRecordId": "",
			"owningRegion": userDefultOperation.value.regionId,
			"componentType": "262711452730000",
			"outQuantity": listBatteryData.value.length,
			"createdUser": userInfo.value.username,
			"createdAt": dataFormat(new Date(),'yyyy-MM-dd HH:mm:ss'),
			"state": "1"
		};
		api.callOperateApi("ebikeComponentOutRecords/save", params).then((res)=>{
			if(res.code == '200') {
				componentOutRecordId.value = res.data;
				callback(true, "");
			}
			else callback(false, res.message);
		});
	}
	
	const saveBatteryData = (callback) =>{
		const listdatas = [];
		listBatteryData.value.forEach((item, index) => {
			listdatas.push(item.batteryCode);
		});
		const params = {
			componentOutRecordId: componentOutRecordId.value,
			batteryCodes: listdatas
		}
		api.callOperateApi("ebikeBatteryOutRecords/batchSaveByComponentOutRecordId", params).then((res)=>{
			if(res.code == '200'){
				callback(true, "");
			}
			else
			{
				callback(false, res.message);
			}
		});
	}
	
	const saveBatteryApply = (callback) =>{
		const listdatas = [];
		listBatteryData.value.forEach((item, index) => {
			listdatas.push(item.batteryCode);
		});
		const params = {
			batteryCodes: listdatas
		}
		api.callMaintenanceApi("ebikeBatteryApply/apply", params).then((res)=>{
			if(res.code == '200'){
				callback(true, "");
			}
			else
			{
				callback(false, res.message);
			}
		});
	}
	
	const onBatteryDelClick =(dbatteryCode) =>{
		const index = listBatteryData.value.findIndex(item => item.batteryCode == dbatteryCode);
		if(index != -1){
			listBatteryData.value.splice(index, 1);
			batteryCode.value = '';
			searchInfo();
		}
	}
	
	const addCodeData =(lx) =>{
		if(lx == 'suffix'){
			if(isNullOrEmpty(inputCodeValue.value)){
				showModelMessage("电池编号不能为空！");
				return;
			}
			if(listBatteryData.value.length > 0){
				const exists = listBatteryData.value.some(item => item.batteryCode == inputCodeValue.value);
				if(exists){
					showModelMessage("电池编号重复录入！");
					return;
				}
			}
			const oneBattery = {
					"batteryCode": inputCodeValue.value
			}
			listBatteryData.value.push(oneBattery);
			inputCodeValue.value = '';
			inputState.value = false;
			batteryCode.value = '';
			searchInfo();
		}
		else{
			inputCodeValue.value = '';
			inputState.value = false;
		}
	}
</script>

<style scoped>
	.container {
		padding: 15px;
		background-color: #fff;
	}
	
	.nav-panel{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding-bottom: 10px;
		z-index: 999;
		background-color:#fff;
	}
	
	.add-panel{
		padding: 0px 25px 10px 25px;
	}
	
	.list-panel{
		padding: 0px 10px 55px 10px;
	}
	
	.list-item-title{
		background-color: #f7f7f7;
		color: #ababab;
		line-height: 40px;
		border-radius: 5px;
		padding: 0px 15px;
	}
	
	.list-item{
		line-height: 40px;
		padding: 0px 15px;
		border-bottom: 1px solid #f7f7f7;
	}
	
</style>