<template>
	<view class="center">
		<view class="top">
			<view class="top-header">
				<view class="search">
					<view class="search-content acea-row row-middle">
						<text class="iconfont icon-sousuo"></text>
						<input v-model="where.store_name" confirm-type="search" placeholder="请输收货人手机号或订单号搜索"
							class="input" @confirm="handleSearch" />
					</view>
				</view>
			</view>
		</view>
		<view class="bgc_img" v-if="this.shopList == ![]">
			<image src="@/static/images/empty-box.png" mode="widthFix"></image>
			<view class="txt">
				暂无商品订单~
			</view>
		</view>
		<view class='list' v-else>
			<block>
				<view class='item' v-for="(item,index) in shopList" :key="index">
					<view>
						<view class='title acea-row row-between-wrapper'>
							<view class="acea-row row-middle left-wrapper">
								{{item.merchant.mer_name}}
							</view>
						</view>
						<view>
							<view>
								<block>
									<view class="_order">
										订单号: {{item.order_sn}}
									</view>
									<view class='item-info acea-row row-between row-top'
										v-for="(items,indexs) in item.orderProduct" :key="indexs">
										<view class='pictrue'>
											<image :src="items.cart_info.product.image">
											</image>
										</view>
										<view class='text'>
											<view class='_left'>
												{{items.cart_info.product.store_name}}
												<view class="">
													{{items.cart_info.productAttr.sku}}
												</view>
											</view>
											<view class="_right">
												<view class='name'>￥{{items.cart_info.productAttr.price}}</view>
												<view class='name'>x {{items.product_num}}</view>
											</view>
						<!-- 					<view class="totalfooter">
                        <view class='bnt b-color' v-if="items.is_imported == 0 && item.orderProduct.length > 1"
                          @click="importshop(items.order_id,items.product_id,items.product_sku)">
                          立即导入</view>
                      </view> -->
										</view>
										
										<view class="totalfooter" v-if="items.is_imported == 1 ">
											<view class='bnt b-color'>
												已导入</view>
										</view>
										<view class="totalfooter" v-else>
												<view class='bnt b-color' 
													@click="importshop(item.order_id,item.orderProduct[indexs].product_id,item.orderProduct[indexs].product_sku,item)">
													立即导入</view>
											</view>
									<!-- 	<view class="totalfooter">
											<view class='bnt b-color' 
												@click="importshop(item.order_id,item.orderProduct[indexs].product_id,item.orderProduct[indexs].product_sku)">
												立即导入</view>
										</view> -->
									</view>
								</block>
							</view>
						</view>
						<view class='totalPrice'>
							共{{item.orderProduct.length}}件商品，总金额
							<text class='money'>￥{{item.pay_price}}</text>
						</view>
						<!-- <view class="totalfooter">
              <view class='bnt b-color' v-if="item.orderProduct[index]"
                @click="importshop(item.order_id,item.orderProduct[index].product_id,item.orderProduct[index].cart_info.productAttr.product_sku)">
                立即导入</view>
            </view> -->
					</view>
				</view>
			</block>
		</view>
		<u-popup :show="show" @close="close" mode="center" bgColor='transparent'>
			<image src="@/static/images/xianshang.png" mode="widthFix"></image>
			<view class="popen">
				<h4>{{title}}</h4>
				<view class="shuru">
					点击确定，返回商品管理
				</view>
				<view class="btn">
					<button class="btn_l" @click="closeasd()">取消</button>
					<button class="btn_r" @click="getback()">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- <Loading :loaded="loaded" :loading="loading"></Loading> -->
	</view>
</template>

<script>
	import {
		getPreviewProDetail,
	} from '@/api/store.js'
	import {
		postImport
	} from '@/api/product.js'
	import {
		getOrderList
	} from '@/api/order.js'
	import Loading from '@/components/Loading/index'
	export default {
		data() {
			return {
				shopList: [],
				shopinfo: {},
				mer_id: '',
				keyword: '',
				where: {
					page: 1,
					limit: 10,
					status: 20,
					product_type: 98,
					store_name: '',
				},
				data: {
					product_id: '',
					unique: "",
					order_id: '',
					order_product_id: '',
					order_unique: ''
				},
				show: false,
				title: '',
				loaded: false,
			}
		},
		onLoad(option) {
			console.log(option);
      if(option.type=="TypeSupplyChain"||option.type=="TypeTownSupplyChain"){
        this.where.product_type = 99;
      }
			this.mer_id = option.mer_id
			this.getList();
			this.data.product_id = option.product_id
			this.data.unique = option.unique
		},
		methods: {
			handleSearch() {
				let that = this
				that.loaded = false;
				that.where.page = 1;
				that.shopList = [];
				getOrderList(that.where, that.mer_id).then(res => {
					// console.log(res);
					that.shopList = res.data.list
					console.log(that.shopList);
				})
			},
			getList: function() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				getOrderList(this.where, this.mer_id).then(res => {
					// console.log(res);
					this.shopList = res.data.list
					// console.log(this.shopList);
				})
			},
			importshop(order_id, product_id, unique, item) {
        // console.log({...item});
				this.data.order_id = order_id
				this.data.order_product_id = product_id
				this.data.order_unique = unique
        this.data.unique = unique
        // return ;
				postImport(this.mer_id, this.data).then(res => {
          this.show = true
					this.title = res.message
					this.$util.Tips({
						title: res.message
					})
				}).catch(e=>{
          this.$util.Tips({
          	title: e
          })
        })
			},
			close() {
				this.show = false

			},
			closeasd: function() {
				this.show = false
				getOrderList(this.where, this.mer_id).then(res => {
					console.log(res);
					this.shopList = res.data.list
					console.log(this.shopList);
				})
			},
			getback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background-color: red;

		.top-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
			width: 100%;
			background-color: #fff;

			.search {
				padding: 17rpx 30rpx;

				.search-content {
					width: 100%;
					height: 60rpx;
					padding: 0 30rpx;
					border-radius: 30rpx;
					background-color: #F5F5F5;
					font-size: 26rpx;
				}

				.iconfont {
					margin-right: 10rpx;
					font-size: 26rpx;
					color: #999999;
				}

				.input-placeholder {
					font-size: 26rpx;
					color: #999999;
				}

				.input {
					flex: 1;
				}
			}
		}
	}

	.bgc_img {
		position: absolute;
		top: 30vh;
		left: 10vw;

		image {
			width: 300px;
		}

		.txt {
			text-align: center;
		}
	}

	.list {
		width: 690rpx;
		margin: 50px auto 0 auto;

		.title {
			height: 84rpx;
			padding: 0 30rpx;
			border-bottom: 1px solid #CCCCCC;
			font-size: 32rpx;
			font-weight: 700;
			color: #282828;

			.left-wrapper {
				.iconfont {
					margin-top: 5rpx;
				}

				.store-name {
					margin: 0 10rpx;
				}

				.icon-xiangyou {
					font-size: 20rpx;
				}
			}

			.sign {
				font-size: 24rpx;
				padding: 0 7rpx;
				height: 36rpx;
				margin-right: 15rpx;
			}
		}

		.item {
			background-color: #fff;
			margin: 5px 0 5px 0;

			.item-info {
				padding: 0 30rpx;
				margin-top: 22rpx;

				.pictrue {
					width: 120rpx;
					height: 120rpx;
margin-bottom: 20rpx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 6rpx;
					}
				}

				.text {
					width: 486rpx;
					font-size: 28rpx;
					color: #999;
					margin-top: 6rpx;
					display: flex;
					justify-content: space-between;

					._left {
						width: 300rpx;
						color: #282828;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.name {
						width: 100rpx;
						color: #282828;

					}

					.money {
						text-align: right;
						float: right;

					}
				}

			}

			.event_name {
				display: inline-block;
				margin-right: 9rpx;
				color: #fff;
				font-size: 20rpx;
				padding: 0 8rpx;
				line-height: 30rpx;
				text-align: center;
				border-radius: 6rpx;
			}

			.event_ship {
				font-size: 20rpx;
				margin-top: 10rpx;
			}

			._order {
				font-size: 28rpx;
				margin: 5px 0 0 15px;
			}

			.totalPrice {
				font-size: 26rpx;
				color: #282828;
				text-align: right;
				margin: 27rpx 0 0 30rpx;
				padding: 0 30rpx 30rpx 0;


				.money {
					font-size: 34rpx;
					font-weight: bold;
					color: rgb(233, 51, 35);
				}

			}

			.totalfooter {
				width: 100%;
				height: 50px;
				position: relative;
				border-top: 1px solid #CCCCCC;

				.bnt {
					position: absolute;
					right: 10px;
					width: 176rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50rpx;
					font-size: 27rpx;
					background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
					color: white;
					margin-left: 70%;
					margin-top: 5px;

				}
			}

			.bottom {
				height: 107rpx;
				padding: 0 30rpx;
				border-top: 1px solid #f0f0f0;


			}
		}

		.event_price {
			margin: 0 0 50rpx 120rpx;
		}
	}

	.popen {
		position: absolute;
		top: 110px;
		width: 100%;
		margin: auto;
		padding: 10px;

		h4 {
			font-weight: 400;
			font-size: 20px;
			padding: 5px;
			text-align: center;
		}

		.guige {
			margin: 10px 0 10px 20px;
		}

		.shuru {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			padding: 5px;

		}

		.btn {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 10px;

			.btn_l {
				padding: 5px;
				width: 100px;
				border-radius: 4px;
			}

			.btn_r {
				width: 100px;
				padding: 5px;
				border-radius: 4px;
				background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
				border-radius: 27px 27px 27px 27px;
				color: white;
			}
		}
	}
</style>