<template>
	<view class="content">
		<z-nav-bar title="我的病历夹" bgColor="#5188e5" fontColor="#fff">
			<template v-slot:right>
			    <view class="top_right" @tap="createFolder">
					<uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
					<text>创建</text>
			    </view>
			  </template>
		</z-nav-bar>
		<view class="list_wrap">
			<view v-if="showMask" class="mask" @click="closeMenu"></view>
			<view class="list_content" v-if="list&&list.length>0">
				<view class="list_item" v-for="(item, index) in list" :key="index" 
				@click="goToList(item.id, item.folderName)"
				@longpress="handleLongPress(index)"
				@touchstart="handleTouchStart(index)"
				@touchend="handleTouchEnd"
				:class="activeIndex==index?'active':''">
					<view class="item_data">
						<text class="item_name">{{item.folderName}}</text>
						<text class="item_time">{{item.createTime}}</text>
					</view>
					<!-- 长按弹窗菜单 -->
					<view class="action-menu" v-if="activeIndex === index && showMenu">
						<view class="menu-item" @tap.stop="renameItem(item.folderName, item.id)">
							<text>重命名</text><uni-icons type="compose" size="18"></uni-icons>
						</view>
						<view class="menu-item" @tap.stop="deleteItem(item)">
							<text style=" color: red;">删除</text><uni-icons type="trash" size="18" color="red"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<text class="null_text" v-else>{{null_text}}</text>
		</view>
		
		<uni-popup ref="edit_folder" class="folder_popup">
			<view class="popup-content">
				<text class="edit_folder_name">重命名</text>
				<view class="edit_folder_input">
					<input type="text" v-model="folderName" placeholder="请输入病历夹名称" placeholder-class="custom-placeholder" />
				</view>
				<button class="edit_folder_btn" @click="update">保存</button>
			</view>
		</uni-popup>
		
		<uni-popup ref="add_folder" class="folder_popup">
			<view class="popup-content">
				<text class="add_folder_name">创建病历夹</text>
				<view class="add_folder_input">
					<input type="text" v-model="addFolderName" placeholder="请输入病历夹名称" placeholder-class="custom-placeholder" />
				</view>
				<button class="add_folder_btn" @click="addFolder">保存</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
	data() {
		return {
			id: null,
			list: [],
			null_text: '',
			folderName: '',
			activeIndex: -1,
			showMenu: false,    //是否显示菜单
			showMask: false,   //是否显示遮罩
			addFolderName: '',
			isLongPress: false,
			touchStartTime: 0,
		}
	},
	onLoad() {
		uni.hideTabBar();
	},
	onShow() {
		this.getData();
	},
	methods: {
		//获取数据
		getData() {
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/getRecordFolders',
				method: "POST",
				data: {
					folderName: '',
					patientName: ''
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.code==0){
					uni.hideLoading();
					if(res.list&&res.list.length>0){
						this.list = res.list;
					}else{
						this.list = [];
						this.null_text = '暂无数据';
					}
				}
			});
		},
		//长按操作
		handleLongPress(index) {
			this.activeIndex = index;
			this.showMenu = true;
			this.showMask = true;
			//标记长按模式
			this.isLongPress = true;
		},
		//关闭菜单
		closeMenu() {
			this.showMenu = false;
			this.showMask = false;
			this.activeIndex = -1;
		},
		//重命名
		renameItem(name, id) {
			this.id = id;  //编辑的id
			this.folderName = name;
			this.$refs.edit_folder.open('center');
			this.closeMenu();
		},
		//保存
		update(){
			if(!this.folderName){
				this.$commonJS.showToast("请输入病历夹名称");
				return
			}
			uni.showLoading({
				title: '正在保存'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/updateRecordFolder',
				method: "POST",
				data: {
					id: this.id,
					folderName: this.folderName,
					sort: 0
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.code==0){
					uni.hideLoading();
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					this.$refs.edit_folder.close();
					this.getData();
				}
			});
		},
		//删除
		deleteItem(data) {
			this.closeMenu();
			uni.showModal({
				title: '提示',
				content: '确定删除['+ data.folderName +']病历夹？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '正在删除'
						})
						this.$http.request({
							url: 'taihumed/aiRecordFolder/delRecordFolder',
							method: "POST",
							data: {
								id: data.id
							},
							header: {
								"Content-Type": "application/json",
							},
						})
						.then(res=> {
							if(res.code==0){
								uni.hideLoading();
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
								this.getData();
							}
						});
					}
				}
			});
		},
		//创建
		createFolder(){
			this.$refs.add_folder.open();
			this.addFolderName = '';
		},
		//保存
		addFolder(){
			if(!this.addFolderName){
				this.$commonJS.showToast("请输入病历夹名称");
				return
			}
			uni.showLoading({
				title: '正在创建中'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/addRecordFolder',
				method: "POST",
				data: {
					folderName: this.addFolderName,
					sort: 0
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.code==0){
					uni.hideLoading();
					uni.showToast({
						title: '创建成功',
						icon: 'success'
					})
					this.$refs.add_folder.close();
					this.getData();
				}
			})
		},
		
		
		//跳转患者列表页
		goToList(id, name){
			if (this.isLongPress) {
				this.isLongPress = false;  //重置状态
			}
			this.onPageJump("/pages/folder/patient?id="+id+"&name="+name);
		},
		//触摸开始（防抖）
		handleTouchStart(index) {
			this.isLongPress = false;
		},
		//触摸结束
		handleTouchEnd() {
			const touchDuration = Date.now() - this.touchStartTime;
			//如果触摸时间超过300ms，认为是长按（不触发点击）
			if (touchDuration > 300) {
				this.isLongPress = true;
			}
		},
		onPageJump(url) {
			uni.navigateTo({
				url: url,
			});
		},
	},
}
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.content{
	height: 100%;
	overflow: auto;
	background-color: #fff;
}
.top_right{
	display: flex;
	align-items: center;
	margin-right: 30rpx;
	
	text{
		font-size: 28rpx;
		color: #fff;
		padding-left: 2rpx;
	}
}
.list_content{
	margin: 20rpx 30rpx;
	border-radius: 10rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0px 0px 10px 0px #a7bbe4;
	
	.list_item{
		position: relative;
		transition: background-color 0.2s;
		
		.action-menu{
			padding: 15rpx;
			width: 320rpx;
			position: absolute;
			top: 75rpx;
			left: 0;
			z-index: 100;
			background: #fff;
			border-radius: 8rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			overflow: hidden;
			
			.menu-item{
				padding: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				line-height: 36rpx;
			}
			
			.menu-item:last-child{
				border-bottom: none;
			}
			
			.menu-item:active{
				background-color: #f5f5f5;
			}
		}
		
		.item_data{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			font-size: 30rpx;
			line-height: 50rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e5dcdc;
			
			.item_name{
				width: 60%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.item_time{
				color: #999;
				font-size: 24rpx;
			}
		}
	}
	
	.list_item:last-child .item_data{
		border-bottom: none;
	}
}

.null_text{
	display: block;
	text-align: center;
	font-size: 30rpx;
	color: #999;
	padding-top: 150rpx;
}


.edit_folder_name{
	font-size: 30rpx;
	line-height: 45rpx;
	color: #5188e5;
}
.edit_folder_input{
	margin-top: 20rpx;
	
	input{
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #303030;
		border-radius: 10rpx;
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}
	
	.custom-placeholder{
		font-size: 26rpx;
	}
}
.edit_folder_btn{
	width: 50%;
	margin: 25rpx auto 0;
	background: #5188e5;
	border-radius: 50rpx;
	font-size: 26rpx;
	color: #fff;
	line-height: 70rpx;
}

.folder_popup{
	
	.popup-content{
		padding: 30rpx;
		width: 550rpx;
		background: #fff;
		border-radius: 10rpx;
	}
}

.mask{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
}

.add_folder_name{
	font-size: 30rpx;
	line-height: 45rpx;
	color: #5188e5;
}
.add_folder_input{
	margin-top: 20rpx;
	
	input{
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #303030;
		border-radius: 10rpx;
		border: 1rpx solid #ddd;
		box-sizing: border-box;
	}
	
	.custom-placeholder{
		font-size: 26rpx;
	}
}
.add_folder_btn{
	width: 50%;
	margin: 25rpx auto 0;
	background: #5188e5;
	border-radius: 50rpx;
	font-size: 26rpx;
	color: #fff;
	line-height: 70rpx;
}
</style>