<template>
	<view class="content" style="padding-bottom: 10rpx;" :style="[theme]">
		<view class="onecontent">
			<view class="onecontent_oen flex-start">
				<input class="onecontent_oen_input" type="text" v-model="like" placeholder="搜索订单/商家名/商品名">
				<text class="onecontent_oen_text" @click="init_fn">搜索</text>
			</view>
			<view class="onecontent_tow">
				<view ref="uTabs" class="onecontent_tow_item flex-colum" v-for="(item,index) in swipercurrentdata"
					:key="index" @click="orderswitch(item)">
					<view :class="swiperCurrent == item.id?'onecontent_tow_itemtexts':'onecontent_tow_itemtext'">
						{{item.title}}
					</view>
					<image class="onecontent_tow_itemtextsimges" v-if="swiperCurrent == item.id" :src="selected" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="towcontent flex-between">
			<view class="towcontentitem" v-if="list.length>0" v-for="(item,index1) in list" :key="index1"
				@click="eeInfo(item)">
				<view class="towcontentitemone flex-start">
					<image class="towcontentitemtow_imge" :src="item.host_img" mode="aspectFill"></image>
					<view class="towcontentitemtow_item ">
						<view class="towcontentitemtow_one">
							{{item.title}}
						</view>
						<view class="towcontentitemtow_tow">
							销量 {{item.sales}}+
						</view>
						<view class="towcontentitemtow_there flex-start">
							<view class="towcontentitemtow_there_one flex-start">
								¥<text>{{item.price}}</text>
							</view>
							<view class="towcontentitemtow_there_tow">￥{{item.y_price}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length==0 && is_end == true" style="margin-top: 100rpx;width: 100%;" class="flex-colum">
				<image :src="bgnothave" mode="widthFix">
				</image>
			</view>
			<view class="flex-colum" style="width: 100%;">
				<u-loadmore :status="form.status" />
			</view>
		</view>
		<view class="contentfixed" @click="clickshopcart" v-if="style_type!=2">
			<image :src="shoppingcart" mode="widthFix"></image>
		</view>
		<bottombbar v-if="style_type == 2" :valuebbar='1'></bottombbar>
		<bottombbar v-else :valuebbar='3'></bottombbar>
	</view>
</template>

<script>
	import bottombbar from '@/components/bottombbar.vue'
	export default {
		components: {
			bottombbar
		},
		data() {
			return {
				bgnothave: uni.getStorageSync('bgnothave'),
				selected: uni.getStorageSync('selected'),
				shoppingcart: uni.getStorageSync('shoppingcart'),
				style_type:uni.cache.get('loginuser').style_type,
				
				swiperCurrent: 0,
				overlayshow: false,
				swipercurrentdata: [],
				like: '',
				is_end: false,
				list: [],
				form: {
					page: 1,
					status: 'loadmore',
				},

			}
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		onReachBottom() {
			this.shoppingindex()
		},
		onShow() {
			this.shoppingindexgoodsclass()
			this.$store.dispatch("actionsclassification");
			this.init_fn()
		},
		methods: {
			async shoppingindexgoodsclass() {
				let res = await this.api.shoppingindexgoodsclass()
				this.swipercurrentdata = res
			},
			async shoppingindex() {
				let res = await this.api.shoppingindex({
					page: this.form.page,
					like: this.like,
					classid: this.swiperCurrent
				})
				if (res.length == 0) {
					this.is_end = true
					this.form.status = 'nomore'
					return false;
				} else {
					this.form.status = 'loading';
					this.form.page = ++this.form.page;
					setTimeout(() => {
						this.list = [...this.list, ...res];
						if (res.length == 10) {
							this.form.status = 'loading';
						} else {
							this.is_end = true;
							this.form.status = 'nomore';
						}
					}, 500)
				}
			},
			init_fn() {
				this.list = []
				this.is_end = false
				this.form.page = 1
				this.form.status = 'loadmore'
				this.shoppingindex()
			},
			orderswitch(e) {
				this.swiperCurrent = e.id
				this.init_fn()
			},
			clickshopcart() {
				uni.pro.navigateTo('shopcart/index')
			},
			eeInfo(e) { //查看订单详情
				if (e.spec_type == 1) {
					uni.pro.navigateTo('mall/mallInfo', {
						id: e.id,
					})
				} else {
					uni.pro.navigateTo('mall/mallInfos', {
						id: e.id,
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.contentfixed {
		position: fixed;
		background-size: cover;
		bottom: 328rpx;
		right: 28rpx;
		width: 84rpx;
		height: 84rpx;
		text-align: center;
		border-radius: 50%;
		image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.content {
		.onecontent {
			width: 100%;
			background: #FFFFFF;
			padding: 10rpx 28rpx;

			.onecontent_oen {
				margin: 0 auto;
				width: 100%;
				height: 70rpx;
				border-radius: 36rpx;
				border:1rpx solid var(--bg-color-button);
				padding-right: 8rpx;

				.onecontent_oen_input {
					padding-left: 32rpx;
					flex: 1;
				}

				.onecontent_oen_text {

					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
					width: 116rpx;
					height: 56rpx;
					background: var(--bg-color-button);
					border-radius: 36rpx;
				}
			}

			.onecontent_tow {
				padding: 32rpx 0 32rpx 0;
				width: 100%;
				display: flex;
				overflow: auto;

				.onecontent_tow_item:nth-child(1) {
					margin: 0;
				}

				.onecontent_tow_item {
					position: relative;
					margin-left: 60rpx;
					white-space: nowrap;

					.onecontent_tow_itemtexts {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: var(--bg-color-button);
					}

					.onecontent_tow_itemtext {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.onecontent_tow_itemtextsimges{
						position: absolute;
						bottom: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 20rpx;
						height: 8rpx;
						background-size: cover;
					}
				}
			}
		}

		.towcontent {
			padding: 0 24rpx;

			.towcontentitem {
				margin-top: 32rpx;
				width:48%;
				background: #FFFFFF;
				border-radius: 18rpx;

				.towcontentitemone {
					width: 100%;
					.towcontentitemtow_imge {
						border-top-left-radius: 18rpx;
						border-top-right-radius: 18rpx;
						width: 100%;
						height: 266rpx;
					}

					.towcontentitemtow_item {
						padding: 16rpx;
						width: 100%;

						.towcontentitemtow_one {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 32rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #1A1A1A;
						}

						.towcontentitemtow_tow {
							font-size: 22rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						.towcontentitemtow_there {
							margin-top: 14rpx;

							.towcontentitemtow_there_one {
								text {
									font-size: 34rpx;
								}

								font-size: 4rpx;
								font-family: SourceHanSansCN-Bold-,
								SourceHanSansCN-Bold;
								font-weight: normal;
								color: #FC5F69;
							}

							.towcontentitemtow_there_tow {
								text-decoration: line-through;
								margin-left: 10rpx;
								font-size: 22rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}
				}
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				padding: 40rpx 68rpx;
				width: 480rpx;
				background: #FFFFFF;
				border-radius: 42rpx;

				.rectone {
					font-size: 32rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: bold;
					color: #333333;
				}

				.recttow {
					width: 100%;
					margin-top: 32rpx;

					.recttow_one {
						padding: 8rpx 40rpx;
						background: #FFFFFF;
						border-radius: 26rpx;
						border: 2rpx solid #999999;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}

					.recttow_tow {
						padding: 8rpx 40rpx;
						background: #333333;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						border-radius: 26rpx;
					}
				}
			}
		}



	}
</style>