<template>
	<view class="footprint">
		<!--日历控件-->
		<rf-calendar
			class="date"
			:insert="true"
			:lunar="true"
			:start-date="'2019-3-2'"
			:end-date="'2019-5-20'"
			@change="handleDateChange"
		/>
		<!--足迹列表-->
		<view class="row" v-for="(item, index) in footPrintList" :key="index">
			<!-- 删除按钮 -->
			<view class="menu" :class="'bg-' + themeColor.name" @tap.stop="handleDeleteFootPrint(item.id)">
				<text class="iconfont icon iconiconfontshanchu1"></text>
			</view>
			<!-- 商品 -->
			<view
				class="carrier"
				:class="[
					theIndex === index ? 'open' : oldIndex === index ? 'close' : ''
				]"
				@tap.stop="navTo(item.marketing_type, item.product.id)"
				@touchstart="touchStart(index, $event)"
				@touchmove="touchMove(index, $event)"
				@touchend="touchEnd(index, $event)"
			>
				<view class="left">
					<image
						class="image"
						:src="item.sku.url"
					></image>
					<image
						v-if="item.marketing_type"
						class="tag"
						:src="item.marketing_type | marketingTypeTag"
						mode="aspectFill"
					></image>
				</view>
				<view class="mid">
					<view class="title in2line">{{
						item.sku.name
					}}</view>
					<view class="data">
						<view class="item"
							><text class="iconfont icontuandui"></text>推荐
							{{ (item.product && item.product.collect_num) || 0 }}</view
						>
						<view class="item"
							><text class="iconfont iconkechakan"></text>浏览
							{{ (item.product && item.product.view) || 0 }}</view
						>
						<view
							class="item "
							v-if="parseInt(item.product && item.product.product_status) === 0"
						>
							<text class="status">失效</text>
						</view>
					</view>
					<view class="bottom">
						<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{
							item.sku.price
						}}</text>
						<text>{{ item.created_at | time }}</text>
					</view>
				</view>
			</view>
		</view>
		<rf-load-more :status="loadingType" v-if="footPrintList.length > 0" />
		<!--足迹列表为0-->
		<rf-empty info="暂无足迹列表" v-if="footPrintList.length === 0"></rf-empty>
		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>

<script>
/**
 * @des 我的足迹
 *
 * @author 237524947@qq.com
 * @date 2019-11-22 10:47
 * @copyright 2019
 */
import { footPrintDel, footPrintList } from '@/api/userInfo';
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
import rfCalendar from '@/components/rf-calendar/rf-calendar';
import moment from '@/common/moment';
import $mAssetsPath from '@/config/assets.config';
export default {
	components: {
		rfLoadMore,
		rfCalendar
	},
	data() {
		return {
			footPrintList: [],
			pageNum :0,
			loadingType: 'more',
			token: null,
			startTime: '',
			endTime: moment()
				.endOf('day')
				.format('X'),
			options: [{ text: '删除', style: { backgroundColor: '#fa436a' } }],
			loading: true,
			moneySymbol: this.moneySymbol,
			// 控制滑动效果
			theIndex: null,
			oldIndex: null
		};
	},
	filters: {
		// 时间格式化
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
		},
		marketingTypeTag(marketingType) {
			let tag;
			switch (marketingType) {
				case 'discount':
					tag = $mAssetsPath.discountTag;
					break;
				case 'bargain':
					tag = $mAssetsPath.bargainTag;
					break;
				case 'group_buy':
					tag = $mAssetsPath.groupTag;
					break;
				case 'wholesale':
					tag = $mAssetsPath.wholesaleTag;
					break;
			}
			return tag;
		}
	},
	// 加载更多
	onReachBottom() {
  if (this.loadingType === 'nomore') return;
		this.pageNum++
		this.getFootPrintList();
	},
	onLoad() {
		this.initData();
	},
	methods: {
		// 监听日期变化
		async handleDateChange(e) {
			this.pageNum = 0;
			this.footPrintList = [];
			if (parseInt(e.type) !== 0) {
				this.startTime =`${e.year}-${e.month}-${e.date}`;
				this.endTime =
					(await moment(
						`${e.year}-${e.month}-${e.date + 1} 00:00:00`,
						'YYYY-MM-DD HH:mm:ss'
					).valueOf()) / 1000;
			} else {
				this.startTime = '';
				this.startTime = undefined;
			}
			this.loading = true;
			this.getFootPrintList();
		},
		// 删除足迹
		async handleDeleteFootPrint(id) {
			await this.$http
				.delete(`${footPrintDel}?id=${id}`, {
					pageNum: this.pageNum
				})
				.then(() => {
					this.$mHelper.toast('删除足迹成功');
					this.pageNum = 0;
					this.footPrintList.length = 0;
					this.getFootPrintList();
					this.oldIndex = null;
					this.theIndex = null;
				});
		},
		// 数据初始化
		initData() {
			this.getFootPrintList();
		},
		// 获取我的足迹列表
		async getFootPrintList() {
			const params = {};
			params.pageNum = this.pageNum ;
			// 起始时间和结束时间
			if (this.startTime) {
				params.createTime = this.startTime;

			}
			await this.$http
				.get(`${footPrintList}`, {
					...params
				})
				.then(r => {
					this.loading = false;
					this.loadingType = r.length === 10 ? 'more' : 'nomore';
					this.footPrintList = [...this.footPrintList, ...r.list];
				})
				.catch(() => {
					this.loading = false;
				});
		},
		// 控制左滑删除效果
		touchStart(index, event) {
			// 多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			this.oldIndex = this.theIndex;
			this.theIndex = null;
			// 初始坐标
			this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
		},
		touchMove(index, event) {
			// 多点触控不触发
			if (event.touches.length > 1) {
				this.isStop = true;
				return;
			}
			let moveX = event.touches[0].pageX - this.initXY[0];
			let moveY = event.touches[0].pageY - this.initXY[1];

			if (this.isStop || Math.abs(moveX) < 5) {
				return;
			}
			if (Math.abs(moveY) > Math.abs(moveX)) {
				// 竖向滑动-不触发左滑效果
				this.isStop = true;
				return;
			}

			if (moveX < 0) {
				this.theIndex = index;
				this.isStop = true;
			} else if (moveX > 0) {
				if (this.theIndex != null && this.oldIndex === this.theIndex) {
					this.oldIndex = index;
					this.theIndex = null;
					this.isStop = true;
					setTimeout(() => {
						this.oldIndex = null;
					}, 150);
				}
			}
		},
		touchEnd(index, $event) {
			// 结束禁止触发效果
			this.isStop = false;
		},
		// 跳转至商品详情
		navTo(type, id) {
			let route = `/pages/product/product?id=${id}`;
			switch (type) {
				case 'discount':
					route = `/pages/marketing/discount/product?id=${id}`;
					break;
				case 'bargain':
					route = `/pages/marketing/bargain/product?id=${id}`;
					break;
				case 'group_buy':
					route = `/pages/marketing/group/product?id=${id}`;
					break;
				case 'wholesale':
					route = `/pages/marketing/wholesale/product?id=${id}`;
					break;
			}
			this.$mRouter.push({ route });
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: $page-color-base;
}
.footprint {
	.row {
		width: calc(94%);
		height: calc(22vw + 40upx);
		margin: 20upx auto;
		border-radius: 15upx;
		box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
		z-index: 4;
		border: 0;
		.menu {
			.icon {
				color: #fff;
				font-size: 60upx;
			}
			position: absolute;
			width: 29%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2;
		}
		.carrier {
			@keyframes showMenu {
				0% {
					transform: translateX(0);
				}
				100% {
					transform: translateX(-30%);
				}
			}
			@keyframes closeMenu {
				0% {
					transform: translateX(-30%);
				}
				100% {
					transform: translateX(0);
				}
			}
			&.open {
				animation: showMenu 0.25s linear both;
			}
			&.close {
				animation: closeMenu 0.15s linear both;
			}
			background-color: #fff;
			position: absolute;
			width: 100%;
			padding: 0 0;
			height: 100%;
			z-index: 3;
			display: flex;
			align-items: center;
			.left {
				width: 22vw;
				height: 22vw;
				margin-left: 20upx;
				margin-right: 10upx;
				position: relative;
				.image {
					border-radius: 10upx;
					width: 22vw;
					height: 22vw;
				}
				.tag {
					position: absolute;
					left: 0;
					top: 0;
					width: 60upx;
					height: 60upx;
				}
			}
			.mid {
				width: 100%;
				margin: 10upx 10upx 0;
				.title {
					height: 60upx;
					line-height: 1.2;
					font-size: $font-base;
				}
				.data {
					width: 100%;
					display: flex;
					align-items: center;
					margin: 10upx 0 5upx;
					font-size: $font-base;
					color: $font-color-base;
					.item {
						flex: 1;
					}
					.iconfont {
						color: $font-color-light;
						margin-right: 10upx;
					}
					.status {
						padding: 6upx 20upx;
						background-color: $base-color;
						opacity: 0.8;
						color: $color-white;
						font-size: $font-sm;
						border-radius: 6upx;
					}
				}
				.bottom {
					line-height: 1.2;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: $font-sm;
					color: $font-color-light;
					.price {
						font-size: $font-lg;
					}
				}
			}
		}
	}
}
</style>
