<template>
	<view class="part_content" :class="{ 'overflow-visible': isopen }">
		<view class="part" @touchstart="part_start" @touchmove="part_move" @touchend="part_end"
			:style="{ transform: 'translateX(' + offsetx + 'px)'}">
			<p>{{part_title}}</p>
			<p>{{part_content}}</p>
		</view>
		<view class="detele" :style="{ transform: 'translateX('+ (movemax +rightoffsetx+5) + 'px)' }"
			>
			删除
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			part_title: {},
			part_content: {},
			index: Number
		},
		data() {
			return {
				startX: 0,
				startOffset: 0,
				offsetx: 0,
				rightoffsetx: 20,
				movemax: 100,
				isopen: false
			}
		},
		methods: {
			part_start(e) {
				this.startX = e.touches[0].clientX;
				this.startOffset = this.offsetx;
			},
			part_move(e) {
				this.isopen = true;
				let moveX = e.touches[0].clientX - this.startX;
				let newOffset = this.startOffset + moveX;

				if (newOffset > 0) {
					newOffset = 0;
				} else if (newOffset < -this.movemax) {
					newOffset = -this.movemax;

				}
				this.rightoffsetx = newOffset;
				this.offsetx = newOffset;
			},
			part_end(e) {
				if (this.offsetx < -this.movemax / 2) {
					this.offsetx = -this.movemax;
					this.isopen = true;
				} else {
					this.offsetx = 0;
					this.rightoffsetx = 20;
					this.isopen = false;
				}
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.part_content {
		height: 10vh;
		background-color: white;
		border-radius: 15px;
		padding: 3%;
		margin: 2%;
		background-color: #fff;
		overflow: hidden;
		position: relative;
		z-index: 2;
	}

	.part_content.overflow-visible {
		overflow: visible !important;
	}

	.part {
		width: 100%;
		margin: 10px;
	}

	.part p:first-child {
		font-size: 1.2rem;
		margin-bottom: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.part p:nth-child(2) {
		font-size: 0.8rem;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.detele {
		text-align: center;
		background-color:#C2050F;
		position: absolute;
		top: 0;
		right: 0px;
		bottom: 0;
		width: 100px;
		z-index: 1;
		transform: translateX(100px);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
</style>