<!-- 仓库配料 -->
<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="选择站点"
					></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" :text="item" v-if="index % 3 == 0" @click="check_position(item)"></u-button>
						<u-button type="success" :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))"
							: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="2">
				<span>计划上件数</span>
			</u-col>
			<u-col span="2">
				<span>已经上件数</span>
			</u-col>
			<u-col span="4">
				<span>选中</span>
			</u-col>
		</u-row>
		<view class="area scrollable-container">
			<u-list height="330px">
				<u-list-item v-for="(item, index) in workerorder_list" :key="index">
					<u-row gutter="30">
						<u-col span="4">
							<u-tag v-if="containsChinese(item.clientWorkorder)" :text="item.blankNumber" size="large" type="warning"></u-tag>
							<u-tag v-else :text="item.blankNumber" size="large"></u-tag>
						</u-col>
						<u-col span="2">
							<u-tag v-if="containsChinese(item.clientWorkorder)" :text="item.previousNumber" size="large" type="warning"></u-tag>
							<u-tag v-else :text="item.previousNumber"></u-tag>
						</u-col>
						<u-col span="2">
							<u-tag type="success" :text="item.previousNumbered" plain></u-tag>
						</u-col>
						<u-col span="4">
							<u-switch v-model="item.selected" size="60" asyncChange @change="switch_change(index, item.selected)"></u-switch>
						</u-col>
					</u-row>
					<u-line style="margin-top: 10px"></u-line>
				</u-list-item>
			</u-list>
		</view>
		<uni-pagination show-icon="true" :total="page.total" :current="page.pageNum" :pageSize="page.pageSize" @change="changepage"></uni-pagination>
		<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-button style="margin-top: 10px" 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>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
import { achievestartpoints, getworkorderlist, generatetasklist } from '@/api/materialManagement/MaterialProductionInput.js';
import { printDate } from '@/utils/common';
export default {
	data() {
		return {
			start_point_positions: [],
			select_position: '', //选中的 站点
			timeshow: false,
			workerorder_time: Number(new Date()),
			page: {
				pageNum: 1,
				pageSize: 10,
				total: 0
			},
			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: {},
	mounted() {
		this.get_startpoints();
		this.get_workorder_list();
	},
	methods: {
		containsChinese(str) {
			var pattern = /[\u4e00-\u9fa5]/;
			return pattern.test(str);
		},
		// 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;
			this.$nextTick(() => {
				this.get_workorder_list();
			});
		},
		//todo 下拉更新
		changepage({ type, current }) {
			this.page.pageNum = current;

			this.$nextTick(() => {
				this.get_workorder_list();
			});
		},
		//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);
			console.log('shanghaiTime', shanghaiTime);
			const query = {
				datetimespan: shanghaiTime,
				pageNum: this.page.pageNum,
				pageSize: this.page.pageSize
			};
			getworkorderlist(query).then((res) => {
				if (res.code == 200) {
					this.loading = false;
					//提示
					this.$refs.uNotify.show({
						top: 100,
						type: 'success',
						message: '获取工单数据成功，共' + res.data.item1.length + '条。时间为' + printDate(shanghaiTime),
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					});
					this.workerorder_list = res.data.item1;
					this.page.total = res.data.item2;
					// 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;
					}
					console.log('this.workerorder_list', this.workerorder_list);
				}
			});
		},
		//todo  选中之后  弹窗
		switch_change(index, selected) {
			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;
				this.workerorder_list[index].selected = false;
				// 使用 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;
			this.workerorder_list[this.selected_index].selected = true;
		},
		// 生成配料任务
		generatetask() {
			if (this.select_position === '' || this.select_position === null) {
				uni.showModal({
					title: '提示',
					content: '站点未输入，请输入站点',
					showCancel: false,
					confirmText: '确认',
					success: (res) => {}
				});
				return;
			}
			let array1 = this.workerorder_list.filter((it) => it.selected);
			let array = array1.map((it) => {
				return {
					workorder: it.clientWorkorder,
					blanknumber: it.blankNumber,
					previousNumber: it.previousNumber,
					previousNumbered: it.previousNumbered
				};
			});
			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 {
	overflow: auto;
	border: 3px solid #9e9b99;
}

.u-item {
}
</style>
