<template>
	<view class="page">
		<view class="jichu">
			<view class="zuoxian">
				
			</view>
			<view class="xinxi">
				<view class="" style="display: flex;flex-direction: column;">
					<view class="danhao">
						工单号:{{workOrderNo}}
					</view>
					<view class="didian">
						工作地点:{{workPlace}}
					</view>
				</view>
				
				<view class="huanzhe">
					患者:{{patientName}}
				</view>
				<view class="fenshu">
					{{prescription}}
				</view>
				<view class="fenshu1">份</view>
			</view>
			<view v-for="(item,index) in res" key="index">
				<view class="xiangqing">
					<view class="neirong">
						<view class="left" >
							<view class="zuo1">
								<span style="display: inline-block;width: 18vw;height:2.5vh;background-color: rgb(37, 142, 223);margin-left: -5vw;margin-top: 2.5vh;color: #fff;font-size: 20upx;text-align: center;line-height: 2.5vh;">节点操作人</span>
								<span style="display: inline-block;width: 18vw;height:2.5vh;margin-top: 2.5vh;color: black;font-size: 20upx;text-align: center;line-height: 2.5vh;">{{item.createdBy}}</span>
							</view>
							<view class="zuo2">
								<span style="display: inline-block;width: 18vw;height:2.5vh;background-color: rgb(37, 142, 223);margin-left: -5vw;margin-top: 1.5vh;color: #fff;font-size: 20upx;text-align: center;line-height: 2.5vh;">角色</span>
								<span style="display: inline-block;width: 18vw;height:2.5vh;margin-top: 2.5vh;color: black;font-size: 20upx;text-align: center;line-height: 2.5vh;">{{map[item.status]}}</span>
							</view>
							<view class="zuo3">
								<span style="display: inline-block;width: 18vw;height:2.5vh;background-color: rgb(37, 142, 223);margin-left: -5vw;margin-top: 1.5vh;color: #fff;font-size: 20upx;text-align: center;line-height: 2.5vh;">操作时间</span>
								<span style="display: inline-block;width: 28vw;height:2.5vh;margin-left: 1vw;margin-top: 2.5vh;color: black;font-size: 20upx;text-align: center;line-height: 2.5vh;">{{item.createdDtFormatted}}</span>
							</view>
						</view>
						<view class="">
							<!-- 背景 -->
							
							<view class="right kaishi" v-if="item.show == 1">
								
							</view>
							<view class="right jieshu" v-if="item.show == 3">
								
							</view>
							<view class="right wancheng" v-if="item.show == 2">
								
							</view>
							<view class="right qita" v-if="item.show == 4">
								
							</view>
							
							<view class="right-font" >
								{{item.status}}
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="item.status == '强制关单'">
					<view class="xiangqing">
						<view class="neirong">
							<view class="left" >
								<view class="zuo1">
									<u-row>
										<u-col span="4.5">
											<span style="display: inline-block;width: 18vw;height:2.5vh;background-color: rgb(37, 142, 223);margin-left: -2vw;margin-top: 5.5vh;color: #fff;font-size: 20upx;text-align: center;line-height: 2.5vh;">关单原因</span>
										</u-col>
										<u-col span="5">
											<span style="display: inline-block;width: 38vw;height:6.5vh;margin-top: 2.5vh;color: black;font-size: 20upx;text-align: left;line-height: 2.5vh;">{{item.reason}}</span>
										</u-col>
									</u-row>
									
									
								</view>
								
							</view>
							<view class="">
								<!-- 背景 -->
								<view class="right kaishi" v-if="item.show == 1">
									
								</view>
								<view class="right jieshu" v-if="item.show == 3">
									
								</view>
								<view class="right wancheng" v-if="item.show == 2">
									
								</view>
								<view class="right qita" v-if="item.show == 4">
									
								</view>
								
								<view class="right-font" >
									{{item.status}}
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import { getAllList } from "../../api/api.js"
export default {
	data() {
		return {
			didian:"博奥中医院",
			huanzhe:"小红",
			fenshu:3,
			zhuangtai:"订单开始",
			back:"kaishi",
			right:"right",
			datas:{
				"workOrderNo": "AS202403151155"
			},
			res:{},
			workOrderNo:"",
			prescription:"",
			patientName:"",
			workPlace:"",
			map : {
				"工单开始":"抓药人",
				"取未煎药":"司机",
				"未煎药送达":"司机",
				"煎药完成":"煎药人",
				"取已煎药":"司机",
				"已煎药送回":"司机",
				"强制关单":"管理员"
			}
		}	
	},
	onLoad(options) {
		console.log(options.param1)
		this.datas.workOrderNo=options.param1
		
	},
	onShow() {
		console.log("123")
		getAllList(this.datas).then(res=>{
			console.log(res)
			this.res = res.data
			this.workOrderNo = res.data[0].workOrderNo
			this.prescription = res.data[0].prescription
			this.patientName = res.data[0].patientName
			this.workPlace = res.data[0].workPlace
			let a 
			for(a = 0;a<res.data.length;a++){
				if(res.data[a].status=="工单开始"){
					this.res[a].show = 1
				}else if(res.data[a].status=="己煎药送回"){
					this.res[a].show = 2
					this.res[a].status = "已完成"
				}else if(res.data[a].status=="强制关单"){
					this.res[a].show = 3
				}else{
					this.res[a].show = 4
				}
			}
			
		})
	},
	methods: {
		duoxuan(){
			console.log("hahahahaha")
		},
	},
}
</script>

<style>
	@import url("genzong.css");
	
</style>