<template>

	<view class="container">
		<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation>
			<view class="scrollItem" style="width: 50%;" v-for="(item,index) in changeList" :key="index"
				:class="{active:tabIndex == index}" :data-current="tabIndex" @click="sendTabItem(item,index)">
				{{item.title}}
			</view>
		</scroll-view>
		<view v-show="tabIndex === 0">
			<scroll-view scroll-y="true" style="height: 95vh;">
				<uni-card>
					<uni-forms>
						<uni-forms-item label="工单编号">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.orderCode}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="类型">
							<view class="flex" style="line-height: 36px;">
								<view class="deepBlackBoldText">
									{{workOrdrInfo.orderType}}
								</view>
								<view style="margin-left: 10px;">
									<view v-if="workOrdrInfo.handleState=='已完成'" class="cu-tag radius line-green"
										style="background-color:rgba(203,240,204,0.4);">{{workOrdrInfo.handleState}}
									</view>
									<view v-else-if="workOrdrInfo.handleState=='进行中'" class="cu-tag radius line-blue"
										style="background-color: rgba(231,242,255, 0.4);">{{workOrdrInfo.handleState}}
									</view>
									<view v-else-if="workOrdrInfo.handleState=='已取消'" class="cu-tag radius line-grey"
										style="background-color: #9c9c9c30;">{{workOrdrInfo.handleState}}</view>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="来源">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.workOrderResource}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="级别">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.workOrderRank}}
							</view>
						</uni-forms-item>
						<uni-forms-item v-if="workOrdrInfo.handleState=='已完成' 
						&& orderType == '维修'" label="耗时">
							<view class="deepBlackBoldText">
								<view>{{workOrdrInfo.timeConsuming}}</view>
							</view>
							<view style="line-height: 20px;color: rgb(195 195 195);">
								<view style="font-size: 12px;">
									开始时间：{{workOrdrInfo.createdAt}}
								</view>
								<view style="font-size: 12px;">
									结束时间：{{workOrdrInfo.handleAt}}
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="创建时间">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.createdAt}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="起始位置">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.startPosition}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="结束位置">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.endPosition}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="工单原因">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.workOrderReason}}
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-card>
			</scroll-view>
		</view>

		<view v-show="tabIndex === 1">
			<scroll-view scroll-y="true" style="height: 95vh;">
				<uni-card v-if="orderType == '维修'" :title="'车辆编号：'+workOrdrInfo.bikeCode">
					<uni-forms>
						<uni-forms-item label="处理结果">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.handleState}}
							</view>
						</uni-forms-item>
						<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'" label="备注">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.handleResult}}
							</view>
						</uni-forms-item>
						<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'" label="处理后图片">
							<uni-file-picker readonly="true" limit="9"
								:value="workOrdrInfo.faultHandleFiles"></uni-file-picker>
						</uni-forms-item>
						<view class="dashed-divider"></view>
						<uni-title class="h3" type="h3" title="故障详情"></uni-title>
						<uni-forms-item label="故障部位">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.faultPart}}
							</view>
						</uni-forms-item>
						<uni-forms-item v-if="workOrdrInfo.handleState=='已完成'" label="故障原因">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.faultDescription}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="上报人">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.reportUserName}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="上报来源">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.faultReportResource}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="上报时间">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.reportAt}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="车辆位置">
							<view class="deepBlackBoldText">
								{{workOrdrInfo.position}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="故障图片">
							<view>
								<uni-file-picker readonly="true" limit="9"
									:value="workOrdrInfo.faultReportFiles"></uni-file-picker>
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-card>
				<uni-card v-else :title="'车辆编号：'+workOrdrInfo.bikeCode">
					<template v-slot:title>
						<view class="flex justify-between cardtitle">
							<view class="flex align-center ">
								<view class="cardtitleri">
									{{'车辆编号：'+workOrdrInfo.bikeCode}}
								</view>
							</view>
							<view>
								<view style="margin-left: 10px;">
									<view class="cu-tag radius line-green"
										style="background-color:rgba(203,240,204,0.4);">{{workOrdrInfo.handleState}}
									</view>
								</view>
							</view>
						</view>
					</template>
					<view class="flex justify-between cardtitle">
						<view class="bike-list">
							<view class="hdtitle">
								换电前
							</view>
							<view class="flex paddingtopbottom5">
								<view class="carbhtitle">
									电量
								</view>
								<view class="hd_dianliang">
									1%
								</view>
							</view>
							<view class="flex paddingtopbottom5">
								<view class="carbhtitle">
									坐标
								</view>
								<view class="hd_zuobiao">
									103.96,30.68
								</view>
							</view>
							<view class="hd_shijian">
								2025-04-07 14:28:29
							</view>
						</view>
						<view class="bike-list">
							<view class="hdtitle">
								换电后
							</view>
							<view class="flex paddingtopbottom5">
								<view class="carbhtitle">
									电量
								</view>
								<view class="hd_dianliang">
									0%
								</view>
							</view>
							<view class="flex paddingtopbottom5">
								<view class="carbhtitle">
									坐标
								</view>
								<view class="hd_zuobiao">
									-
								</view>
							</view>
							<view class="hd_shijian">
								-
							</view>
						</view>
					</view>
				</uni-card>
			</scroll-view>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
	} from 'vue';
	import * as api from '@/utils/api.js';
	import config from '../../../utils/config';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const ebikeInfo = ref({});
	const userInfo = ref(null);
	const scrollHeight = ref(0);
	const tabIndex = ref(0)
	const changeList = ref([]);
	const workOrdrInfo = ref({})
	const orderId = ref("");
	const orderType = ref("");
	const sendTabItem = (data) => {
		let index = data['id'];
		if (tabIndex.value == index) return;
		tabIndex.value = index;

		switch (index) {
			case 0:
				break;
			case 1:
				break;
		}
	}

	onLoad((options) => {
		userInfo.value = uni.getStorageSync('userInfo');
		const systemInfo = uni.getSystemInfoSync();
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		scrollHeight.value = screenHeight - statusBarHeight - 158;
		if (options.orderId) {
			orderId.value = options.orderId;
		}
		if (options.orderType) {
			orderType.value = options.orderType;
			switch (options.orderType) {
				case "维修":
					changeList.value = [{
							id: 0,
							title: '工单信息'
						},
						{
							id: 1,
							title: '处理结果'
						}
					]
					break
				case "换电":
					changeList.value = [{
							id: 0,
							title: '工单信息'
						},
						{
							id: 1,
							title: '车辆列表'
						}
					]
					break
				case "调度":
					changeList.value = [{
							id: 0,
							title: '工单信息'
						},
						{
							id: 1,
							title: '车辆列表'
						}
					]
					break
				default:
					break
			}
		}
	})

	onMounted(() => {
		api.callEbikeInfo("getWorkOrderInfo?orderId=" + orderId.value, {}, "get").then((res) => {
			if (res.code === 200) {
				workOrdrInfo.value = res.data;
			}
		});
	})
</script>

<style>
	.container {
		padding: 0px 0px;
		background-color: #f3f4f6;
	}

	.cardtitleri {
		font-size: 15px;
		color: #3a3a3a;
		padding: 5px;
		font-weight: bold;

	}

	.uni-forms-item {
		position: relative;
		display: flex;
		flex-direction: row;
		margin-bottom: 5px !important
	}

	.bike-list {
		width: 48%;
		background-color: #ffffff;
		padding: 8px 15px;
		border-radius: 9px;
		box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
	}

	.uni-forms-item__content {
		position: relative;
		font-size: 14px;
		flex: 1;
		box-sizing: border-box;
		flex-direction: row;
		line-height: 36px;
	}

	.uni-card {
		border-radius: 15px !important;
	}

	.uni-card__header {
		font-weight: bold;
		color: #000000;
		font-size: 16px;
	}

	.uni-card .uni-card__header .uni-card__header-box {
		flex: none !important;
	}

	.uni-card .uni-card__header .uni-card__header-extra {
		margin-left: 10px;
	}

	.uni-forms .uni-forms-item__label {
		width: 100px !important;
	}

	.scrollWrap {
		height: 40px;
		line-height: 40px;
		width: 100%;
		white-space: nowrap;
		text-align: center;
		font-size: 14px;
		background-color: #fff;
	}

	.scrollWrap .scrollItem {
		display: inline-block;
		width: 25%;
		font-size: 25rpx;
	}

	.scrollWrap .active {
		color: #009DFF !important;
		position: relative;
		font-weight: 600;
		font-weight: bold;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.scrollWrap .active :after {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: calc(50% - 5px);
		width: 10px;
		height: 2px;
		background-color: #009DFF !important;
	}

	.deepBlackBoldText {
		font-weight: bold;
	}

	.dashed-divider {
		height: 1px;
		border-top: 1px dashed #ddd;
		margin: 10px 0;
	}

	.cardtitle {
		margin: 5px 0px;
		padding: 5px 0px;
	}

	.hdtitle {
		color: rgb(166, 166, 166);
		font-size: 10px;
	}

	.hd_dianliang {

		margin-left: 10px;
		color: red;
	}

	.hd_zuobiao {

		margin-left: 10px;
		color: rgb(0, 121, 255);
	}

	.carbhtitle {
		font-size: 12px;
		color: rgb(140, 140, 140)
	}

	.hd_shijian {
		border-top: solid 1px #e7e4e4;
		padding-top: 5px;
		margin-top: 5px;
		width: 134px;
		font-size: 14px;
		color: rgb(141, 141, 141);
	}

	.paddingtopbottom5 {
		padding: 5px 0px;
	}
</style>