<script setup lang="ts">
	import { onMounted, computed, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { getListAPI, getTaskDetailAPI, postOperateAPIZF,getProcessDesignProgressListByProcessDesignId, updateBaoGong,type ProcessDesignVO ,createProcessDesign,updateProcessDesign} from '@/services/moJuSheJiReport'
	import { useLoginStore } from '@/stores/modules/login'
	import { formatDate } from '@/utils/index'
	// import popup from './popup.vue';
	import { nextTick } from 'vue';

	const popup = ref<UniHelper.UniPopupInstance>()
	const userStore = useLoginStore()
	const userId = userStore.userInfo.userId
	const nickName = userStore.userInfo.nickName
	// 是否分页结束
	const isFinish = ref(false)
	// 是否触发下拉刷新
	const isTriggered = ref(false)
	const progress = ref(0)
	const imageLink = ref(0)
	const remark = ref('')
	const selectedId = ref(null);  // 定义 selectedId 变量

	// 定义 porps
	const props = defineProps<{
		orderState : string
	}>()

	const statusText = computed(() => {
		const text = props.orderState == '0' ? '上报进度' : '查看'
		return text
	})
	// 是否加载中标记，用于防止滚动触底触发多次请求
	const isLoading = ref(false)
	// 请求参数
	const queryParams : Required<any> = {
		pageNo: 1,
		pageSize: 5,
		owner: userId,
		//
		procedureStatusList: props.orderState,
		// 工序完成状态列表
		dispatchType: "ASSEMBLE",
		// 派工类型
		isReport: 1,
		pgType: 0,
	}
	const dataList = ref([])
	const showPopup = ref(false);

	const onPopupClose = (progress, imageLink, remark) => {

		// 这里可以添加关闭弹出框时的逻辑，例如重置某些状态
		showPopup.value = false;
		console.log(remark)

		const zid = selectedId.value;
		callApi(zid, progress, imageLink, remark)





		/* */

	};
	const submitDetail = async () => {
		const zid = selectedId.value;
		await callApi(zid, progress.value, imageLink.value, remark.value)
		popup.value.close()
	}
	const callApi = async (zid : Number, progress : Number, imageLink : String, remark : String) => {
		console.log(progress);
		if (progress > 0) {
			//调用报工接口，将录入的进度、图片链接和id传入进去
			await updateBaoGong(zid, progress, imageLink, remark);
			isFinish.value = false;
			isLoading.value = false;
			queryParams.pageNo = 1;
			dataList.value = [];
			await getListData();

		} else {
			uni.showToast({
				title: '设计进度填写时不能为0%，请重新填写后提交！',
				icon: 'none', // 显示纯文本时icon设为none
				duration: 2000
			});
		}
	}

	const getListData = async () => {
		queryParams.pgType = props.orderState;
		// 如果数据出于加载中，退出函数
		if (isLoading.value) return
		if (isFinish.value === true) {
			return uni.showToast({ icon: 'none', title: '没有更多数据~' })
		}

		isLoading.value = true
		// 发送请求
		const data = await getListAPI(queryParams)
		isLoading.value = false
		data.list.forEach((e) => {

			e.twoDimDate = formatDate(e.twoDimDate, "YYYY-MM-DD");
			e.threeDimDate = formatDate(e.threeDimDate, "YYYY-MM-DD");
			e.endTime = formatDate(e.endTime, "YYYY-MM-DD");
			e.startTwoDimDate = formatDate(e.startTwoDimDate, "YYYY-MM-DD");
			e.startThreeDimDate = formatDate(e.startThreeDimDate, "YYYY-MM-DD");
			e.startBlankDate = formatDate(e.startBlankDate, "YYYY-MM-DD");
			e.blankDate = formatDate(e.blankDate, "YYYY-MM-DD");
		})
		// 数组追加
		dataList.value.push(...data.list)
		// 分页条件
		if (queryParams.pageNo < data.total) {
			// 页码累加
			queryParams.pageNo++
		} else {
			// 分页已结束
			isFinish.value = true
		}
	}
	const formData = ref({
	  id: undefined,
	  planId: undefined,
	  processDesignType: undefined,
	  remark: undefined,
	  status: 1,
	  projectId: undefined,
	  projectSubId: undefined,
	  processDesignProgressList: [],
	})
	
	const formRef = ref() // 表单 Ref
	/** 重置表单 */
	const resetForm = () => {
	  formData.value = {
	    id: undefined,
	    planId: undefined,
	    processDesignType: undefined,
	    remark: undefined,
	    status: 1,
	    projectId: undefined,
	    projectSubId: undefined,
	    processDesignProgressList: [],
	  }
	  formRef.value?.resetFields()
	}
	
	
	const queryData = async (id?: number) => {
	  resetForm()
	  // 修改时，设置数据
	  if (id) {

	    try {
	      formData.value = await getTaskDetailAPI(id)
	      formData.value.processDesignProgressList = await getProcessDesignProgressListByProcessDesignId(id)
	      dataListAdd.value = formData.value.processDesignProgressList;
		  if( formData.value.processDesignProgressList != null &&  formData.value.processDesignProgressList.length > 0){
	        var maxTime = null;
	        if(formData.value.processDesignProgressList.length == 1){
	            formData.value.processDesignProgressList[0].hasNext = false;
	            if(formData.value.processDesignProgressList[0].endTime != null && formData.value.processDesignProgressList[0].endTime != ''){
	              formData.value.processDesignProgressList[0].maxTime = parseFloat((formData.value.processDesignProgressList[0].endTime - formData.value.processDesignProgressList[0].beginTime)/ (1000 * 60 * 60)).toFixed(2);
	            }
	        } else{
	          var maxIndex = 0;
	          for (let index = 0; index <  formData.value.processDesignProgressList.length; index++) {
	            var item = formData.value.processDesignProgressList[index];
	            if(item.endTime != null && item.endTime != ''){
	              item.maxTime =  parseFloat((item.endTime - item.beginTime)/ (1000 * 60 * 60)).toFixed(2);;
	            }
	            if(maxTime == null){
	              maxIndex = index;
	              maxTime = item.createTime;
	              item.hasNext = false;
	            }else{
	              if(item.createTime > maxTime){
	                formData.value.processDesignProgressList[maxIndex].hasNext = true;
	                maxIndex  = index;
	                item.hasNext = false;
	              }else{
	                item.hasNext = true;
	              }
	            }   
	            
	         }
	        }    
	      } 
	    } finally {

	    }
	  }
	}


	const submitForm = async (operate) => {

	  try {
		formData.value.id = selectedId.value
		formData.value.planId = updateItem.value.planId
		formData.value.projectId = updateItem.value.projectId
		formData.value.processDesignType = processDesignType.value
		formData.value.processDesignProgressList = dataListAdd.value;
	    const data = formData.value as unknown as ProcessDesignVO
	    let processDesignId;
	    if (!formData.value.id) {
	      processDesignId = await createProcessDesign(data)
	    } else {
	      processDesignId = await updateProcessDesign(data)
	    }
	    await queryData(selectedId.value)
		remark.value = ''
	  } finally {
	  }
	}
	onMounted(async () => {
		await getListData()
	})

	onShow(async () => {
		isFinish.value = false
		isLoading.value = false
		queryParams.pageNo = 1
		dataList.value = []
		await getListData()
	})


	const processDesignType = ref('')
	const updateItem = ref()
	const handleDetail = async (item) => {
		updateItem.value = item;
		processDesignType.value = item.processDesignType;
		if (props.orderState == 0) {
			progress.value = 0;
			imageLink.value = item.blueprintLink;
			remark.value = item.remark;
			await queryData(updateItem.value.id)
			await nextTick(); // 等待数据更新和DOM渲染
			// showPopup.value = true;
		
			popup.value?.open()
			selectedId.value = item.id;
		} else {
			const url = `/pages/moJuSheJiReport/moJuSheJiReport-detail?id=${item.id}&jd=${item.progress}`
			uni.navigateTo({ url })
		}
		// 为 selectedId 赋值
		/*  */
	}

	/* const viewClick = (item) => {
	  const params = {
		id: item.id
	  }
	  const data = await postOperateAPIZF(params);
	  await getListData();
	} */
	//作废
	const viewClick = async (item) => {
		const params = {
			id: item.id
		};
		const data = await postOperateAPIZF(params);
		if (data > 0) {
			const url = `/pages/zjPgMaster/zjPgMaster`

			uni.navigateTo({ url })
		}
	};

	
	// 自定义下拉刷新被触发
	const onRefresherrefresh = async () => {
		// 开始动画
		isTriggered.value = true
		// 重置数据
		queryParams.pageNo = 1
		dataList.value = []
		isFinish.value = false
		// 加载数据
		await getListData()
		// 关闭动画
		isTriggered.value = false
	}
	const handleClose = () => {
		popup.value.close();
	}

	const dataListAdd = ref([])
	/** 新增按钮操作 */
	const onAddItem = async () => {

		var date = new Date();
		if (processDesignType.value == 'BLUEPRINT_WORKBLANK') {
			if (updateItem.value.blankDate != null) {
				if (updateItem.value.blankDate < date.getTime()) {
					if (updateItem.value.isDelay == null || updateItem.value.isDelay == 0) {
						uni.showToast({ icon: 'none', title: '当前任务已超期,请延期后重试!' })
						return
					}
				}
			} else {
				uni.showToast({ icon: 'none', title: '毛坯结束时间为空!请确认!' })
				return
			}
		}
		if (processDesignType.value == 'BLUEPRINT_2D') {
			if (updateItem.value.twoDimDate != null) {
				if (updateItem.value.twoDimDate < date.getTime()) {
					if (updateItem.value.isDelay == null || updateItem.value.isDelay == 0) {
						uni.showToast({ icon: 'none', title: '当前任务已超期,请延期后重试!' })
						return
					}

				}
			} else {
				uni.showToast({ icon: 'none', title: '2D结束时间为空!请确认!' })
				return
			}
		}
		if (processDesignType.value == 'BLUEPRINT_3D') {
			if (updateItem.value.threeDimDate != null) {
				if (updateItem.value.threeDimDate < date.getTime()) {
					if (updateItem.value.isDelay == null || updateItem.value.isDelay == 0) {
						uni.showToast({ icon: 'none', title: '当前任务已超期,请延期后重试!' })
						return
					}
				}
			} else {
				uni.showToast({ icon: 'none', title: '3D结束时间为空!请确认!' })
				return
			}
		}
		if (processDesignType.value == 'BLUEPRINT_FOUNDRY_TECHNOLOGY') {
			console.log(updateItem.value.craftEndDate)
			if (updateItem.value.craftEndDate != null) {
				if (updateItem.value.craftEndDate < date.getTime()) {
					if (updateItem.value.isDelay == null || updateItem.value.isDelay == 0) {
						uni.showToast({ icon: 'none', title: '当前任务已超期,请延期后重试!' })
						return
					}
				}
			} else {
				uni.showToast({ icon: 'none', title: '工艺结束时间为空!请确认!' })

				return
			}
		}


		if (dataListAdd.value.length > 0) {
			var indexs = -1;
			for (var i = 0; i < dataListAdd.value.length; i++) {
				
				var item = dataListAdd.value[i];
				if(item.isOver == 0 || item.isOver == undefined){
					indexs = i;
				}
				if (item.endTime == null || item.endTime == '') {
					uni.showToast({ icon: 'none', title: '结束时间不能为空!请确认!' })
					return
				}
				if (item.workTime == null 
				) {
					uni.showToast({ icon: 'none', title: '已做时间不能为空!请确认!' })
					return
				}
			}
			if(indexs != -1){
				var s = changeDate2(dataListAdd.value[indexs])
			if(!s){
				uni.showToast({ icon: 'none', title: '日期不能小于开始日期及超过下一天!请确认!' })
				return
			}
			}

		}
		

		const row = {
			id: undefined,
			processDesignId: undefined,
			progress: undefined,
			blueprintLink: undefined,
			remark: '',
			createTime: date.getTime(),
			beginTime: date.getTime(),
			endTime: '',
			isOver: 0,
			workTime: '',
			beginTimeOpen: true,
			creatorName: nickName,
			status: 1,
		}
		row.remark = remark.value
		row.processDesignId = updateItem.value.id
		dataListAdd.value.unshift(row)
		await submitForm('SAVE');
	}
	const overRow = async () => {
		var indexs = -1;
		if (dataListAdd.value.length > 0) {
			for (var i = 0; i < dataListAdd.value.length; i++) {
				var item = dataListAdd.value[i];
				if (item.isOver == 0) {
					indexs = i;
				}
			}
		}
		// if (indexs == -1) {
		// 	uni.showToast({ icon: 'none', title: '不存在没有上报的数据，请确认！' })
		// 	return
		// }
		var row = dataListAdd.value[indexs];
		if (row.endTime == null || row.endTime == '') {
			row.endTime = new Date().getTime()
			var timeDiff = row.endTime - row.beginTime;

			// 将毫秒转换为小时
			row.workTime = parseFloat((timeDiff / (1000 * 60 * 60)).toFixed(2));
			row.maxTime = row.workTime;
			// row.workTime = row.endTime - row.
		}
		if (row.endTime == null || row.endTime == '') {
			uni.showToast({ icon: 'none', title: '结束时间不能为空!请确认!' })

			return
		}
		if (row.workTime == null ) {
					console.log(row.workTime)
			uni.showToast({ icon: 'none', title: '已做时间不能为空!请确认!' })
			return
		}
		console.log(row.beginTime)
		console.log(row.endTime)
		row.isOver = 1;
		await submitForm('SAVE');
		//更新一下这条数据的状态
	}
	// const searchVal = ref('')
	// const dataListDefault = ref([])
	// const handleSearch = async () => {
	//   const code = searchVal.value
	//   if (code) {
	//     dataListDefault.value = dataList.value
	//     dataList.value = dataList.value.filter((e) => {
	//       return e.code == code
	//     })
	//   } else {
	//     dataList.value = dataListDefault.value
	//   }
	// }
	const changeDate1 = (e,item) => {
		item.endTime = e
	}
	const oninput = (val, limit) => {
		val = val.replace(/[^\d.]/g, ""); //保留数字
		val = val.replace(/^00/, "0."); //开头不能有两个0
		val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
		val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
		val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
		/^0\d+/.test(val) ? val = val.slice(1) : ''; //两位以上数字开头不能为0
		const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
		const reg = new RegExp(str)
		if (limit === 0) {
			// 不需要小数点
			val = val.replace(reg, '$1')
		} else {
			// 通过正则保留小数点后指定的位数
			val = val.replace(reg, '$1.$2')
		}
		return val
	}
	// 表头配置参数
	const column = ref([
		{
			title: '开始时间',// th标题
			isSort: false, // 是否可排序
			isFixed: false, // 是否固定
			key: 'beginTime',// 对应字段，
			slot: 'beginTime',
			width: 5, // 宽度 width * 100 rpx,
		},
		{
			title: '结束时间',// th标题
			isSort: false, // 是否可排序
			isFixed: false, // 是否固定
			key: 'endTime', // 对应字段
			slot: 'endTime',
			width: 5, // 宽度 width * 100 rpx,

		},
		{
			title: '已做时间(小时)',// th标题
			isSort: false, // 是否可排序
			isFixed: false, // 是否固定
			key: 'workTime', // 对应字段
			slot: 'workTime'

		},
		{
			title: '备注',// th标题
			isSort: false, // 是否可排序
			isFixed: false, // 是否固定
			key: 'remark',
			slot: 'remark'
		}
	])
	const changeDate2 = (item) => {
		const today = new Date();
		const tomorrow = new Date(today);
		tomorrow.setDate(tomorrow.getDate() + 1); // 设置为明天
		tomorrow.setHours(23, 59, 59, 999);
		
		const beginDate = new Date(item.beginTime);
		const endtT = new Date(item.endTime);
		if (endtT.getTime() < beginDate.getTime() || endtT.getTime() > tomorrow.getTime()) {
			uni.showToast({ icon: 'none', title: '日期不能小于开始日期及超过下一天!请确认!' })
			return false;
		}else{
			return true
		}
	}
</script>
<template>
	<view class="cont">
		<!-- <view class="search" v-if="dataList.length > 5">
      <view class="title"></view>
      <input class="uni-input" v-model="searchVal" @change="handleSearch" placeholder="根据编号搜索" />
    </view> -->
		<scroll-view enable-back-to-top scroll-y class="data-list" refresher-enabled :refresher-triggered="isTriggered"
			@refresherrefresh="onRefresherrefresh" @scrolltolower="getListData">
			<view class="item" v-for="item in dataList" :key="item.id">
				<view class="hd">
					<view class="num">项目编号：</view>
					<view class="statusLabel"> {{item.projectCode}} </view>
					<view class="statusTexthd" v-if="item.processDesignType == 'BLUEPRINT_2D'"> 2D设计 </view>
					<view class="statusTexthd" v-else-if="item.processDesignType == 'BLUEPRINT_3D'"> 3D设计 </view>
					<view class="statusTexthd" v-else-if="item.processDesignType == 'BLUEPRINT_WORKBLANK'"> 毛坯设计 </view>
					<view class="statusTexthd" v-else-if="item.processDesignType == 'BLUEPRINT_FOUNDRY_TECHNOLOGY'">
						铸造设计 </view>

				</view>
				<view class="md">
					<view class="product-item">项目：{{ item.projectName }}</view>
					<view class="product-item">子项目：{{ item.projectSubCode || "" }}</view>
					<view class="product-item">客户名称：{{ item.customerName }}</view>
					<view class="product-item" v-if="item.processDesignType == 'BLUEPRINT_2D'">
						工艺起止日期：{{item.startTwoDimDate}} ～ {{item.twoDimDate}} </view>
					<view class="product-item" v-else-if="item.processDesignType == 'BLUEPRINT_3D'">
						工艺起止日期：{{item.startThreeDimDate}} ～ {{item.threeDimDate}} </view>
					<view class="product-item" v-else-if="item.processDesignType == 'BLUEPRINT_WORKBLANK'">
						工艺起止日期：{{item.startBlankDate}} ～ {{item.blankDate}} </view>
					<!-- 		  <view class="product-item"  v-else-if="item.processDesignType == 'BLUEPRINT_FOUNDRY_TECHNOLOGY'">工艺起止日期：{{item.twoDimDate}} ～ {{item.threeDimDate}} </view> -->


					<view class="product-item">最新进度：{{item.progress}}%</view>
					<!-- <view class="product-item">预计生产日期：{{ item.startTime }} ～ {{ item.entTime }}</view> -->
				</view>
				<view class="statusText" @click="handleDetail(item)">{{ statusText }}</view>
			</view>
			<!-- 底部提示文字 -->
			<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
				{{ isFinish ? '没有更多数据~' : '正在加载...' }}
			</view>
		</scroll-view>
		<!-- <popup  :show="showPopup" :progress="0.0" :imageLink="''" @close="onPopupClose" /> -->
		<uni-popup class="popup" ref="popup" :mask-click="true" type="bottom" background-color="#fff">
			<view class="title">
				<view class="text">填写信息</view>
				<view class="close" @click="handleClose">X</view>
			</view>

			<view class="cont">
				<th-table :column="column" :listData="dataListAdd" height="0.2" :stripe="true" :border="true">
					<!-- 具名作用域插槽 #后面写column里slot的值 -->
					<template #beginTime="Props">
						<!-- 子组件传递的参数 整个item  -->
						<uni-datetime-picker disabled type="datetime" style="text-align: center;" v-model="Props.item.beginTime"
							/>
					</template>
					<template #endTime="Props">
						<uni-datetime-picker :disabled="Props.item.hasNext" type="datetime" v-model="Props.item.endTime"
							@change="(e) => changeDate1(e,Props.item)"  />
					</template>
					<template #workTime="Props">
						<uni-easyinput :disabled="Props.item.hasNext" @change="Props.item.workTime = oninput(Props.item.workTime,2)" class="val"
							type="number" v-model="Props.item.workTime" placeholder="请输入本次报工工时"></uni-easyinput>

						<!--  		<p>{{Props.item.workTime}}</p> -->
					</template>
					<template #remark="Props">
						<uni-easyinput type="text" :disabled="Props.item.hasNext" v-model="Props.item.remark" placeholder="请输入备注" />
					</template>
				</th-table>

				<view class="item">
					<view class="label"><span class="star"></span>备注：</view>
				</view>

				<uni-easyinput type="textarea" class="popup-input" v-model="remark" placeholder="请输入备注" />
			</view>
			<!-- 			<view class="cont"> -->
			<!-- 	    <view class="item">
	      <view class="label"><span class="star">*</span>进度百分比：</view>
	      <uni-easyinput class="val" type="number" v-model="progress" placeholder="请输入本次报工工时"></uni-easyinput>
	      <view class="unit">%</view>
	    </view>
	    <view class="item">
	      <view class="label"><span class="star">*</span>图纸连接：</view>
	    </view>
		<uni-easyinput type="textarea" v-model="imageLink" placeholder="请输入图纸链接"></uni-easyinput> -->
			<!-- 								<div class="container">
					<div class="one-area">开始时间</div>
					<div class="one-area">结束时间</div>
					<div class="one-area">已做时间(小时)</div>
					<div class="one-area">备注</div>
				</div>
				<div v-for="(item,index) in dataListAdd" :key="index">
					<div class="container1">
						<div class="one-area1">
							<uni-datetime-picker type="datetime" v-model="item.beginTime" @change="changeDate1" />
						</div>
						<div class="one-area2">
							<uv-datetime-picker :ref=datetimePicker2 v-model="item.endTimeOpen " mode="datetime"
								:formatter="formatter1" @confirm="confirm2">
							</uv-datetime-picker>
						</div>
						<div class="one-area1">
							<uni-easyinput class="val" type="number" v-model="item.workTime"
								placeholder="请输入已做时间"></uni-easyinput>
						</div>
						<div class="one-area1">
							<uni-easyinput type="textarea" v-model="item.remark" placeholder="请输入备注"></uni-easyinput>
							
				</div>
				</div>

				</div> -->
			<!-- <view class="item">
					<view class="label"><span class="star"></span>备注：</view>
				</view>

				<uni-easyinput type="textarea" class="popup-input" v-model="remark" placeholder="请输入备注" /> -->
			<!-- 			</view> -->
			<div class="container1">
				<div class="half1">
					<view class="ok" @click="onAddItem()">开始</view>
				</div>
				<div class="half1">
					<view class="over" @click="overRow()">结束</view>
				</div>

			</div>

		</uni-popup>
		<!-- <popup :showPopup="showPopup" :progress="progress" :imageLink="imageLink" :remark="remark" @close="onPopupClose" />   -->
	</view>
</template>

<style lang="scss">
	.container {
		display: flex;
		width: 630rpx;
		margin-top: -10%;
	}

	.container1 {
		padding: 1%;
		display: flex;
		width: 100%;
	}

	.half1 {
		flex: 1;
		text-align: left;
		font-size: 15px;

	}

	.one-area {
		flex: 1;
		text-align: center;
		padding: 12px;
		font-size: 15px;
		font-weight: bold;
	}

	.one-area1 {
		flex: 1;
		text-align: center;
		padding: 2px;
		font-size: 15px;
		font-weight: bold;
	}

	.one-area2 {
		flex: 1.2;
		text-align: center;
		padding: 2px;
		font-size: 15px;
		font-weight: bold;
	}

	// 订单列表
	.search {
		padding: 4rpx;
		width: 80%;
		margin: 30rpx auto;

		.uni-input {
			border: 1px solid #D1D6DB;
			height: 60rpx;
			line-height: 60rpx;
			padding: 4rpx 10rpx;
			font-size: 32rpx;
			border-radius: 6rpx;
		}
	}

	.popup {
		.title {
			line-height: 1;
			padding: 40rpx;
			font-size: 32rpx;
			font-weight: normal;
			border-bottom: 1rpx solid #ddd;
			color: #444;

			.close {
				position: absolute;
				right: 24rpx;
				top: 40rpx;
				height: 60rpx;
				width: 60rpx;
				text-align: center;
			}
		}

		.cont {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 40rpx;
			height: 50vh;

			.item {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				color: #737D88;
				width: 94%;

				.label {
					font-size: 32rpx;
					width: 260rpx;

					.star {
						color: red
					}
				}

				.val {
					flex: 1;
					font-size: 32rpx;
				}

				.unit {
					width: 100rpx;
					margin-left: 4rpx;
					text-align: center;
				}
			}
		}

		.ok {
			font-size: 32rpx;
			margin: 20rpx auto 80rpx;
			text-align: center;
			width: 200rpx;
			border-radius: 10rpx;
			padding: 8rpx 0;
			background-color: #3C8AF7;
			color: #fff;
		}

		.over {
			font-size: 32rpx;
			margin: 20rpx auto 80rpx;
			text-align: center;
			width: 200rpx;
			border-radius: 10rpx;
			padding: 8rpx 0;
			background-color: orangered;
			color: #fff;
		}
	}

	.data-list {
		height: 90vh;

		.item {
			position: relative;
			padding: 20rpx 0;
			margin: 20rpx 20rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.hd {
				padding: 10rpx;
				font-size: 28rpx;
				display: flex;

				.statusLabel {
					font-size: 24rpx;
					color: #737D88;
				}

				.statusLabelzf {
					font-size: 24rpx;
					position: absolute;
					right: 30rpx;
					top: 15rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					padding: 10rpx 30rpx;
					border-radius: 10rpx;
					font-size: 24rpx;
					background: linear-gradient(149deg, #ffff00 4%, #cfcf00 98%);
					color: #fff;

				}
			}

			.md {
				position: relative;
				padding: 10rpx;
				min-height: 100rpx;
				font-size: 28rpx;
				border-top: 2rpx solid #F2F2F2;

				.product-item {
					margin: 20rpx 0;
					display: flex;
					align-items: left;
					color: #737D88
				}

				.product-row {
					margin: 20rpx 0;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					color: #737D88;

					.row-item {
						flex: 1;

						.label {
							margin-bottom: 10rpx;
						}

						.val {
							color: #1D2129;

							&.high-color {
								color: #00B42A
							}
						}
					}

				}
			}

			.statusText {
				position: absolute;
				right: 30rpx;
				top: 100rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				background: linear-gradient(149deg, #d4e62d 4%, #c5ab1a 98%);
				color: #fff;
			}

			.statusTexthd {
				position: absolute;
				right: 30rpx;
				top: 13rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				padding: 10rpx 30rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				background: #2d9ce6;
				color: #fff;
			}

			&:last-child {
				padding-bottom: 40rpx;
			}

		}

		.status {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 15rpx;

			.date {
				color: #666;
				flex: 1;
			}

			.primary {
				color: #ff9240;
			}

			.icon-delete {
				line-height: 1;
				margin-left: 10rpx;
				padding-left: 10rpx;
				border-left: 1rpx solid #e3e3e3;
			}
		}

		.goods {
			display: flex;
			margin-bottom: 20rpx;

			.cover {
				width: 170rpx;
				height: 170rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				.image {
					width: 170rpx;
					height: 170rpx;
				}
			}

			.quantity {
				position: absolute;
				bottom: 0;
				right: 0;
				line-height: 1;
				padding: 6rpx 4rpx 6rpx 8rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 10rpx 0 0 0;
				background-color: rgba(0, 0, 0, 0.6);
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.type {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 10rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.more {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				color: #333;
			}
		}

		.payment {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			line-height: 1;
			padding: 20rpx 0;
			text-align: right;
			color: #999;
			font-size: 28rpx;
			border-bottom: 1rpx solid #eee;

			.quantity {
				font-size: 24rpx;
				margin-right: 16rpx;
			}

			.amount {
				color: #444;
				margin-left: 6rpx;
			}

			.symbol {
				font-size: 20rpx;
			}
		}

		.action {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 20rpx;

			.button {
				width: 180rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 60rpx;
				border: 1rpx solid #ccc;
				font-size: 26rpx;
				color: #444;
			}

			.secondary {
				color: #3775F6;
				border-color: #3775F6;
			}

			.primary {
				color: #fff;
				background-color: #3775F6;
				border-color: #3775F6;
			}
		}

		.loading-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}
	}
</style>import type { stringify } from 'querystring';