<script setup lang="ts">
	import { ref } from 'vue';
import { getAction } from '../../common/http';
import { formatDate } from '../../utils/date';

	const list = ref([] as any[])
	const form = ref({} as any)
	
	const init=()=>{
		list.value=[]
		getAction('/tracking/op',{...form.value}).then((res:any)=>{
			if(res.code===200){
				res.data.forEach((l:any)=>{
					if(l.logs.length>0){
						l.trackingLog.yjccrq=addDaysToDate(l.logs[0].details.form.czrq , l.logs[0].details.form.yjccts)
						if(l.logs.length>1&&l.logs[l.logs.length-1].details.zt!='已出厂'){
							l.trackingLog.yjxybrq=l.logs[l.logs.length-1].details.form.yjxybrq
						}else{
							l.trackingLog.yjxybrq='暂无'
						}
					}else{
						l.trackingLog.yjccrq='暂无'
					}
					list.value.push(l.trackingLog)
				})
			}
		})
	}
	
	const secarch = () =>{
		init()
	}
	
	const onClickLeft = () => {
		history.back()
	}
	
	const zms = (xxs:any) =>{
		let ms=0
		xxs.forEach((l:any)=>{
			ms+=l.ms*1
		})
		return ms.toFixed(1)
	}
	//日期差
	function dateDiffInDays(date1:any, date2:any) {
	  // 将日期字符串转换为 Date 对象
	  const dt1 = new Date(date1);
	  const dt2 = new Date(date2);
	
	  // 计算时间差（以毫秒为单位）
	  const timeDifference = dt2 - dt1;
	
	  // 将时间差转换为天数
	  const daysDifference = timeDifference / (1000 * 3600 * 24);
	
	  // 返回绝对值，因为结果可能是负数，取决于哪个日期更早
	  return Math.abs(Math.round(daysDifference));
	}
	function addDaysToDate(date:any, days:any) {
	  // 将传入的 date 转换为 Date 对象
	  const result = new Date(date);
	  
	  // 设置时间为0点，以避免时区影响
	  result.setHours(0, 0, 0, 0);
	
	  // 增加天数
	  result.setDate(result.getDate() + days);
	
	  // 返回新的日期
	  return formatDate(result);
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="订单状态查询" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view style="display: flex;align-items: center;">
			<van-field class="bor" label="谁定" label-width="2.5em" colon v-model="form.sd" />
			<van-field class="bor" label="做单人" label-width="3.5em" colon v-model="form.makeUser" />
			<view style="width: 20%;margin-right: 5rpx;">
				<van-button type="primary" style="width: 3rem;" @click="secarch">搜索</van-button>
			</view>
		</view>
		<view class="content">
			<view class="card" v-for="(item,index) in list">
				<view class="grid-container">
					<view class="grid-item">进厂日期：{{formatDate(new Date(item.createTime))}}</view>
					<view class="grid-item" style="text-align: end;">当前进度：<text style="color: red;">{{item.zt}}</text></view>
					<view class="grid-item">百合白，{{item.sd}}定</view>
					<view class="grid-item" style="text-align: center;">做单人：{{item.makeUser}}</view>
					<template v-for="(itemSecond,indexSecond) in item.mls">
						<view class="grid-item">{{itemSecond.mz}}</view>
						<view class="grid-item" style="text-align: center;">约{{zms(itemSecond.xxs)}}米~{{itemSecond.xxs.length}}匹</view>
					</template>
					<view class="grid-item">在厂天数：{{dateDiffInDays(item.createTime,new Date())}}天</view>
					<view class="grid-item" style="text-align: center;">预计出厂日期：{{item.yjccrq}}</view>
					<view class="grid-item">当前进度：{{item.zt}}</view>
					<view class="grid-item" style="text-align: center;">当前操作日期：{{formatDate(new Date(item.updateTime))}}</view>
					<view class="grid-item"></view>
					<view class="grid-item" style="text-align: center;">预计下一步日期：{{item.yjxybrq}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow-y: hidden;
		background-color: #fcfcfc;
	}

	.content {
		flex: 1;
		overflow-y: scroll;
	}

	.bor {
		::v-deep .van-field__control {
			border-bottom: 1px solid #d7d7d7;
		}
	}

	::v-deep .van-button--normal {
		padding: 5px 8px;
		height: 30px;
	}
	::v-deep .van-cell{
		background-color: #fcfcfc;
	}

	.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		font-size: 14px;
		.grid-item{
			padding: 10rpx 0;
		}
	}
	.card{
		background-color: #fff;
		padding: 5rpx 15rpx;
		margin-top: 10rpx;
	}
</style>