<template>
	<view class="pages-claim" v-if="isLoad">
		<uni-nav-bar :fixed="true" :title="scrollTop>40?'':'认植认养'" backgroundColor="none" color="#FFFFFF"></uni-nav-bar>
		<view class="banner-wrap">
			<image class="banner" mode="aspectFill" src="@/static/image/imgicon/banner_bg.png"></image>
		</view>
		<scroll-view class="tab-scroll" scroll-x enable-flex>
			<view class="tab-list-box">
				<view class="tab-item on" v-for="i in 9">
					<view class="name">优质果蔬</view>
					<image class="icon-bg" mode="aspectFit" src="@/static/image/imgicon/tab_icon.png"></image>
				</view>
			</view>
		</scroll-view>

		<view class="list-wrap">
			<view class="list-item" v-for="i in 3">
				<view class="img-box">
					<image class="img" mode="aspectFill" src="@/static/image/imgicon/banner_bg.png"></image>
					<view class="hot">最热</view>
				</view>
				<view class="content">
					<view class="name-row">
						<view class="name">橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树橙子树</view>
						<view class="money">
							<text>￥</text>
							280.
							<text>00</text>
						</view>
					</view>
					<view class="address-row">
						<view class="address">产地：河源-牛营山牛营山牛营山牛营山牛营山牛营山牛营山</view>
						<view class="count">已认种：10</view>
					</view>

					<view class="info-row">
						<view class="info-item">
							<view class="count">10</view>
							<view class="label">品种</view>
						</view>
						<view class="info-item">
							<view class="count">1890</view>
							<view class="label">预产量(kg)</view>
						</view>
						<view class="info-item">
							<view class="count">10天</view>
							<view class="label">周期</view>
						</view>
					</view>

					<view class="but">我要认种</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	components: {},
	data() {
		return {
			isLoad: false,
			options: {},
			rankInd: 0,
			rankList: [
				{
					id: 1,
					title: '综合排序'
				},
				{
					id: 2,
					title: '销量优先'
				},
				{
					id: 3,
					title: '距离优先'
				}
			],
			tabList: [],
			activeIndex: 0,
			cate_id: 0,
			banner: [],
			param: {
				page: 1
			},
			list: {
				data: []
			},
			loading: true,
			lockTap: false,
			show_rank_item: false,
			refresh: false,
			
			scrollTop: 0
		};
	},
	computed: mapState({
		primaryColor: (state) => state.config.configInfo.primaryColor,
		subColor: (state) => state.config.configInfo.subColor,
		configInfo: (state) => state.config.configInfo,
		userInfo: (state) => state.user.userInfo,
		location: (state) => state.user.location,
		loginType: (state) => state.user.loginType
	}),
	async onLoad() {
		if (this.isLoad) return;
		this.$util.showLoading();
		this.initIndex();
	},
	async onShow() {
		if (!this.isLoad || (this.location.lat && this.rankInd != 2)) return;
		let [err, result] = await uni.getSetting();
		if (err || !result.authSetting[`scope.userLocation`]) return;
		this.initIndex();
	},
	onPullDownRefresh() {
		// #ifndef APP-PLUS
		uni.showNavigationBarLoading();
		// #endif
		this.initRefresh();
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		if (this.list.current_page >= this.list.last_page || this.loading) return;
		this.param.page = this.param.page + 1;
		this.loading = true;
		this.getList();
	},
	onShareAppMessage(e) {
		let { id: pid } = this.userInfo;
		let path = `/pages/claim?pid=${pid}`;
		this.$util.log(path);
		return {
			title: '',
			imageUrl: '',
			path
		};
	},
	onPageScroll(e){
		this.scrollTop = e.scrollTop
	},
	methods: {
		...mapActions(['getConfigInfo']),
		...mapMutations(['updateUserItem']),
		async initIndex(refresh = false) {
			if (!this.configInfo.id || refresh) {
				await this.getConfigInfo();
				if (this.loginType == 'apple') {
					this.updateUserItem({
						key: 'isShowLogin',
						val: false
					});
				}
			}
			await this.getLocation();
			let [banner, cate] = await Promise.all([
				this.$api.claim.claimBanner({
					type: 3
				}),
				this.$api.claim.claimCateList({
					type: 2
				})
			]);
			cate.unshift({
				id: 0,
				title: '全部'
			});
			this.banner = banner;
			this.tabList = cate;
			this.isLoad = true;
			this.refresh = false;
			this.param.page = 1;
			this.getList();
		},
		initRefresh() {
			this.refresh = true;
			this.$refs.rank_item.close();
			this.initIndex(true);
		},
		async getLocation() {
			let { location } = this;
			if (!location.lat) {
				location = await this.$util.getBmapLocation();
				this.updateUserItem({
					key: 'location',
					val: location
				});
			}
		},
		handerTabChange(index, type) {
			this[type] = index;
			this.$refs.rank_item.close();
			if (type == 'activeIndex') {
				this.cate_id = this.tabList[index].id;
			}
			this.$util.showLoading();
			this.param.page = 1;
			this.list.data = [];
			this.getList();
		},
		toShowRank() {
			let { show_rank_item } = this;
			if (this.lockTap) return;
			this.lockTap = true;
			setTimeout(() => {
				let methodModel = show_rank_item ? 'close' : 'open';
				this.$refs.rank_item[methodModel]();
			}, 500);
		},
		popupChange(e) {
			let { show } = e;
			this.show_rank_item = show;
			setTimeout(() => {
				this.lockTap = false;
			}, 200);
		},
		async getList() {
			let { list: oldList, param, tabList, activeIndex, rankList, rankInd, cate_id } = this;
			let ind = tabList.findIndex((item) => {
				return item.id == cate_id;
			});
			cate_id = ind == -1 ? 0 : cate_id;
			activeIndex = ind == -1 ? 0 : ind;
			this.cate_id = cate_id;
			this.activeIndex = activeIndex;
			let { id: sort } = rankList[rankInd];
			if (sort == 3 && !this.location.lat) {
				this.$util.hideAll();
				await this.getLocation();
				return;
			}
			let { lng = 0, lat = 0 } = this.location;
			param = Object.assign({}, param, {
				cate_id,
				sort
			});
			if (sort === 3) {
				param.lat = lat;
				param.lng = lng;
			}
			let newList = await this.$api.claim.claimList(param);
			newList.data.map((item) => {
				let { stock, sale_num } = item;
				item.precent = ((sale_num / (stock + sale_num)) * 100).toFixed(2) + '%';
			});

			if (this.param.page == 1) {
				this.list = newList;
			} else {
				newList.data = oldList.data.concat(newList.data);
				this.list = newList;
			}
			this.loading = false;
			this.$util.hideAll();
		},
		async goDetail(index) {
			let { id } = this.list.data[index];
			let url = `/claim/pages/detail?id=${id}`;
			this.$util.toCheckLogin({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.pages-claim {
	min-height: 100vh;
	background: #f8feff;
}
.banner-wrap {
	width: 100%;
	height: 596rpx;

	.banner {
		display: block;
		width: 100%;
		height: 596rpx;
	}
}

.tab-scroll {
	height: 88rpx;
	overflow: auto;
	display: flex;
	background: #ffffff;

	.tab-list-box {
		padding: 0 28rpx;
		height: 88rpx;
		width: auto;
		white-space: nowrap;
	}

	.tab-item {
		font-size: 28rpx;
		color: #777777;
		line-height: 88rpx;
		position: relative;
		overflow: hidden;
		flex-shrink: 0;
		white-space: nowrap;
		display: inline-block;

		& + .tab-item {
			margin-left: 70rpx;
		}

		&.on {
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
		}
		.name {
			position: relative;
			z-index: 1;
		}
		.icon-bg {
			width: 62rpx;
			height: 20rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, 10rpx);
		}
	}
}

.list-wrap {
	padding: 28rpx 28rpx 200rpx;

	.list-item {
		background: #ffffff;
		box-shadow: 0 6rpx 6rpx #f5f5f5;
		border-radius: 12rpx;
		margin-bottom: 28rpx;
		overflow: hidden;

		.img-box {
			position: relative;

			.img {
				width: 100%;
				height: 390rpx;
				display: block;
			}
			
			.hot{
				height: 48rpx;
				display: flex;
				align-items: center;
				padding: 0 28rpx;
				background: linear-gradient( 133deg, #FFCC49 0%, #FF8744 100%);
				border-radius: 0 0 12rpx 0;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		}

		.content {
			padding: 28rpx 16rpx;
		}

		.name-row {
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;

			.name {
				flex: 1;
				line-height: 44rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.money {
				line-height: 50rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #dd3e3e;
				margin-left: 20rpx;

				text {
					font-size: 24rpx;
				}
			}
		}

		.address-row {
			line-height: 40rpx;
			font-size: 28rpx;
			color: #999999;
			display: flex;
			padding-bottom: 24rpx;
			border-bottom: 2rpx dashed #e4eaeb;

			.address {
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 20rpx;
			}
		}

		.info-row {
			display: flex;
			padding: 35rpx 0;

			.info-item {
				flex: 1;
				text-align: center;
			}

			.count {
				line-height: 44rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #dd3e3e;
				margin-bottom: 16rpx;
			}

			.label {
				line-height: 34rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.but {
			margin: 0 auto;
			width: 568rpx;
			height: 72rpx;
			background: #1FD3EA;
			// background: linear-gradient(to right, #43c5fe, #358ffd);
			border-radius: 72rpx;
			font-size: 28rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
