<script setup lang="ts">
	import { toRaw, ref, computed } from 'vue'
	import { formatDate } from '@/utils/index'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useLoginStore } from '@/stores/modules/login'

	import { getTaskRepotPageAPI, getTaskDetailAPI, postOperateAPI, postOperateAPIEnd, type ProcessDesignVO, createProcessDesign, updateProcessDesign, getProcessDesignProgressListByProcessDesignId } from '@/services/moJuSheJiReport'
	const popup = ref<UniHelper.UniPopupInstance>()
	const userStore = useLoginStore()
	const dictInfo = userStore?.dictInfo || []
	const unitDictData = dictInfo.filter(e => e.dictType == 'heli_material_unit') || []
	const userId = userStore.userInfo.userId

	const isShowStart = computed(() => {
		let flag = true
		if (historyList.value.length) {
			const obj = historyList.value[0]
			if (!obj?.endTime) {
				flag = false
			}
		}
		// // 派工数量和总报工数量相等了就不展示开始生产
		// if (detailInfo.value.amount == detailInfo.value.totalReportAmount) {
		//   flag = false
		// }
		return flag
	})
	const isShowEnd = computed(() => {
		let flag = true
		if (historyList.value.length) {
			const obj = historyList.value[0]
			if (obj?.endTime) {
				flag = false
			}
		} else {
			flag = false
		}
		return flag
	})
	const productionTitle = ref('开始生产')
	const amount = ref('')
	const workTime = ref('')
	// 详情数据
	const detailInfo = ref({})
	let isLoading = ref(false)
	const historyList = ref([])
	const formObj = ref({})
	// 历史明细
	const getData = async () => {
		// 发送请求
		isLoading.value = true
		const params = {
			pageNo: 1,
			integerpageSize: 5,
			processDesignId: detailInfo.value.id,
		}
		detailInfo.value.active = 'START'
		const data = await getTaskRepotPageAPI(params)
		historyList.value = data.list
		if (historyList.value != null && historyList.value.length > 0) {
			for (var i = 0; i < historyList.value.length; i++) {
				var item = historyList.value[i];
				if (item.isOver == 0) {
					formObj.value = item;
					detailInfo.value.active = 'STOP'
				}
			}
		}
		isLoading.value = false
	}
	// 详情
	const getDetailData = async (id) => {
		// 发送请求
		// isLoading.value = true
		const params = {
			id,
		}
		const data = await getTaskDetailAPI(id)
		data.twoDimDate = formatDate(data.twoDimDate, 'YYYY-MM-DD')
		data.threeDimDate = formatDate(data.threeDimDate, 'YYYY-MM-DD')


		// 单位枚举
		const lineObj = unitDictData.find((q) => q.value == data.unit) || {}
		data.unit = lineObj.label
		const jd = detailInfo.value.progress
		detailInfo.value = data || {}
		detailInfo.value.progress = jd;
		isLoading.value = false
	}
	onLoad(async (options : any) => {

		detailInfo.value.progress = options.jd;
		await getDetailData(options.id)
		await getData()
		const obj = historyList.value[0]
		// 最新的报工是否完成
		// if (obj && obj?.workTime == null && obj.endTime) {
		// 	popup.value?.open()
		// }
	})

	// 生产完成
	const handleComplate = async () => {
		/* const params = {
		   id: detailInfo.value?.id,
		   active: 'FINISH',
		   ownerId: userId,
		 }
		 const data = await postOperateAPI(params)
		 const url = `/pages/productionReport/productionReport-detail?id=${detailInfo.value.id}`
		 uni.redirectTo({
		   url,
		 }) */
	}

	const processDesignType = ref('')
	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 submitForm = async (operate, type) => {
		isLoading.value = true;
		try {
			formData.value.id = detailInfo.value.id
			formData.value.planId = detailInfo.value.planId
			formData.value.projectId = detailInfo.value.projectId
			formData.value.processDesignType = detailInfo.value.processDesignType
			formData.value.processDesignProgressList = historyList.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(detailInfo.value.id, type)
		} finally {
			isLoading.value = false
		}
	}
	const queryData = async (id ?: number, type : string) => {
		isLoading.value = true
		resetForm()
		// 修改时，设置数据
		if (id) {

			try {
				formData.value = await getTaskDetailAPI(id)
				formData.value.processDesignProgressList = await getProcessDesignProgressListByProcessDesignId(id)
				historyList.value = formData.value.processDesignProgressList;
				detailInfo.value.active = 'START'
				if (historyList.value != null && historyList.value.length > 0) {
					for (var i = 0; i < historyList.value.length; i++) {
						var item = historyList.value[i]
						if (item.isOver == 0) {
							formObj.value = item;
							detailInfo.value.active = 'STOP'
							break;
						}
					}
				}
				isLoading.value = false
				if (type == 'ADD') {
					popup.value?.open();
				}
				// 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;
				//            }
				//          }   

				//       }
				//      }    
				//    } 
				isLoading.value = false

			} finally {
				isLoading.value = false
			}
		}
	}

	const overRow = async (row : any) => {
		if (row.endTime == null) {
			row.endTime = new Date().getTime()
			var timeDiff = row.endTime - row.beginTime;

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

		if (new Date(row.beginTime).getTime() > new Date(row.endTime).getTime()) {
			uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间!请确认!' })
			return
		}
		if (row.workTime == null
		) {
			uni.showToast({ icon: 'none', title: '已做时间不能为空!请确认!' })

			return
		}
		formData.value.processDesignProgressList.forEach((item) => {
			if (item.isOver == 0) {
				item.workTime = row.workTime;
				item.endTime = new Date(row.endTime).getTime();
				item.remark = (row.remark == null || row.remark == '') ? '' : row.remark
			}
		})

		row.isOver = 1;
		await submitForm('SAVE', 'OVER');
		//更新一下这条数据的状态
	}
	const handOver = () => {

	}
	/** 新增按钮操作 */
	const onAddItem = async () => {
		//条件修改：没有时间就不填
		var date = new Date();
		if (processDesignType.value == 'BLUEPRINT_WORKBLANK') {
			if (detailInfo.value.blankDate != null) {
				if (detailInfo.value.blankDate < date.getTime()) {
					if (detailInfo.value.isDelay == null || detailInfo.value.isDelay == 0) {
						uni.showToast({ icon: 'none', title: '当前任务已超期,请延期后重试!' })
						return
					}
				}
			} else {
				//  message.error("毛坯结束时间为空!请确认!")
				//    return
			}
		}
		if (processDesignType.value == 'BLUEPRINT_2D') {
			if (detailInfo.value.twoDimDate != null) {
				if (detailInfo.value.twoDimDate < date.getTime()) {
					if (detailInfo.value.isDelay == null || detailInfo.value.isDelay == 0) {
						uni.showToast({ icon: 'none', title: '当前任务已超期,请延期后重试!' })
						return
					}

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


		if (historyList.value != null && historyList.value.length > 0) {
			for (var i = 0; i < historyList.value.length; i++) {
				var item = historyList.value[i];
				if (item.isOver == 0) {
					uni.showToast({ icon: 'none', title: '上一项进度未结束汇报,请确认!' })

					return;
				}
				// if(item.endTime == null ){
				//     message.error("结束时间不能为空!请确认!")
				//     return
				//   }
				//   if(item.workTime == null 
				//   ){
				//     message.error("已做时间不能为空!请确认")
				//     return
				//   }
			}
		}



		const row = {
			id: undefined,
			processDesignId: undefined,
			progress: undefined,
			blueprintLink: undefined,
			remark: '',
			createTime: date.getTime(),
			beginTime: date.getTime(),
			endTime: undefined,
			isOver: 0,
			workTime: undefined,
			creatorName: userStore.userInfo.nickname,
			status: 1,
		}
		row.processDesignId = detailInfo.value.progress
		historyList.value.unshift(row)
		await submitForm('SAVE', 'STOP');
	}

	// 提交报工
	const handleOk = async (active) => {
		const params = {
			zjMxId: detailInfo.value?.id,
			amount: amount.value,
			workTime: workTime.value,
			bgUser: userId,
		}
		const data = await postOperateAPIEnd(params)
		const url = `/pages/zjPgMaster/zjPgMaster-detail?id=${detailInfo.value.id}`
		uni.redirectTo({
			url,
		})
	}
	// 开始生产
	const handleStart = async () => {
		const params = {
			zjMxId: detailInfo.value?.id,
			workTime: workTime.value,
			bgUser: userId,
		}
		const data = await postOperateAPI(params)
		const url = `/pages/zjPgMaster/zjPgMaster-detail?id=${detailInfo.value.id}`
		uni.redirectTo({
			url,
		})

		/* const params = {
		  id: detailInfo.value.id,
		  active: 'START',
		  ownerId: userId,
		}
		const data = await postOperateAPI(params)
		const url = `/pages/productionReport/productionReport-detail?id=${detailInfo.value.id}`
		uni.redirectTo({
		  url,
		})
		productionTitle.value = '生产中' */
	}
	// 结束生产
	const handleStop = async () => {
		popup.value?.open();
		/* const params = {
		  id: detailInfo.value?.id,
		  active: 'END',
		}
		const data = await postOperateAPI(params)
		const url = `/pages/productionReport/productionReport-detail?id=${detailInfo.value.id}`
		uni.redirectTo({
		  url,
		})
		popup.value?.open() */
	}
	const getWorkTime = (beginTime, endTime) => {
		if (beginTime == null || endTime == null) return ''
		return parseFloat(((new Date(endTime).getTime() - new Date(beginTime).getTime()) / (1000 * 60 * 60)).toFixed(2))
	}
	const showPopup = ref(false)
	const formatDate = (datet) => {
		if (datet == null) return ''
		const date = new Date(datet)
		const year = String(date.getFullYear())
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		const hours = String(date.getHours()).padStart(2, '0')
		const minutes = String(date.getMinutes()).padStart(2, '0')
		const seconds = String(date.getSeconds()).padStart(2, '0')

		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
	const openPops = (item) => {
		if (item.isOver == 0) {
			popup.value?.open()
			formObj.value = item
		}
	}
	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 changeDate1 = (e, item) => {
		item.endTime = new Date(e).getTime()
		if (item.beginTime != null) {
			if (new Date(item.beginTime).getTime() > new Date(e).getTime()) {
				formObj.value.workTime = null
				uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间,请确认!' })
			} else {
				formObj.value.workTime = getWorkTime(item.beginTime, item.endTime)
			}
		} else {
			formObj.value.workTime = null
		}
		//item.workTime = getWorkTime(item.beginTime, item.endTime)
	}
	const changeDate2 = (e, item) => {
		item.beginTime = new Date(e).getTime()
		if (item.endTime != null) {
			if (new Date(item.endTime).getTime() < new Date(e).getTime()) {
				formObj.value.workTime = null
				uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间,请确认!' })
			} else {

				formObj.value.workTime = getWorkTime(item.beginTime, item.endTime)
			}
		} else {
			formObj.value.workTime = null
		}

	}
</script>
<template>
	<view class="data-detail">
		<template v-if="!isLoading">
			<view class="module">
				<view class="module-info">
					<!-- <view class="statusTexthd" v-if="detailInfo.processDesignType == 'BLUEPRINT_2D'" > 2D设计 </view>
		    <view class="statusTexthd" v-else-if ="detailInfo.processDesignType == 'BLUEPRINT_3D'"> 3D设计 </view>
			<view class="statusTexthd" v-else-if="detailInfo.processDesignType == 'BLUEPRINT_WORKBLANK'"> 毛坯设计 </view>
			<view class="statusTexthd" v-else-if="detailInfo.processDesignType == 'BLUEPRINT_FOUNDRY_TECHNOLOGY'"> 铸造设计 </view> -->
					<view class="md">
						<view class="product-item">项目：{{detailInfo.projectName}}</view>
						<image src="/static/images/productionReport-page.png" class="product-img" mode="scaleToFill">
						</image>
						<view :class="[detailInfo.isOverProcess == 1 ? 'had' : 'unhad', 'product-status']">{{
				  detailInfo.isOverProcess == 1 ? '已完成' : '实施中' }}</view>
						<view class="product-item">子项目：{{ detailInfo.projectSubCode || '' }}
							{{' ' + detailInfo.projectSubName }}
						</view>
						<view class="product-item" v-if="detailInfo.processDesignType == 'BLUEPRINT_2D'"> 设计类型：2D设计
						</view><!-- -->
						<view class="product-item" v-else-if="detailInfo.processDesignType == 'BLUEPRINT_3D'"> 设计类型：3D设计
						</view>
						<view class="product-item" v-else-if="detailInfo.processDesignType == 'BLUEPRINT_WORKBLANK'">
							设计类型：毛坯设计 </view>
						<view class="product-item"
							v-else-if="detailInfo.processDesignType == 'BLUEPRINT_FOUNDRY_TECHNOLOGY'"> 设计类型：铸造设计
						</view>
						<view class="product-item">客户名称：{{detailInfo.customerName}}</view>
						<view class="product-item" v-if="detailInfo.processDesignType== 'BLUEPRINT_2D'">
							工艺起止日期：{{formatDate(detailInfo.startTwoDimDate)}} ～ {{formatDate(detailInfo.twoDimDate)}}
						</view>
						<view class="product-item" v-else-if="detailInfo.processDesignType== 'BLUEPRINT_3D'">
							工艺起止日期：{{formatDate(detailInfo.startThreeDimDate)}} ～
							{{formatDate(detailInfo.threeDimDate)}}
						</view>
						<view class="product-item" v-else-if="detailInfo.processDesignType== 'BLUEPRINT_WORKBLANK'">
							工艺起止日期：{{formatDate(detailInfo.startBlankDate)}} ～ {{formatDate(detailInfo.blankDate)}}
						</view>
					</view>
				</view>
			</view>
			<view class="module-list">
				<view class="module-title">历史报工明细</view>
				<view class="history-list">
					<view class="no-data" v-if="!historyList.length">
						无数据...
					</view>
					<template v-else>
						<view class="item" v-for="(item, index) in historyList" :key="item.id" @click="openPops(item)">
							<!-- <view class="product-row">
				<view class="row-item">
				  <view class="label">报工人：</view>
				  <view class="val high-color">{{ item.userName }}</view>
				</view>
			</view> -->
							<view class="product-item">开始时间：{{ formatDate(item.beginTime) }}</view>
							<!-- <view class="product-item">生产结束时间：{{ item.endTimeStr }}</view> -->
							<view class="product-item">结束时间：{{formatDate(item.endTime) }}</view>
							<!--              <view class="product-row">
                <view class="row-item">
                  <view class="label">设计进度：</view>
                  <view class="val high-color">{{ item.progress }}%</view>
                </view>
                <view class="row-item">
                  <view class="label">图纸链接：</view>
                  <view class="val high-color">{{ item.blueprintLink }}</view>
                </view>
              </view> -->
							<view class="product-item">
								已做时间（小时）：{{ getWorkTime(item.beginTime,item.endTime)  }}
							</view>
							<view class="product-item">备注：{{ item.remark }}</view>
							<view class="tip-index">
								<image src="/static/images/productionReport-detail-index.png" class="icon-status"
									mode="scaleToFit">
								</image>
								<view class="text">{{historyList.length - index}}</view>
							</view>

						</view>
					</template>
				</view>
			</view>
			<view class="action" v-if="detailInfo.isOverProcess !== 1">
				<view class="action-item start" v-if="detailInfo.active == 'START'" @click="onAddItem()">开始</view>
				<view class="action-item stop" v-if="detailInfo.active != 'START'" @click="handleStop()">结束</view>

				<!-- 	<view class="action-item start" v-if="detailInfo.active == 'START'" @click="onAddItem()">开始</view>
				<view class="action-item stop" v-if="detailInfo.active != 'START'" @click="handleStop()">结束</view> -->
			</view>
		</template>
		<view class="loading-text" v-else>加载中..</view>
		<uni-popup class="popup" ref="popup" :show="showPopup" type="bottom" background-color="#fff">
			<view class="title">
				<view class="text">填写信息</view>
				<!-- <view class="close" @click="handleClose">X</view> -->
			</view>
			<view class="cont">
				<view class="item">
					<view class="label">开始时间</view>
					<view class="val"><uni-datetime-picker type="datetime" style="text-align: center;"
							@change="(e) => changeDate2(e,formObj)" v-model="formObj.beginTime" /></view>
				</view>
				<view class="item">
					<view class="label">结束时间</view>
					<view class="val"> <uni-datetime-picker style="text-align: center;" type="datetime"
							v-model="formObj.endTime" @change="(e) => changeDate1(e,formObj)" /></view>
				</view>
				<view class="item">
					<view class="label">已做时间</view>
					<uni-easyinput @change="formObj.workTime = oninput(formObj.workTime,2)" class="val" type="number"
						v-model="formObj.workTime" placeholder="请输入已做时间"></uni-easyinput>

					<!-- <uni-easyinput class="val" type="digit" v-model="workTime" placeholder="请输入本次报工工时"></uni-easyinput -->
					<view class="unit">小时</view>
				</view>
				<view class="item">
					<view class="label">备注</view>
					<uni-easyinput type="textarea" v-model="formObj.remark" placeholder="请输入备注" />
					<!-- 	<view class="unit"> {{ detailInfo.unit }}</view> -->
				</view>
			</view>
			<view class="ok" @click="overRow(formObj)">确定</view>
		</uni-popup>
	</view>
</template>
<style lang="scss">
	// 订单列表
	.data-detail {
		border-radius: 10rpx;
		padding-bottom: 200rpx;

		.module {
			background: linear-gradient(178deg, #356899 7%, #356899 57%, #F4F6F9 94%);
			padding: 20rpx;

			.module-info {
				padding: 20rpx 20rpx 80rpx;
				border-radius: 10rpx;
				min-height: 100rpx;
				font-size: 28rpx;
				border-bottom: 2rpx solid #F2F2F2;
				background: linear-gradient(215deg, #C7D3E5 8%, rgba(222, 228, 236, 0) 13%), linear-gradient(162deg, #FFFFFF 25%, #E4EFFD 106%);
				position: relative;
				border-top-right-radius: 100rpx;

				.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: center;
						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
								}
							}
						}

					}
				}

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

				.product-img {
					position: absolute;
					right: 0rpx;
					top: 0;
					width: 100rpx;
					height: 100rpx;
				}

				.product-status {

					width: 140rpx;
					border-raduis: 10rpx;
					text-align: center;
					padding: 8rpx 12rpx;

					&.had {
						background: #E8FFEA;
						color: #00B42A;
					}

					&.unhad {
						background: #FFF7E8;
						color: #FF7D00;
					}
				}

				.product-item {
					margin: 20rpx 0;
					display: flex;
					align-items: center;
					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
							}
						}
					}

				}

				.finish {
					position: absolute;
					right: 40rpx;
					bottom: 30rpx;
					background: linear-gradient(142deg, #FEB34A 14%, #FE9B12 83%);
					color: #fff;
					width: 200rpx;
					text-align: center;
					padding: 10rpx;
					border-radius: 31rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.complate-img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

			}
		}

		.module-list {
			padding: 20rpx 20rpx;
			// box-shadow: 0px 0px 8px 0px rgba(161, 161, 177, 0.12);

			.module-title {
				color: #0D0D26;
				font-size: 36rpx;
				margin: 20rpx 0;
				font-weight: 500;
			}

			.history-list {
				display: flex;
				flex-direction: column;
				align-items: center;
				min-height: 200rpx;
				justify-content: center;
				padding: 0rpx 10rpx;

				.item {
					margin: 5rpx 0;
					background: #EAEEF4;
					font-size: 28rpx;
					padding: 15rpx;
					width: 100%;
					border-radius: 10rpx;
					color: #737D88;
					position: relative;

					.product-item {
						margin: 10rpx 0;

						.hight-color {
							color: #00B42A;
						}
					}

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

						.row-item {
							flex: 1;
							display: flex;
							flex-direction: row;

							.label {
								margin-bottom: 10rpx;

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

							.val {
								color: #1D2129;

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

					}

					.tip-index {
						position: absolute;
						top: 0rpx;
						right: 0rpx;

						.icon-status {
							width: 100rpx;
							height: 72rpx;
							z-index: 1;
						}

						.text {
							color: #fff;
							position: absolute;
							top: 4rpx;
							right: 30rpx;
							z-index: 2;
						}
					}
				}

				.no-data {
					font-size: 28rpx;
					color: #444;
				}
			}

			.table-cont {
				font-size: 24rpx;
			}

			.button {
				color: #356899;
			}
		}

		.action {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0rpx;
			border-radius: 18rpx;
			padding: 30rpx 30rpx;
			background: #FFFFFF;
			margin: 0 auto;
			width: 100vw;
			box-shadow: 0px -4px 10px 0px rgba(121, 153, 183, 0.2);

			.action-item {
				width: 272rpx;
				height: 86rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				font-size: 40rpx;
				color: #fff;
				width: 272rpx;
				height: 86rpx;
				border-radius: 24rpx;

				&.start {
					background: linear-gradient(157deg, #2EACE6 -3%, #356899 90%);
				}

				&.stop {
					background: linear-gradient(167deg, #FEA97B -2%, #F75E40 87%);
				}

				&.finish {
					background: linear-gradient(142deg, #FEB34A 14%, #FE9B12 83%);
				}
			}
		}

		.loading-text {
			text-align: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
		}

		.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: 200rpx;

						.star {
							color: red
						}
					}

					.val {
						flex: 1.5;
						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;
			}
		}
	}
</style>