<template>
	<view class="wash-order">
		<view>
			<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="order-info">
					<view class="order-name" @click="order()">
						<view class="title titles" >
							<text>选择订单：</text>
							<image src="../../static/image/shop/2.png" mode=""></image>
						</view>
						<u-icon  name="arrow-dwon" color="#2979ff" size="28"></u-icon>
					</view>
					<view class="choose-info" v-if="choose">
						<view class="store">
							<view>
								<image src="../../static/image/mine/23.png" mode=""></image>胖胖的店
							</view>
							<view>
								订单编号：2222222222222
							</view>
						</view>
						<view class="store_info">
							<view class="info_img">
								<image src="../../static/image/mine/23.png" mode="">
							</view>
							<view class="info_txt">
								<view class="content">
									木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子
								</view>
								<view class="much">
									<text>￥99</text>
									<text>x1</text>
								</view>
							</view>
						</view>
					</view>
					<view class="order-name">
						<view class="title">送洗人：</view>
						<input type="text" v-model="name" />
					</view>
					<view class="order-phone">
						<view class="title">手机号：</view>
						<input type="text" v-model="phone" />
					</view>
					<view class="order-area">
						<view class="title">省市区：</view>
						<input type="text" v-model="area" />
						<view class="location">
							<image src="../static/mine/28.png"></image>
							<view>定位</view>
						</view>
					</view>
					<view class="order-address">
						<view class="title">详细地址：</view>
						<input type="text" v-model="address" />
					</view>
				</view>
				<view class="upload-image">
					<view class="title">上传商品图片</view>
					<u-upload 
						ref="uUpload" 
						@on-uploaded="onUploaded" 
						:custom-btn="true" 
						:max-count="count" 
						:auto-upload="false"
					>
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<img src="../static/mine/27.png" />
						</view>
					</u-upload>
				</view>
				<view class="wash-btn" @click="reset()">确认送洗</view>
			</swiper-item>
			<swiper-item class="swiper-item">
					<view class="order-info">
						<view class="order-name">
							<view class="title">商品名称：</view>
							<input type="text" v-model="name" />
						</view>
						<view class="order-phone">
							<view class="title">商品类型：</view>
							<input type="text" v-model="name" />
						</view>
						<view class="order-phone">
							<view class="title">衣服状况：</view>
							<input type="text" v-model="name" />
						</view>
						<view class="order-name">
							<view class="title">送洗人：</view>
							<input type="text" v-model="name" />
						</view>
						<view class="order-area">
							<view class="title">省市区：</view>
							<input type="text" v-model="area" />
							<view class="location">
								<image src="../static/mine/28.png"></image>
								<view>定位</view>
							</view>
						</view>
						<view class="order-address">
							<view class="title">详细地址：</view>
							<input type="text" v-model="address" />
						</view>
					</view>
					<view class="upload-image">
						<view class="title">上传商品图片</view>
						<u-upload 
							ref="uUpload" 
							@on-uploaded="onUploaded" 
							:custom-btn="true" 
							:max-count="count" 
							:auto-upload="false"
						>
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<img src="../static/mine/27.png" />
							</view>
						</u-upload>
					</view>
					<view class="wash-btn">确认送洗</view>
			</swiper-item>
		</swiper>
		<view class="popup"  v-if="showPopup">
			<view class="popup_cont" >
				<view class="check">
					<text>选择订单</text>
					<image src="../../static/image/common/17.png" @click="close()"></image>
				</view>
				<swiper  style="height: 1000px;"   vertical="true">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y class="order-list">
							<view v-for="(items, index) in 3" :key="index">
								<view class="store">
									<view>
										<image src="../../static/image/mine/23.png" mode=""></image>胖胖的店
									</view>
									<view>
										订单编号：2222222222222
									</view>
								</view>
								<view class="checkd">
									<radio-group @change="er">
										<label class="uni-list-cell uni-list-cell-pd"  v-for="(item, index) in checkLidt" :key="index">
											<view class="radio">
												<radio color="#F0AD4E"   :value="item.id"  :checked="a==item.id"/>
											</view>
											<view class="store_info">
												<view class="info_img">
													<image src="../../static/image/mine/23.png" mode="">
												</view>
												<view class="info_txt">
													<view class="content">
														木糖少女小紫薯西装领连衣裙夏季新款女装夏收腰格子格纹裙子
													</view>
													<view class="much">
														<text>￥99</text>
														<text>x1</text>
													</view>
												</view>
											</view>
										</label>
									</radio-group>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
				<view class="bottom_btn" style="width: 100%;background-color: #fff;">
					<view class="wash-btn" @click="confirm()">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			items: [],
			count: 4, // 最大图片数量
			name: '',
			phone: '',
			area: '',
			address: '',
			list: [{
				name: '平台历史订单'
			}, {
				name: '实体店历史订单'
			}],
			current: 0,
			swiperCurrent: 0,
			showPopup : false, 
			a:"",
			checkLidt:[
				{id:'1'},
				{id:'2'},
				{id:'3'}
			]
		}
	},
	methods: {
		onShow() {
			this.current = 0;
			this.swiperCurrent = 0;
			this.showPopup = false;
			this.choose = false
		},
		submit() {
			this.$refs.uUpload.upload();
		},
		onUploaded(list) {
			console.log(list)
		},tabsChange(index) {
			this.swiperCurrent = index;
		},
		er(e){
			console.log(e)
			this.a =e.detail.value;
			console.log(this.a)
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
			this.toApplyPage(current);
		},
		order(){
			this.showPopup = true;
		},
		toApplyPage(index) {
			console.log(index)
			if(index == 1) {
				this.showPopup = false;
				this.choose = false
			}
		},
		// replaces(){
		// 	if(this.list[0].name=='实体店历史订单'){
		// 		this.$set(this.list,0,{name: '平台历史订单'} )
		// 	}else{
		// 		this.$set(this.list,0,{name: '实体店历史订单'} )
		// 	}
		// },
		confirm(){
			this.showPopup = false;
			if(this.a ==''){
				this.choose =false
			}else{
				this.choose = true
			}
			
		},
		close(){
			this.showPopup = false
		},
		reset(){
			this.choose = false
		},
		radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.target.value) {
                    this.current = i;
                }
            }
        }		
	},
};
</script>
<style lang="scss" scoped>
.wash-order {
	border-top: 1rpx solid #ECECEC;
	> uni-swiper {
		flex: 1;
		height: 95vh;
	}
	
	.order-info {
		
		.choose-info{
			display: flex;flex-wrap: wrap;
			height: 335rpx;
			.store{
				>view{
					>image{
					width:60rpx;
					height:60rpx;
					border-radius:50%;
					vertical-align: middle;
					padding-right:13rpx
					}
				}
				
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height: 60rpx;
				
			}
			.store_info{
				display: flex;
				flex-wrap: nowrap;
				width: 100%;
				height: 150rpx;
				.info_img{
					>image{
					width: 180rpx;
					height: 160rpx;
					}
				}
				.info_txt{
					padding-left: 30rpx;
					padding-right: 30rpx;
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					.content{
						line-height: 44rpx;
						font-size: 30rpx;
						color:rgba(51,51,51,1);
					}
					.much{
						display: flex;
						justify-content: space-between;
						width: 100%;
					}
				}
			}
		}
		> view {
			width: 750rpx;
			height: 98rpx;
			background: rgba(255,255,255,1);
			padding: 35rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2rpx;
				background-color: #ECECEC;
			}
			.title {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
			}
			.titles {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				>image{
					width: 27rpx;
					height: 12rpx;
					
				}
			}
			> input {
				flex: 1;
				text-align: right;
			}
			
		}
		.order-area {
			.location {
				margin-left: 20rpx;
				text-align: center;
				font-size: 22rpx;
				color: rgba(255,120,15,1);
				> image {
					width: 26rpx;
					height: 32rpx;
					margin-bottom: 10rpx;
				}
			}		
		}
	}
	.upload-image {
		padding: 35rpx 30rpx;
		.title {
			font-size: 30rpx;
			color: rgba(51,51,51,1);
			margin-bottom: 34rpx;
		}
		.slot-btn {
			width: 140rpx;
			height: 140rpx;
			background: rgba(236,236,236,1);
			border-radius: 10rpx;
			text-align: center;
			> img {
				width: 54rpx;
				height: 49rpx;
				margin-top: 48rpx;
			}
		}
	}
	.bottom_btn{
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
	}
	.wash-btn {
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 49rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%, 0);
		font-size: 36rpx;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
	.popup{
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.4);
		transform: scale(1);
		align-items: center;
		transition-duration: 0.3s;
		
		.popup_cont{
			border-top: 1px solid RGBA(239, 236, 240, 1);
			background-color: #fff;
			width: 100%;
			height: 1072rpx;
			line-height: 80rpx;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
			transform: scale(1);
			position: fixed;
			display: flex;
			flex-direction: column;
			bottom: 0px;
			left: 0px;
			right: 0px;
			/* top: 0px; */
			transition-duration: 0.3s;
			border-radius:20px 20px 0px 0px;
			> uni-swiper {
				flex: 1;
				height: 100vh;
				
				.order-list{
					height: 60vh;
					padding-bottom: 140rpx;
				}
			}
			.check{
				font-size:30rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
				height:88rpx;
				width: 100%;
				padding-left: 30rpx;
				border-bottom: 1px solid rgba(236, 236, 236, 1);
				
				>image{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					float: right;
					padding-top: 30rpx;
					padding-right:30rpx
					
				}
			}
			
			.store{
				>view{
					padding-left: 30rpx;
					padding-top: 30rpx;
					>image{
					width:60rpx;
					height:60rpx;
					border-radius:50%;
					vertical-align: middle;
					padding-right:13rpx
					}
				}
				
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				line-height: 60rpx;
				
			}
			.checkd{
				>radio-group .uni-list-cell{
					display: flex;
					flex-wrap: nowrap;
					width: 100%;
				}
				
				.radio{
					display: flex;
					align-items: center;
					padding-left: 30rpx;
				}
				.store_info{
					display: flex;
					flex-wrap: nowrap;
					width: 100%;
					
					.info_img{
						>image{
						width: 180rpx;
						height: 160rpx;
						}
					}
					.info_txt{
						padding-left: 30rpx;
						padding-right: 30rpx;
						display: flex;
						flex-wrap: wrap;
						width: 100%;
						.content{
							line-height: 44rpx;
							font-size: 30rpx;
							color:rgba(51,51,51,1);
						}
						.much{
							display: flex;
							justify-content: space-between;
							width: 100%;
						}
					}
				}
			}
		}
	}
}
</style>