<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" :style="{ height: swiperHeight }">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" style="height: 100%;">
					<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="checkedGoods.store.store_avatar"></image>{{ checkedGoods.store.store_name }}
								</view>
								<view>
									订单编号：{{ checkedGoods.order_sn }}
								</view>
							</view>
							<view class="store_info">
								<view class="info_img">
									<image :src="checkedGoods.goods.goods_image" mode="">
								</view>
								<view class="info_txt">
									<view class="content u-line-2">
										{{ checkedGoods.goods.goods_name }}
									</view>
									<view class="much">
										<text>￥{{ checkedGoods.goods.goods_pay_price }}</text>
										<text>x{{ checkedGoods.goods.goods_num }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="order-view order-type" @click="showClothesType=true">
							<view class="title">商品类型:</view>
							<input type="text" v-model="type" disabled />
						</view>
						<view class="order-view order-name">
							<view class="title">送洗人:</view>
							<input type="text" v-model="name" />
						</view>
						<view class="order-view order-phone">
							<view class="title">手机号:</view>
							<input type="text" v-model="phone" maxlength="11" />
						</view>
						<view class="order-view order-area" @click="showAddress=true">
							<view class="title">省市区:</view>
							<input type="text" v-model="area" disabled />
							<view class="location">
								<image src="../static/mine/28.png"></image>
								<view>定位</view>
							</view>
						</view>
						<view class="order-view 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>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="order-info">
					<view class="order-view order-name">
						<view class="title">商品名称:</view>
						<input type="text" v-model="goodsName" />
					</view>
					<view class="order-view order-phone" @click="showClothesType=true">
						<view class="title">商品类型:</view>
						<input type="text" v-model="type" disabled />
					</view>
					<view class="order-view order-phone">
						<view class="title">衣服状况:</view>
						<input type="text" v-model="name" />
					</view>
					<view class="order-view order-name">
						<view class="title">送洗人:</view>
						<input type="text" v-model="name" />
					</view>
					<view class="order-view order-area" @click="showAddress=true">
						<view class="title">省市区:</view>
						<input type="text" v-model="area" disabled />
						<view class="location">
							<image src="../static/mine/28.png"></image>
							<view>定位</view>
						</view>
					</view>
					<view class="order-view 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>
		<u-select v-model="showClothesType" :list="typeList" value-name="id" label-name="name" @confirm="confirmType"></u-select>
		<u-select v-model="showAddress" 
				mode="mutil-column-auto" 
				:list="areaList" 
				value-name="area_id" 
				label-name="area_name" 
				child-name="_child" 
				@confirm="setArea">
		</u-select>
		<u-popup v-model="showPopup" mode="bottom" border-radius="20">
			<view class="order-popup">
				<view class="check">
					<text>选择订单</text>
					<u-icon name="close" color="#A29FA3" size="32"></u-icon>
				</view>
				<scroll-view scroll-y class="order-list">
					<u-radio-group v-model="value" @change="radioChange">
						<view v-for="(items, index) in orderList" :key="index" class="order-item">
							<view class="store">
								<view class="name">
									<image :src="items.extend_store.store_avatar" mode=""></image>
									<text>{{ items.store_name }}</text>
								</view>
								<view class="order-sn">
									订单编号：{{ items.order_sn }}
								</view>
							</view>
							<view class="checkd">
								<label class="radio-view" v-for="(item, index) in items.extend_order_goods" :key="index">
									<view class="radio">
										<u-radio color="#F0AD4E" :name="items.order_id + ' ' + item.goods_id" active-color="#FF780F" icon-size="34"></u-radio>
									</view>
									<view class="store_info">
										<view class="info_img">
											<image :src="item.goods_image" mode="">
										</view>
										<view class="info_txt">
											<view class="content u-line-2">
												{{ item.goods_name }}
											</view>
											<view class="much">
												<text>￥{{ item.goods_pay_price }}</text>
												<text>x{{ item.goods_num }}</text>
											</view>
										</view>
									</view>
								</label>
							</view>
						</view>
					</u-radio-group>
				</scroll-view>
				<view class="order-btn" @click="confirm">确认</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			items: [],
			count: 4, // 最大图片数量
			type: '',
			name: '',
			phone: '',
			area: '',
			address: '',
			// platformForm: {
			// 	type: '',
			// 	name: '',
			// 	phone: '',
			// 	area: '',
			// 	address: '',
			// },
			// physicalForm: {
				
			// },
			goodsName: '',
			list: [{
				name: '平台历史订单'
			}, {
				name: '实体店历史订单'
			}],
			typeList: [],
			orderList: [],
			current: 0,
			areaList: [],
			showClothesType: false,
			showAddress: false,
			swiperCurrent: 0,
			showPopup : false,
			checkedList: [],
			page: 0,
			swiperHeight: '',
			value: '', // radio
			checkedGoods: {},
			choose: false, // 是否选择商品
		}
	},
	onShow() {
		this.current = 0;
		this.swiperCurrent = 0;
		this.showPopup = false;
		this.choose = false;
	},
	onLoad() {
		this.getOrderList();
		this.setViewHeight();
		this.getAreaData();
		this.getClothesTypeList();
	},
	methods: {
		getClothesTypeList() {
			this.$u.api.getClothesTypeList().then(res => {
				this.typeList = res.data.typeList;
			})
		},
		confirmType(e) {
			// console.log(e);
			this.type = e[0].label;
		},
		async getOrderList({ load = 'reload' } = {}) {
			const res = await this.$u.api.getOrderList({
				page: this.page,
				// type: '40',
			})
			this.timer = true;
			if(res.errCode == 0) {
				if(load == 'reload') this.orderList = res.data;
				else this.orderList.push(...res.data);
			}
			return res;
		},
		submit() {
			this.$refs.uUpload.upload();
		},
		onUploaded(list) {
			console.log(list);
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		radioChange(e){
			const ids = e.split(" ");
			console.log(ids)
			let checkedGoods = {};
			this.orderList.forEach(order => {
				if(order.order_id == ids[0]) {
					Object.assign(checkedGoods, { store: order.extend_store });
					Object.assign(checkedGoods, { order_sn: order.order_sn });
					order.extend_order_goods.forEach(goods => {
						if(goods.goods_id == ids[1]) {
							Object.assign(checkedGoods, { goods: goods });
							this.checkedGoods = checkedGoods;
						}
					})
				}
			})
		},
		setArea(area) {
			// console.log(area);
			this.area_id = area[0].value;
			this.city_id = area[1].value;
			let temp = '';
			area.forEach(e => {
				temp += e.label;
			});
			this.area = temp;
		},
		getAreaData() {
			this.$u.api.getArea().then((res)=>{
				if (res.errCode == 0) {
					this.areaList = res.data;
				}
			})
		},
		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
			}
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.swiperHeight = res.windowHeight - (88 / 2) + 'px';
		},
		// replaces(){
		// 	if(this.list[0].name=='实体店历史订单'){
		// 		this.$set(this.list,0,{name: '平台历史订单'} )
		// 	}else{
		// 		this.$set(this.list,0,{name: '实体店历史订单'} )
		// 	}
		// },
		confirm(){
			this.showPopup = false;
			if(JSON.stringify(this.checkedGoods) != '{}'){
				this.choose = true;
			}else{
				this.choose = false;
			}
		},
		close(){
			this.showPopup = false
		},
		reset(){
			this.choose = false
		},		
	},
};
</script>
<style lang="scss" scoped>
.wash-order {
	height: calc(100vh - 1rpx);
	overflow: hidden;
	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;
						margin-right: 12rpx;
					}
				}
				font-size: 28rpx;
				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;
						background-color: aqua;
						border-radius: 10rpx;
					}
				}
				.info_txt {
					padding-left: 30rpx;
					padding-right: 30rpx;
					display: flex;
					flex-wrap: wrap;
					width: 100%;
					.content {
						height: 74rpx;
						line-height: 37rpx;
						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;
			}
			
		}
		.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;
				}
			}		
		}
		.order-view {
			.title {
				width: 140rpx;
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
			}
			> input {
				text-align: left;
			}
		}
	}
	.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;
		margin: 30rpx auto 30rpx;
		font-size: 36rpx;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
	.order-popup {
		.check{
			padding: 30rpx;
			border-bottom: 1rpx solid rgba(236, 236, 236, 1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			> text {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51,51,51,1);
			}
		}
		.order-list {
			height: 60vh;
			padding: 30rpx;
			box-sizing: border-box;
			.order-item {
				margin-bottom: 30rpx;
				.store {
					.name {
						margin-bottom: 20rpx;
						font-size: 28rpx;
						color:rgba(51,51,51,1);
						> image {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							vertical-align: middle;
							margin-right: 13rpx;
						}
					}
					.order-sn {
						margin-bottom: 20rpx;
						font-size: 24rpx;
						color: rgba(153,153,153,1);
					}
				}
				.checkd {
					.radio-view {
						display: flex;
						align-items: center;
						.radio {
							margin-right: 20rpx;
						}
						.store_info {
							display: flex;
							flex-wrap: nowrap;
							width: 100%;
							.info_img{
								>image{
									width: 180rpx;
									height: 160rpx;
									background-color: aqua;
									border-radius: 10rpx;
								}
							}
							.info_txt{
								padding-left: 30rpx;
								padding-right: 30rpx;
								display: flex;
								flex-wrap: wrap;
								width: 100%;
								.content{
									height: 74rpx;
									line-height: 37rpx;
									font-size: 30rpx;
									color:rgba(51,51,51,1);
								}
								.much{
									display: flex;
									justify-content: space-between;
									width: 100%;
								}
							}
						}
					}
				}
			}
		}
		.order-btn {
			width: 690rpx;
			height: 98rpx;
			background: rgba(255,120,15,1);
			border-radius: 49rpx;
			line-height: 98rpx;
			text-align: center;
			margin: 0 auto 40rpx;
			font-size: 36rpx;
			color: rgba(255,255,255,1);
		}
	}
}
</style>