<template>
	<view>
		<view class="content-header">
			<view class="header">
				<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.keyword" confirm-type="search" placeholder="请输入关键字" class="input" />
							<view class="search_btn">
								<image src="@/static/images/serchbtn.png" mode="aspectFit" @click="handleSearch">
								</image>

							</view>
						</view>

					</view>
				</view>
				<view class="recom">
					<view class="recom_bnt">
						<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)"
							style="color: #000000;">
							<view class="" style="color: #F84221;">
								{{this.recomname}}
							</view>
							<view class="recom_sym">
								<image src='@/static/images/arrow-bottom.png' mode="aspectFit"></image>
							</view>
						</rudon-rowMenuDotDotDot>
					</view>
				</view>
			</view>
			<view class="type_switch">
				<view class="recom_mend" v-for="(item,i) in options" :key="i" :class="i==num?'tradcolor':''"
					@click="btntap(i)">
					{{item.text}}

					<view :class="i==num?'tradline':''"></view>
				</view>
			</view>


		</view>
		<view class="list">
			<view class="item" v-for='(item,index) in datatlist' :key='index' @click="shopping(item)">

				<image class="shopimg" :src="item.image[0]" mode="aspectFit"></image>
				<view class="item_text">
					<span v-if='item.resale_type==1'>调货</span>
					<span v-else>打折</span>
					{{item.title}}
				</view>
				<view class="item_prices">
					<span>￥</span>{{item.total_price}}

				</view>
				<view class="item_name">
					<image class="avater" :src="item.mer_avatar" mode="aspectFit"></image>
					<view class="item_name_text">
						{{item.mer_name}}
					</view>
				</view>
			</view>
		</view>


		<view class="tardimg_add" @click="open">
			<!-- <img src="@/static/images/trad-add.png" mode="widthFix" alt=""> -->
			<image src="@/static/images/trad-add.png" mode="aspectFit"></image>
		</view>

		<release :isShow='visible' :bottom='true' @close="closeMadle" @cancel="cancel" @confirm="confirm"
			style="z-index: 999999!important;"></release>


		<view class="empty_wrapper" v-if="emptyShow">
			<u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<u-loadmore :status="status" v-if="datatlist.length>0"/>

	</view>
</template>

<script>
	import {
		getCommunityList,
		getCommunitygetOrderList
	} from '@/api/trading-floor.js'
	import {
		data,
		methods
	} from '../../../uni_modules/uview-ui/libs/mixin/mixin'
	import release from '@/components/release/release.vue';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			release,
			emptyPage
		},
		data() {
			return {
				status: 'loadmore',
				where: {
					page: 1,
					limit: 10,
					is_type: 3,
					keyword: '',

				},

				visible: false,
				num: 0,
				options: [{
						value: '0',
						text: '推荐'
					},
					{
						value: '1',
						text: '调货'
					},
					{
						value: '2',
						text: '打折专区'
					}
				],
				datatlist: [],
				recomname: '',
				emptyShow: false,
			}
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.where.page = ++this.where.page;
			this.getlist(this.num)
		},
		methods: {
			

			//选择 打折  调货 
			btntap(index) {
				this.num = index
				this.getlist()
			},
			//商品详情
			shopping(item) {

				let data = {
					type: item.resale_type,
					id: item.community_id
				}
				uni.navigateTo({
					url: '/pages/trading_hall/product_details/index?key=' + encodeURIComponent(JSON.stringify(
						data))
				})
			},
			//控制 发布弹窗
			open() {
				this.visible = true

			},

			//查询
			handleSearch() {
				if (this.num == 0) {
					this.where.resale_type = ''
				} else if (this.num == 1) {
					this.where.resale_type = 1
				} else {
					this.where.resale_type = 2
				}

				getCommunityList(this.where).then(res => {
					if (res.status == 200) {
						this.datatlist.push(...res.data.list)
						if (res.data.list.length < this.where.limit) this.status = 'nomore'
						if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
					}

				})

			},
			//列表
			getlist(index) {
				if (this.num == 0) {
					this.where.resale_type = ''
					this.datatlist=[]
				} else if (this.num == 1) {
					this.where.resale_type = 1
						this.datatlist=[]
				} else {
					this.where.resale_type = 2
				    this.datatlist=[]
				}
				getCommunityList(this.where).then(res => {
					if (res.status == 200) {
						this.datatlist.push(...res.data.list)
						if (res.data.list.length < this.where.limit) this.status = 'nomore'
						if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
					}

				})

			},
			closeMadle() {
				this.visible = false

			},
			confirm() {
				// 这里调用接口执行点击确定后的操作并关闭弹窗
				console.log('点击了确认按钮')
				this.visible = false
			},
			cancel() {
				// 点击了取消按钮直接关闭弹窗
				console.log('点击了取消按钮')
				this.visible = false
			},
			menuAction(action, rowId) {
				// console.log(action);
				// 忽略初始化时的传入的空操作
				this.num = action
				this.getlist(action)
				if (action === '') {
					this.recomname = this.options[0].text
				} else {
					this.recomname = this.options[action].text
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content-header {
		position: absolute;
		position: fixed;
		top: 0;
		z-index: 8888;
	}

	.header {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;

		.top-header {

			width: 80%;

			.search {
				padding: 17rpx 30rpx;

				.search-content {
					width: 100%;
					height: 60rpx;
					padding-left: 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;
				}

				.search_btn {
					width: 98rpx;
					height: 60rpx;

					margin-left: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}



		}

		.recom {
			width: 200rpx;
			margin-right: 39rpx;
			height: 60rpx;
			text-align: center;
			border-radius: 30px;
			border: 1px solid #F84221;
			display: flex;
			justify-content: center;
			align-items: center;

			.recom_bnt {
				font-size: 32rpx;
				font-family: 'PingFang SC';
				font-weight: 400;


				.recom_sym {
					width: 28rpx;
					height: 28rpx;
					margin-left: 0rpx;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

	}


	.type_switch {
		display: flex;
		justify-content: space-around;
		padding-top: 17rpx;
		font-size: 32rpx;
		background-color: #fff;
		font-weight: 500;
		color: #999999;
		padding-bottom: 10rpx;

		.tradcolor {
			color: #F84221;
		}

		.tradline {
			width: 26rpx;
			height: 4rpx;
			opacity: 1;
			background-color: #F84221;
			margin: 0 auto;
		}
	}

	.tardimg_add {
		position: absolute;
		bottom: 193rpx;
		right: 0rpx;
		position: fixed;
		width: 176rpx;
		height: 176rpx;

		image {
			width: 100%;
			width: 100%;
		}
	}

	.list {
		width: 694.74rpx;
		margin: 0 auto;
		display: flex;
		margin-bottom: 21rpx;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 170rpx;


		.item {
			width: 336rpx;
			height: 561rpx;
			background-color: #fff;
			margin-top: 21rpx;

			border-radius: 14rpx 14rpx 0 0;

			.shopimg {
				width: 336rpx;
				height: 314rpx
			}

			.item_text {
				width: 100%;
				padding-left: 25rpx;
				padding-right: 25rpx;
				margin-top: 19rpx;

				margin-bottom: 20rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;

				span {
					height: 35rpx;
					width: 100%;
					padding: 3px;
					margin: 2px;
					background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
					border-radius: 7px 0px 7px 0px;
					font-weight: 400;
					color: #FFFFFF;
					font-size: 25rpx;
					margin-right: 15rpx;
				}
			}

			.item_prices {
				font-size: 18px;
				color: #F84221;
				padding-left: 15px;
				padding-bottom: 18rpx;
				border-bottom: 1px solid #707070;

			}

			.item_name {
				width: 100%;
				padding-left: 15rpx;
				display: flex;

				font-size: 28rpx;
				font-family: 'PingFang SC';
				font-weight: 400;
				color: #333333;

				.avater {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-top: 19rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;

					}
				}

				.item_name_text {
					margin-top: 30rpx;
				}
			}
		}
	}
</style>