<!-- 仓库配料 -->
<template>
	<view>
		<u-line></u-line>
		<view class="area">
			<u--form labelPosition="left" labelWidth="240" :labelStyle="labelstyle">
				<u-form-item label="输入站点" borderBottom>
					<u--input
						v-model="select_position"
						border="surround"
						placeholder="填入站点"
						suffixIcon="map-fill"
						suffixIconStyle="{color: #00aaff;font-size: 30px;}"
					></u--input>
				</u-form-item>
			</u--form>

			<u-scroll-list>
				<view v-for="(item, index) in start_point_positions" :key="index">
					<view style="margin-right: 10px">
						<u-button type="primary" icon="map" :text="item" v-if="index % 3 == 0" @click="check_position(item)"></u-button>
						<u-button type="success" icon="map" :text="item" v-if="index % 3 == 1" @click="check_position(item)"></u-button>
						<u-button
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
							icon="map"
							:text="item"
							v-if="index % 3 == 2"
							@click="check_position(item)"
						></u-button>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<u-line></u-line>
		<view class="area">
			<u-row>
				<u-col span="8">
					<u-button @click="timeshow = true">选择日期</u-button>
					<u-datetime-picker :show="timeshow" v-model="workerorder_time" mode="date" @confirm="confirm()" @cancel="timeshow = false"></u-datetime-picker>
				</u-col>
				<u-col span="4">
					<view style="font-size: 1.2rem">{{ workerorder_time | formatDate }}</view>
				</u-col>
			</u-row>
		</view>
		<u-line></u-line>
		<u-row gutter="30">
			<u-col span="4">
				<view>毛坯号</view>
			</u-col>
			<u-col span="3">
				<span>计划上件数</span>
			</u-col>
			<u-col span="3">
				<span>已经上件数</span>
			</u-col>
			<u-col span="2">
				<span>选中</span>
			</u-col>
		</u-row>
		<view class="area scrollable-container">
			<u-list>
				<u-list-item v-for="(item, index) in workerorder_list" :key="index">
					<u-row gutter="30">
						<u-col span="4">
							<u-tag :text="item.blankNumber" plain></u-tag>
						</u-col>
						<u-col span="3">
							<u-tag :text="item.previousNumber" plain></u-tag>
						</u-col>
						<u-col span="3">
							<u-tag type="success" :text="item.previousNumbered" plain></u-tag>
						</u-col>
						<u-col span="2">
							<u-switch v-model="item.selected" size="38" @change="switch_change(index, item.selected)"></u-switch>
							<u-modal :show="show_model" title="确认选中数量" @confirm="ingredient_confirm">
								<u--form labelPosition="left" labelWidth="240" :labelStyle="labelstyle">
									<u-form-item label="配料数量" borderBottom>
										<u--input v-model="ingredient" border="surround" type="number"></u--input>
									</u-form-item>
								</u--form>
							</u-modal>
						</u-col>
					</u-row>
					<u-line></u-line>
				</u-list-item>
			</u-list>
		</view>

		<u-button type="primary" size="big" text="生成配料任务" @click="generatetask"></u-button>
		<u-modal :show="task.show" :title="task.title" :content="task.content" @confirm="task.show = false"></u-modal>
		<u-loading-page :loading="loading" loading-text="加载数据中..." loading-color="#00ff00" icon-size="150"></u-loading-page>

	</view>
</template>

<script>
import { achievestartpoints, getworkorderlist, generatetasklist } from '@/api/materialManagement/MaterialProductionInput.js';

export default {
	data() {
		return {
			start_point_positions: [],
			select_position: '', //选中的 站点
			timeshow: false,
			workerorder_time: Number(new Date()),
			labelstyle: { 'font-size': '1.2rem' },
			workerorder_list: [],
			show_model: false,
			ingredient: 100,
			selected_index: null,
			message: false,
			task: {
				show: false,
				title: '生成配料任务',
				content: ''
			},
			loading:false
		};
	},
	filters: {
		formatDate: function (value) {
			// 创建一个 Date 对象，并使用时间戳初始化
			const date = new Date(value);

			// 提取年、月、日信息
			const year = date.getFullYear();
			const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
			const day = date.getDate();

			return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
		}
	},
	watch: {
		workerorder_time(newvalue, oldvalue) {
			this.get_workorder_list();
		}
	},
	mounted() {
		this.get_startpoints();
	},
	methods: {
		// todo 获取上料起点

		get_startpoints() {
			achievestartpoints().then((res) => {
				if (res.code == 200) {
					this.start_point_positions = res.data;
				}
			});
		},
		check_position(item) {
			this.select_position = item;
		},

		//todo  选择时间
		confirm() {
			this.timeshow = false;
		},
		//todo  根据日期获取工单
		get_workorder_list() {
			
			this.loading=true;
			// let date = new Date(this.workerorder_time);
			// date = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

			// 使用时间戳创建一个日期对象
			let date = new Date(this.workerorder_time);

			// 获取上海时区的时间偏移量（以分钟为单位）
			let offset = 8 * 60; // 上海时区为 UTC+8

			// 计算上海时区的时间
			let shanghaiTime = new Date(date.getTime() + offset * 60 * 1000);

			const query = {
				datetimespan: shanghaiTime
			};
			getworkorderlist(query).then((res) => {
				if (res.code == 200) {
					this.loading=false;
					this.workerorder_list = res.data;

					for (let item = 0; item < this.workerorder_list.length; item++) {
						this.workerorder_list[item].selected = false;
						this.workerorder_list[item].previousNumbered = 0;
					}
				}
			});
		},
		//todo  选中之后  弹窗
		switch_change(index, selected) {
			console.log('selected', selected);
			if (selected) {
				this.show_model = true;
				this.ingredient = this.workerorder_list[index].previousNumber;
				this.selected_index = index;
			} else {
				this.workerorder_list[index].previousNumbered = 0;
				// 使用 Vue.set 方法或 this.$set 方法来添加新的属性
				// this.$set(this.workerorder_list[index], 'previousNumbered', 0);
				// this.$nextTick(() => {
				// 	this.workerorder_list[index].previousNumbered = 0;
				// });
				this.$forceUpdate();
			}
		},
		//模态框  确认
		ingredient_confirm() {
			this.show_model = false;
			this.workerorder_list[this.selected_index].previousNumbered = this.ingredient;
		},
		// 生成配料任务
		generatetask() {
			let array1 = this.workerorder_list.filter((it) => it.selected);
			console.log(array1);
			let array = array1.map((it) => {
				return {
					workorder: it.clientWorkorder,
					partnumber: it.blankNumber,
					previousNumber: it.previousNumber,
					previousNumbered: it.previousNumbered
				};
			});
			console.log(array);
			const query = {
				agv_position: this.select_position,
				workorders: array
			};
			generatetasklist(query).then((res) => {
				if (res.code == 200) {
					this.task.show = true;
					this.task.content = '生产配料任务成功' + res.data;
					this.reset()
				}
			});
		},
		reset(){
			this.select_position="";
			this.selected_index=null;
			for (let i = 0; i < this.workerorder_list.length; i++) {
			    this.workerorder_list[i].previousNumbered = 0,
			    this.workerorder_list[i].selected = false
			}
			this.get_workorder_list();

		}
	}
};
</script>

<style scoped>
.area {
	background-color: white;
}
.scrollable-container {
	height: 400px;
	overflow: auto;
	border: 3px solid #ccc;
}
</style>
