<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="工单详情"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin:-30rpx -30rpx 0 -30rpx;">
				<view class="details-nav" :style="{top:statusBarHeight + 'px'}">
					<view class="li pad-sx36" @click="detailsNavpa(index)" :class="item.state?'on':''"
						v-for="(item,index) in detailsNav" :key="index">
						{{item.title}}
					</view>
				</view>
				<swiper class="swiper" @change="swiperCurrentFun" :current="swiperCurrent"
					:style="'height:'+swiHeight+'px'">
					<!-- 基础信息 start -->
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<view id="swi1">
								<view class="work-order-from">
									<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
									<view class="li disac" style="margin-top: 20rpx;">
										<view class="title">工单编号：</view>
										<input type="text" disabled class="input" :value="detailObj.order_number" />
									</view>

									<view class="li disac">
										<view class="title">项目编号：</view>
										<input type="text" disabled class="input" :value="detailObj.project_number" />
									</view>
									<view class="li disac">
										<view class="title">项目名称：</view>
										<input type="text" disabled class="input input-black"
											:value="detailObj.project_name" />
									</view>
									<view class="li disac">
										<view class="title">产品类型：</view>
										<input type="text" disabled class="input" :value="detailObj.product_type" />
									</view>
									<view class="li disac">
										<view class="title">安装位置：</view>
										<input type="text" disabled class="input"
											:value="detailObj.installation_location" />
									</view>
									<view class="li disac">
										<view class="title">维保类型：</view>
										<input type="text" disabled class="input" :value="detailObj.fault_type" />
									</view>
									<view class="li disac">
										<view class="title">紧急程度：</view>
										<input type="text" disabled class="input"
											:value="detailObj.emergency_level_view" />
									</view>
									<view class="li">
										<view class="title">维保说明：</view>
										<view style="overflow: hidden;overflow-y: scroll;max-height: 200rpx;" 
											class="input line-h36">{{detailObj.failure_description}}</view>
									</view>
									<view class="li">
										<view class="title">维保图片：</view>
										<view class="input">
											<image class="img" v-for="(item,index) in detailObj.fault_picture" :key="index" :src="item" mode="aspectFill" lazy-load></image>
										</view>
									</view>
								</view>
								<view class="work-order-from">
									<view class="li disac">
										<view class="title">报 单 人：</view>
										<input type="text" disabled class="input" :value="detailObj.order_contact" />
									</view>
									<view class="li disac">
										<view class="title">报单时间：</view>
										<input type="text" disabled class="input" :value="detailObj.order_times" />
									</view>
									<view class="li disac">
										<view class="title">服务方式：</view>
										<input type="text" disabled class="input input-black"
											:value="detailObj.service_method_view" />
									</view>
									<view class="li disac">
										<view class="title">定位地址：</view>
										<input type="text" disabled class="input" :value="detailObj.service_address" />
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<!-- 基础信息 end -->

					<!-- 处理详情 start -->
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<view id="swi2">
								<view class="work-order-from">
									<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
									<view class="li disac" style="margin-top: 20rpx;">
										<view class="title">开始时间：</view>
										<input type="text" disabled class="input " :value="handleDetail.start_times" />
									</view>
									<view class="li disac">
										<view class="title">结束时间：</view>
										<input type="text" disabled class="input "
											:value="handleDetail.completion_times" />
									</view>
									<view class="li disac">
										<view class="title">维保用时： </view>
										<input type="text" disabled class="input input-black"
											:value="handleDetail.maintenance_time" />
									</view>
									<view class="li disac">
										<view class="title">维保费用：</view>
										<input type="text" disabled class="input "
											:value="`¥${handleDetail.pay_price}元`" />
									</view>
									<view class="li disac">
										<view class="title">等待时长：</view>
										<input type="text" disabled class="input " :value="handleDetail.waiting_time" />
									</view>
									<view class="li disac">
										<view class="title">主维保人：</view>
										<input type="text" disabled class="input "
											:value="handleDetail.maintenance_name" />
									</view>
									<view class="li disac">
										<view class="title">更换配件：</view>
										<view class="rideo">
											<view class="isrideo">
												<view class="icon " :class="handleDetail.is_accessory == 1 ?'on':''">
													<view class="icon-content"></view>
												</view>
												<view class="fon24" style="color: #8b8b8b;">是</view>
											</view>
											<view class="isrideo">
												<view class="icon" :class="handleDetail.is_accessory == 1 ?'':'on'">
													<view class="icon-content"></view>
												</view>
												<view class="fon24" style="color: #8b8b8b;">否</view>
											</view>
										</view>
									</view>
									<view class="li">
										<view class="title">工作描述：</view>
										<view style="overflow: hidden;overflow-y: scroll;max-height: 200rpx;"
											class="input line-h36">{{handleDetail.work_explanation}}</view>
									</view>
									<view class="li">
										<view class="title">维保图片：</view>
										<view class="input add-display">
											<view class="">
												<image class="img"
													v-for="(item,index) in handleDetail.maintenance_pictures"
													:key="index" :src="item" mode="aspectFill" lazy-load></image>
											</view>
										</view>
									</view>
									<view class="li disac">
										<view class="title">维保原因：</view>
										<textarea auto-height disabled class="input "
											:value="handleDetail.failure_reason" />
									</view>
									<view class="li disac">
										<view class="title">维保人员： </view>
										<input type="text" disabled class="input "
											:value="handleDetail.maintenance_more" />
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<!-- 处理详情 end -->


					<!-- 更换配件 start -->
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<view id="swi3">
								<view class="change-accessory">
									<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
									<view class="list">
										<view class="li" v-for="(item,index) in replaceParts" :key="index">
											<image class="img" src="../../static/del/img001.png" mode="aspectFill"
												lazy-load></image>
											<view class="text-content">
												<view class="title">
													<view class="text clips1">全彩LED显示屏电源</view>
													<view class="date">1011-1</view>
												</view>
												<view class="text">配件品牌：华鑫电源</view>
												<view class="text">规格型号：5A-75B</view>
												<view class="text">使用数量：1张</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<!-- 更换配件 end -->

					<!-- 处理过程 start -->
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<view id="swi4">
								<view class="course-nav">
									<view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
									<view class="date">报修时间：{{handleProcess.order_times}}</view>
									<view class="code">
										<view class="">工单编号：{{handleProcess.order_number}}</view>
										<view class="btn" @click="copy(handleProcess.order_number)">复制</view>
									</view>
								</view>
								<view class="course-content">
									<view class="record-content">
										<view class="title">过程追踪</view>
										<view class="list">
											<view class="li pad-z40 fon27 col9 pad-x20"
												:class="index==0 ? 'activeTrack' : ''"
												v-for="(item,index) in handleProcess.time_line" :key="index">
												<view class="disac fw line-h40">
													<view class="text">{{item.value}}</view>
													<view class="date">{{item.create_time}}</view>
												</view>
											</view>
										</view>
										<view v-if="order_status==8" class="button" @tap="goEvaluate()">我要评价</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<!-- 处理过程 end -->
				</swiper>
			</view>
		</container-subgroup-two>

	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import statusNav from '../../components/status-nav.vue';
	import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
	import {
		handleWorkOrderGet
	} from '../../jsFile/public-api.js';
	export default {
		components: {
			footTabOne,
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
				swiperCurrent: 0,
				swiHeight: 0,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 40,
				statusText: '', //状态文字
				statusColor: '', //状态背景颜色
				detailsNav: [{
						title: "基础信息",
						state: true
					},
					{
						title: "处理详情",
						state: false
					},
					{
						title: "更换配件",
						state: false
					},
					{
						title: "处理过程",
						state: false
					},

				],
				orderId: '', //订单id
				detailObj: {}, //基础信息
				handleDetail: {}, //处理详情
				replaceParts: [], //更换配件
				handleProcess: {}, //处理过程
				order_status: '' //当前订单状态
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#swi1').boundingClientRect(data => {
				this.swiHeight = data.height - 100
			}).exec();
			this.detailsNavFun(0)

		},
		onLoad(op) {
			this.statusText = op.statusText;
			this.statusColor = op.statusColor;
			if (op.orderId != undefined) {
				this.orderId = op.orderId;
				// 调取获取工单详情事件
				this.getDetail(1);
			}
		},
		methods: {
			// 获取工单详情事件
			getDetail(type) {
				let params = {
					order_id: this.orderId,
					type:type
				}
				this.$requst.get('/universal/api.order/order_info', params).then(res => {
					console.log(res.data,'工单详情')
					if (res.code) {
						this.statusText = res.data.btn.attributes.text;
						this.statusColor = res.data.btn.attributes.color;
						switch (type) {
							case 1:
								this.detailObj = res.data;
								this.order_status = this.detailObj.order_status;
								break;
							case 2:
								this.handleDetail = res.data;
								break;
							case 3:
								this.replaceParts = res.data.accessory;
								break;
							case 4:
								this.handleProcess = res.data;
								break;
						}
						setTimeout(() => {
							const query = uni.createSelectorQuery().in(this);
							query.select(`#swi${type}`).boundingClientRect(data => {
								this.swiHeight = data.height
							}).exec();
						}, 500)
					}
				})
			},
			copy(value) {
				//提示模板
				uni.showModal({
					content: value, //模板中提示的内容
					confirmText: '复制内容',
					success: () => { //点击复制内容的后调函数
						//uni.setClipboardData方法就是讲内容复制到粘贴板
						uni.setClipboardData({
							data: value, //要被复制的内容
							success: () => { //复制成功的回调函数
								uni.showToast({ //提示
									title: '复制成功'
								})
							}
						});
					}
				});
			},
			swiperCurrentFun(data) {
				let current = data.detail.current;
				// 调用工单详情切换事件
				// this.detailSwitch(current);
				this.detailsNavFun(current);
			},
			detailsNavFun(index) {
				for (var i = 0; i < this.detailsNav.length; i++) {
					this.detailsNav[i].state = false
				}
				this.detailsNav[index].state = true
			},
			detailsNavpa(index) {
				this.swiperCurrent = index;
				// 调用工单详情切换事件
				this.detailSwitch(index);
			},
			// 工单详情切换事件
			detailSwitch(index) {
				let type = [1, 2, 3, 4][index];
				this.getDetail(type);
			},
			// 前往评价页面
			goEvaluate() {
				uni.navigateTo({
					url: `/pagesB/i-want-evaluate/i-want-evaluate?orderId=${this.orderId}`
				})
			}

		}
	}
</script>

<style>
	.content {}

	.swiper {
		width: 100%;

	}

	.submit-button {
		width: 686rpx;
		border-radius: 50rpx;
		height: 90rpx;
		background-color: #02A2ea;
		line-height: 90rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.work-order-from {
		margin-top: 10rpx;
		background-color: #FFFFFF;
		padding-bottom: 40rpx;
	}

	.work-order-from .li {
		display: flex;
		padding: 20rpx 40rpx;
		border-bottom: 2rpx solid #ececec;
	}

	.work-order-from .li .title {
		font-size: 26rpx;
		text-align: right;
		white-space: nowrap;
		/* flex: 1; */
	}

	.work-order-from .li .input {
		font-size: 24rpx;
		color: #8b8b8b;
		width: 80%;
		padding-left: 0;
	}

	.work-order-from .li .input .img {
		width: 169rpx;
		height: 127rpx;
		margin-right: 10rpx;
	}

	.state {
		display: inline-block;
		padding: 2rpx 20rpx 2rpx 16rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 0 25rpx 25rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background-color: #dddddd;
		box-shadow: 0rpx 6rpx 6rpx #999999;
	}

	.work-order-from .li .input-black {
		color: #292929;
	}

	.details-nav {
		display: flex;
		justify-content: space-between;
		border-bottom: solid #D5D4D4 2rpx;
		padding: 0 24rpx;


		position: sticky;
		z-index: 2;
		box-sizing: border-box;
		width: 100%;
		background-color: #F7F7F7;
		left: 0rpx;
		margin-bottom: 20rpx;
	}

	.details-nav .li {
		width: 130rpx;
		font-size: 30rpx;
	}

	.details-nav .on {
		color: #00A2E9;
		position: relative;
	}

	.details-nav .on::after {
		content: "";
		width: 100%;
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		height: 6rpx;
		background-color: #00A2E9;
	}

	.course-nav {
		background-color: #fff;
	}

	.course-nav .date {
		font-size: 28rpx;
		color: #333333;
		padding: 20rpx 34rpx;
	}

	.course-nav .code {
		display: flex;
		font-size: 28rpx;
		padding: 20rpx 34rpx;
		padding-top: 0rpx;
		align-items: center;
	}

	.course-nav .code .btn {
		background-color: #eeeeee;
		height: 40rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 40rpx;
		padding: 4rpx 20rpx;
		margin-left: 28rpx;
		border: solid #999999 2rpx;
	}

	.record-content {

		padding: 0 34rpx;
	}

	.course-content {
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}


	.record-content .list .li {
		display: flex;
		align-items: center;
	}

	.record-content .list .li .icon {
		width: 14rpx;
		height: 14rpx;
		margin-right: 50rpx;
		border-radius: 50%;
		background-color: #999999;
		margin-left: 5rpx;
		position: relative;
	}

	.record-content .list .li .icon::after {
		content: "";
		width: 2rpx;
		position: absolute;
		left: 7rpx;
		height: 106rpx;
		background-color: #999999;
		top: 14rpx;
	}

	.record-content .list .li .con {
		font-size: 26rpx;
		color: #999999;
		flex: 1;
	}

	.record-content .list .on .icon {
		background-color: #5caefb;
		width: 21rpx;
		height: 21rpx;

		margin-left: 1rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.record-content .list .on .icon .icon-con {
		background-color: #0084ff;
		width: 13rpx;
		height: 13rpx;
		border-radius: 50%;
	}

	.record-content .list .on .icon::after {
		content: "";
		width: 2rpx;
		position: absolute;
		left: 9rpx;
		height: 167rpx;
		z-index: 1;
		background-color: #0084ff;
		top: 20rpx;
	}

	.record-content .list .on .con {
		display: block;
		color: #0084ff;
	}

	.record-content .list .on .con .text {
		margin-bottom: 35rpx;
	}

	.record-content .list .li .con .text {
		margin-bottom: 10rpx;
	}

	.record-content .list .on {
		align-items: flex-start;
	}

	.button {
		width: 315rpx;
		height: 88rpx;
		background-color: #00A2E9;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		margin: auto;
		margin-top: 50rpx;
		color: #FFFFFF;
	}

	.work-order-from .li .input .add-img {
		width: 136rpx;
		height: 127rpx;
		display: flex;
		justify-content: center;
		background-color: #DCDCDC;
		align-items: center;
	}

	.work-order-from .li .input .add-img .icon {
		width: 64rpx;
		height: 64rpx;
	}

	.work-order-from .li .add-display {
		display: flex;
	}

	.change-accessory {
		background-color: #FFFFFF;
	}

	.change-accessory .li .img {
		width: 185rpx;
		height: 185rpx;
		margin-right: 30rpx;
	}

	.change-accessory .li {
		padding: 34rpx;

		display: flex;
		border-bottom: 2rpx solid #EEEEEE;
	}

	.change-accessory .li .text-content {
		flex: 1;
	}

	.change-accessory .li .text-content .title {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.change-accessory .li .text-content .title .text {
		width: 77%;
		font-size: 30rpx;
		color: #333333;
	}

	.change-accessory .li .text-content .date {
		color: #ff0000;
		font-size: 24rpx;
		font-weight: bold;
	}

	.change-accessory .li .text-content .text {
		width: auto;
		font-size: 26rpx;
		margin-bottom: 12rpx;
		color: #666666;
	}

	.work-order-from .rideo {
		display: flex;
	}

	.work-order-from .isrideo {
		display: flex;
		align-items: center;
		margin-right: 41rpx;
	}

	.work-order-from .isrideo .icon {
		width: 26rpx;
		border: 2rpx solid #818181;
		border-radius: 50%;
		height: 26rpx;
		margin-right: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.work-order-from .isrideo .icon .icon-content {
		width: 19rpx;
		height: 19rpx;
		background-color: #818181;
		border-radius: 50%;
	}

	.work-order-from .isrideo .on {
		border: 2rpx solid #D81E06;
	}

	.work-order-from .isrideo .on .icon-content {
		background-color: #D81E06
	}

	.record-content {
		padding: 0 52rpx;

		padding-top: 33rpx;
		padding-bottom: 40rpx;
		background-color: #FFFFFF;
	}

	.record-content .title {
		color: #333333;
		margin-left: -10rpx;
		font-size: 36rpx;
		margin-bottom: 40rpx;
	}

	.record-content .list .li {
		position: relative;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		border-left: 2rpx solid #999999;

	}

	.record-content .list .li::before {
		content: '';
		display: block;
		position: absolute;
		left: -8rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #999999;
		border-radius: 100%;
	}

	.record-content .list .activeTrack {
		color: #0084ff;
		padding-top: 0rpx;
	}

	.record-content .list .activeTrack::before {
		background-color: rgba(0, 132, 255, .5);
		top: -4rpx;
		width: 22rpx;
		height: 22rpx;
		left: -12rpx;
		z-index: 1;
	}

	.record-content .list .activeTrack::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: -8rpx;
		width: 14rpx;
		height: 14rpx;
		background-color: #999999;
		border-radius: 100%;
	}

	.record-content .list .activeTrack .line-h40 {
		margin-top: -20rpx;
		line-height: 60rpx;
	}

	.record-content .list .date {
		margin-left: 20rpx;
	}
</style>
