<template>
	<view class="table-container">
		<!-- 查询框 -->
		<view class="container">
			<view class="search-container">
				<!-- <uni-easyinput prefixIcon="search" v-model="stockLocNum" placeholder="请输入仓位" style="margin-right: 5px;">
				</uni-easyinput>
				<button class="search-button" @click="search">查询</button> -->
				<uni-datetime-picker type="date" :clear-icon="false" v-model="single" />
			</view>
			<!-- <view style="padding:0 5px 2px 5px;">
				<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
			</view> -->
		</view>
		<!-- 表格容器 -->
		<scroll-view class="table-scroll" scroll-y>
			<view class="table-header" ref="tableHeader">
			</view>
			<view class="table-body">
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<button class="mini-btn button" type="primary" size="default" @click="submit">新增</button>
			<button class="mini-btn button" type="warn" size="default" @click="goBack">取消</button>
		</view>

	</view>
</template>

<script>
	import {
		getBillDetailList,
		QueryChecklocation
	} from '../../api/production_replenishment';
	import modal from '../../plugins/modal';
	import {
		audioUrls,
		playVoice
	} from '../../utils/audio';
	import createHelper from '../../utils/checkCreateHelper.js';
	export default {
		data() {
			return {
				formId: '',
				stockLocNum: '',
				selectedItemId: null,
				single: '',
				selected: [], // 保存每个数据项是否被选中的状态
				stockList: [],
				BillDetailList: [],
				stockNum: ''
			};
		},
		onLoad(option) {
			console.log(option)
			this.stockNum = option.stockNum
			// this.stageLists = JSON.parse(decodeURIComponent(option.stageInfo))
			console.log(this.stockNum)
		},
		created() {
			this.formId = uni.getStorageSync("formId")
			// this.initialDateRange();
		},
		methods: {
			async submit() {
				console.log(this.single)
				if (this.single === '') {
					modal.msgError("请选择日期")
					playVoice(audioUrls.failVoiceUrl)
					return
				}
				try {
					// const condition = this.createSubmitCondition();
					// const billDetailListParam = getBillDetailListParam(condition)
					// const res = await this.fetchBillDetails(billDetailListParam)
					// this.BillDetailList = res;
					const FormId = uni.getStorageSync('formId')
					const date = this.single
					const res = await createHelper.create2(FormId, date);
					console.log(res)
					this.BillDetailList = res;
					this.navigateBack();
				} catch (error) {
					playVoice(audioUrls.failVoiceUrl)
					console.error('操作失败:', error);
					modal.confirm(error || '操作失败').then(res => {
						if (res) {

						} else {
							// 用户点击取消，不执行任何操作
						}
					})
				}
			},
			// 返回上一页并传递数据
			navigateBack() {
				uni.navigateBack({
					success: () => {
						uni.$emit('search', this.BillDetailList);
					}
				});
			},
			// 获取请求条件
			createSubmitCondition() {
				return {
					FormId: uni.getStorageSync('formId'),
					selectedFID: this.selected.join(',')
				};
			},
			// 发起请求并获取数据
			fetchBillDetails(billDetailListParam) {
				return getBillDetailList(JSON.stringify(billDetailListParam));
			},
			goBack() {
				uni.navigateBack();
			},
			// 函数来创建条件
			createSearchCondition(range, billNo) {
				return {
					"FormId": uni.getStorageSync('formId'),
					"FBillType": uni.getStorageSync('fbillType'),
					"FStockOrgId": uni.getStorageSync('FStockOrgId'),
					"billNo": billNo,
					"range": range
				};
			},
			// search() {
			// 	modal.loading('获取数据中，请耐心等待...')
			// 	let data = {
			// 		usertoken: "99302b4923aa42298c5922b7b68bcff9",
			// 		locType: "MLCK",
			// 		stockLocNum: this.stockLocNum
			// 	}
			// 	console.log(data)
			// 	QueryChecklocation(data).then(res => {
			// 		console.log(res);
			// 		this.handleResponse(res)
			// 	})
			// },
			handleResponse(res) {
				// 关闭加载提示
				modal.closeLoading();
				// 检查响应是否为空
				if (res.length === 0) {
					modal.msg("请确认输入条件有效！");
					playVoice(audioUrls.failVoiceUrl);
					return;
				}
				this.updateStockList(res);
			},
			updateStockList(data) {
				console.log(data)
				this.stockList = data.results;
				console.log(this.stockList)
			},
		}
	};
</script>

<style>
	.table-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.container {
		display: flex;
		flex-direction: column;
	}

	.search-container {
		display: flex;
		/* justify-content: flex-start; */
		flex-direction: row;
		align-items: center;
		padding: 5px;
		/* border-bottom: 1px solid #ccc; */
		flex-wrap: wrap;
	}

	.search-button {
		/* padding: 8px 16px; */
		border: none;
		border-radius: 4px;
		background-color: #007bff;
		color: #fff;
		cursor: pointer;
	}

	.search-button:hover {
		background-color: #0056b3;
	}

	.table-scroll {
		/* position: absolute; */
		flex: 1;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.table-header {
		position: sticky;
		top: 0;
		background-color: #f0f0f0;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
		display: flex;
		z-index: 1;
		/* 确保表头在内容之上 */
	}

	.table-cell1 {
		width: 100%;
		padding: 10px;
		text-align: center;
		border-right: 1px solid #ccc;
	}

	.table-cell1-1 {
		min-width: 150px;
		padding: 10px;
		text-align: left;
		border-right: 1px solid #ccc;
	}

	.table-cell {
		min-width: 100px;
		padding: 10px;
		text-align: center;
		border-right: 1px solid #ccc;
	}

	.header-cell {
		border-right: none;
		/* 取消最后一列的右边框 */
	}

	.table-body {
		flex: 1;
		/* width: fit-content; */
		/* 使内容宽度适应内容的宽度 */
	}

	.table-row {
		width: 100%;
		/* display: flex; */
		border-bottom: 1px solid #ccc;
	}

	.checkbox {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-bar {
		display: flex;
		/* justify-content: center; */
		justify-content: flex-end;
		/* 将按钮靠右对齐 */
		align-items: center;
		/* padding: 10px; */
		padding: 3px;
		background-color: #f0f0f0;
	}

	.button {
		margin: 0 10px;
		/* padding: 10px 20px; */
	}

	.checkbox-container {
		width: 100%;
		padding: 10px;
		/* text-align: center; */
		border-right: 1px solid #ccc;
		display: flex;
		align-items: center;
		/* 	margin-left: 10px;
		margin-right: 10px; */
		/* 可根据需要调整间距 */
	}
</style>