<!--
 * @Author: dfh
 * @Date: 2023-01-06 16:41:51
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 侧滑删除
-->
<template>
	<view class="card-wrap" :style="{
      width: `calc(100% + ${slideWidth}rpx)`,
      marginLeft: '-' + slideWidth + 'rpx',
      transform: isTouchMove ? `translateX(0px)` : `translateX(${slideWidth}rpx)`
    }">
		<view class="content" @touchstart="touchStartHandle" @touchend="touchEndHande">
			<slot name="card" />
            <slot name="delete" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			slideWidth: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				touchStartX: "",
				isTouchMove: false, //向左滑动：true,显示删除按钮
				screenWidth: 0
			};
		},
		created() {
			const {
				screenWidth
			} = uni.getSystemInfoSync();
			this.screenWidth = screenWidth;
			console.log(screenWidth);
			uni.$on("slide-close", () => {
				console.log("slide-close");
				this.isTouchMove = false;
			});
		},

		methods: {
			touchStartHandle(e) {
				this.touchStartX = e.changedTouches[0].clientX;
			},
			touchEndHande(e) {
				const touchStartX = this.touchStartX;
				const touchEndX = e.changedTouches[0].clientX;
				//向左滑动touchEndX < touchStartX
				if (touchStartX - touchEndX > 80) {
					uni.$emit("slide-close");
					this.isTouchMove = true;
				} else {
					this.isTouchMove = false;
				}
			}
		}
	};
</script>

<style lang="css" scoped>
	.card-wrap {
		position: relative;
		box-sizing: border-box;
        
		transition: all 0.3s;
	}

	.content {
		width: 100%;
        display: flex; align-items: flex-end; justify-content: space-between;
	}

	/* 左移动 */
	.move-left {
		transform: translateX(0rpx);
	}
</style>
