<template>
	<view class="page">
		<u-navbar title="报修单" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="top">
			<view class="search_box">
				<view class="search_center">
					<input type="text" class="ips" v-model="code" placeholder="编码/报修单号"
						placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
				</view>
				<view class="search_right">
					搜索
				</view>
			</view>
			<view class="tap">
				<view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
					全部
				</view>
				<view class="tap_cont" :class="curtitidx==1?'act1':''" @click="changeidx(1)">
					换电工单
				</view>
				<view class="tap_cont" :class="curtitidx==2?'act1':''" @click="changeidx(2)">
					维修工单
				</view>
				<view class="tap_cont" :class="curtitidx==3?'act1':''" @click="changeidx(3)">
					已完成
				</view>
			</view>
		</view>
		<view class="warp_box">
			<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx' @change="swiperchange"
				next-margin='-20rpx'>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item, index) in filteredListData" :key="index" v-if="item.status!=1"
							@click="todetail(item.id)">
							<view class="card_top">
								<view class="card_top_left">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
									电单车
								</view>
								<view class="card_top_right">
									{{item.createTime}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									报修单号
								</view>
								<view class="cont_info_right">
									{{item.orderNo}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									设备编号
								</view>
								<view class="cont_info_right">
									{{item.sn}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									故障部位
								</view>
								<view class="cont_info_right" v-if="item.faultTypeStr">
									{{item.faultTypeStr}}
								</view>
								<view class="cont_info_right" v-else>
									--
								</view>
							</view>
							<view class="card_bot">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
								<view class="card_bot_txt">
									{{item.address}}
								</view>
								<view class="stause" v-if="item.status==4" style="background-color: #3BBBA1 ;">
									已完成
								</view>
								<view class="stause" v-if="item.status==2&&item.type==2" style="background-color: #F76D6D ;">
									待换电
								</view>
								<view class="stause" v-if="item.status==2&&item.type==1" style="background-color: #F76D6D ;">
									待维修
								</view>
								<view class="stause" v-if="item.status==3&&item.type==2" style="background-color: #4C97E7 ;">
									换电中
								</view>
								<view class="stause" v-if="item.status==3&&item.type==1" style="background-color: #4C97E7 ;">
									维修中
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item, index) in filteredEleData" :key="index" v-if="item.status!=1"
							@click="todetail(item.id)">
							<view class="card_top">
								<view class="card_top_left">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
									电单车
								</view>
								<view class="card_top_right">
									{{item.createTime}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									报修单号
								</view>
								<view class="cont_info_right">
									{{item.orderNo}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									设备编号
								</view>
								<view class="cont_info_right">
									{{item.sn}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									故障部位
								</view>
								<view class="cont_info_right">
									{{item.faultTypeStr}}
								</view>
							</view>
							<view class="card_bot">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
								嵛山岛芦竹村三沙路68号
								<view class="stause" v-if="item.status==4">
									已完成
								</view>
								<view class="stause" v-if="item.status==4" style="background-color: #3BBBA1 ;">
									已完成
								</view>
								<view class="stause" v-if="item.status==2&&item.type==2" style="background-color: #F76D6D ;">
									待换电
								</view>
								<view class="stause" v-if="item.status==2&&item.type==1" style="background-color: #F76D6D ;">
									待维修
								</view>
								<view class="stause" v-if="item.status==3&&item.type==2" style="background-color: #4C97E7 ;">
									换电中
								</view>
								<view class="stause" v-if="item.status==3&&item.type==1" style="background-color: #4C97E7 ;">
									维修中
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item, index) in filteredFixData" :key="index" v-if="item.status!=1"
							@click="todetail(item.id)">
							<view class="card_top">
								<view class="card_top_left">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
									电单车
								</view>
								<view class="card_top_right">
									{{item.createTime}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									报修单号
								</view>
								<view class="cont_info_right">
									{{item.orderNo}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									设备编号
								</view>
								<view class="cont_info_right">
									{{item.sn}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									故障部位
								</view>
								<view class="cont_info_right">
									{{item.faultTypeStr}}
								</view>
							</view>
							<view class="card_bot">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
								嵛山岛芦竹村三沙路68号
								<view class="stause" v-if="item.status==4" style="background-color: #3BBBA1 ;">
									已完成
								</view>
								<view class="stause" v-if="item.status==2&&item.type==2" style="background-color: #F76D6D ;">
									待换电
								</view>
								<view class="stause" v-if="item.status==2&&item.type==1" style="background-color: #F76D6D ;">
									待维修
								</view>
								<view class="stause" v-if="item.status==3&&item.type==2" style="background-color: #4C97E7 ;">
									换电中
								</view>
								<view class="stause" v-if="item.status==3&&item.type==1" style="background-color: #4C97E7 ;">
									维修中
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item ">
						<view class="card" v-for="(item, index) in filteredAlreadyList" :key="index" @click="todetail(item.id)">
							<view class="card_top">
								<view class="card_top_left">
									<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
									电单车
								</view>
								<view class="card_top_right">
									{{item.createTime}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									{{item.orderNo}}
								</view>
								<view class="cont_info_right">
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									设备编号
								</view>
								<view class="cont_info_right">
									{{item.sn}}
								</view>
							</view>
							<view class="cont_info">
								<view class="cont_info_left">
									故障部位
								</view>
								<view class="cont_info_right">
									【车把】【刹车】
								</view>
							</view>
							<view class="card_bot">
								<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
								嵛山岛芦竹村三沙路68号
								<view class="stause" v-if="item.status==4" style="background-color: #3BBBA1 ;">
									已完成
								</view>
								<view class="stause" v-if="item.status==2&&item.type==2" style="background-color: #F76D6D ;">
									待换电
								</view>
								<view class="stause" v-if="item.status==2&&item.type==1" style="background-color: #F76D6D ;">
									待维修
								</view>
								<view class="stause" v-if="item.status==3&&item.type==2" style="background-color: #4C97E7 ;">
									换电中
								</view>
								<view class="stause" v-if="item.status==3&&item.type==1" style="background-color: #4C97E7 ;">
									维修中
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				code: '',
				curtitidx: 0,
				swiperHeight: 408,
				fixdata: [],
				eledata: [],
				listData: [],
				alreadyList: [],
				areaId:0,
			}
		},
		onShow() {
			if(uni.getStorageSync('adminAreaid')){
				this.areaId = uni.getStorageSync('adminAreaid')
				this.getmarks();
			}
			
		},
		watch: {
			curtitidx(newValue, oldValue) {
				console.log('curtitidx 发生变化', newValue, oldValue);
				this.updateSwiperHeight();
			},
			code(newValue, oldValue) {
				console.log('code 发生变化', newValue, oldValue);
				this.updateSwiperHeight();
			}
		},
		computed: {
			filteredListData() {
				return this.filterData(this.listData);
			},
			filteredEleData() {
				return this.filterData(this.eledata);
			},
			filteredFixData() {
				return this.filterData(this.fixdata);
			},
			filteredAlreadyList() {
				return this.filterData(this.alreadyList);
			}
		},
		methods: {
			updateSwiperHeight() {
				if (this.curtitidx == 0) {
					this.swiperHeight = (this.filteredListData.length * 440);
				} else if (this.curtitidx == 1) {
					this.swiperHeight = (this.filteredEleData.length * 440);
				} else if (this.curtitidx == 2) {
					this.swiperHeight = (this.filteredFixData.length * 440);
				} else if (this.curtitidx == 3) {
					this.swiperHeight = (this.filteredAlreadyList.length * 440);
				}
			},
			filterData(data) {
				if (this.code) {
					const regex = new RegExp(this.code, 'i');
					return data.filter(item => regex.test(item.orderNo) || regex.test(item.sn));
				}
				return data;
			},
			todetail(id) {
				uni.navigateTo({
					url: '/page_fix/repair/repair_detail?id=' + id
				});
			},
			changeidx(idx) {
				this.curtitidx = idx;
			},
			swiperchange(e) {
				this.curtitidx = e.detail.current;
			},
			getmarks() {
				let data ={
					areaId:this.areaId
				}
				this.$u.get(`/appVerify/adminOrder/list?`,data).then((res) => {
					if (res.code == 200) {
						this.listData = res.rows;
						this.fixdata = [];
						this.eledata = [];
						this.alreadyList = [];
						res.rows.forEach(item => {
							if (item.type == 1 && item.status != 4) {
								this.fixdata.push(item);
							} else if (item.type == 2 && item.status != 4) {
								this.eledata.push(item);
							} else if (item.status == 4) {
								this.alreadyList.push(item);
							}
						});
						this.updateSwiperHeight();
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
		},
		onLoad(e) {
			console.log(e,'eeeeee');
			if(e.id){
				
				this.code = e.id;
			}
			
		},
		
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
	}

	.page {
		width: 750rpx;

		.tip_box {
			position: fixed;
			left: 72rpx;
			top: 628rpx;
			width: 610rpx;
			height: 282rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			z-index: 110;

			.top {
				padding: 52rpx 38rpx 42rpx 36rpx;

				.txt {
					width: 100%;
					text-align: center;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}

			.bot {
				border-top: 2rpx solid #D8D8D8;
				display: flex;
				flex-wrap: nowrap;
				height: 100%;

				.bot_left {
					width: 50%;
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 36rpx;
					color: #3D3D3D;
				}

				.bot_right {
					width: 50%;
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					border-left: 2rpx solid #D8D8D8;
					font-weight: 500;
					font-size: 36rpx;
					color: #4C97E7;

				}

			}
		}

		.top {
			width: 750rpx;
			background: #fff;
			padding-top: 26rpx;

			.tap {
				margin-top: 24rpx;
				width: 750rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-around;

				.tap_cont {
					text-align: center;
					padding-bottom: 15rpx;
					width: 140rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
					border-bottom: 6rpx solid #fff;
				}

				.act1 {
					border-bottom: 6rpx solid #4C97E7;
					color: #4C97E7;
				}
			}

			.search_box {
				margin: 0 auto;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				width: 680rpx;
				height: 68rpx;
				border: 2rpx solid #4C97E7;
				border-radius: 20rpx;

				// .search_left{
				// 	image{
				// 		width: 56rpx;
				// 		height: 56rpx;
				// 	}
				// }
				.search_center {
					margin-left: 40rpx;
					width: 490rpx;
				}

				.search_right {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto;
					width: 112rpx;
					height: 68rpx;
					background: #4C97E7;
					border: 2rpx solid #4C97E7;
					border-radius: 0 20rpx 20rpx 0;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}

		.warp_box {
			.swiper {
				.swiper-item {
					.card {
						margin: 16rpx auto;
						width: 752rpx;
						height: 408rpx;
						background: #FFFFFF;
						border-radius: 0rpx 0rpx 0rpx 0rpx;

						.card_top {
							padding: 32rpx 38rpx 28rpx 38rpx;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;

							.card_top_left {
								display: flex;
								flex-wrap: nowrap;
								align-items: center;

								image {
									width: 42rpx;
									height: 42rpx;
									margin-right: 18rpx;
								}

								font-weight: 500;
								font-size: 32rpx;
								color: #3D3D3D;
							}

							.card_top_right {
								margin-left: auto;
								font-weight: 400;
								font-size: 28rpx;
								color: #808080;
							}
						}

						.cont_info {
							margin-left: 38rpx;
							margin-bottom: 28rpx;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;

							.cont_info_left {
								margin-right: 44rpx;
								font-weight: 400;
								font-size: 28rpx;
								color: #808080;
							}

							.cont_info_right {
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
							}
						}

						.card_bot {
							display: flex;
							align-items: center;
							border-top: 2rpx dashed #D8D8D8;
							height: 102rpx;

							image {
								margin-left: 20rpx;
								margin-right: 18rpx;
								width: 46rpx;
								height: 48rpx;
							}

							.card_bot_txt {
								width: 60%;
								white-space: nowrap;
								/* 禁止换行 */
								overflow: hidden;
								/* 超出部分隐藏 */
								text-overflow: ellipsis;
								font-weight: 400;
								font-size: 28rpx;
								color: #3D3D3D;
							}

							font-weight: 400;
							font-size: 28rpx;
							color: #3D3D3D;

							.stause {
								display: flex;
								align-items: center;
								justify-content: center;
								margin-left: auto;
								margin-right: 38rpx;
								width: 132rpx;
								height: 54rpx;
								background: #979797;
								font-weight: 400;
								font-size: 28rpx;
								color: #FFFFFF;
								border-radius: 8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>