<template>
	<view class="content">
		<z-nav-bar :title="name+'患者列表'" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
		<view class="list_wrap">
			<view class="list_content" v-if="list&&list.length>0">
				<view v-if="showMask" class="mask" @click="closeMenu"></view>
				<view class="list_item" v-for="(item, index) in list" :key="index" 
				@click="clickRecord(item, index)"
				@longpress="handleLongPress(index)"
				@touchstart="handleTouchStart(index)"
				@touchend="handleTouchEnd">
					<view class="item_img">
						<image src="../../static/icon/icon_hz.png"></image>
						<text>{{item.patientName}}</text>
					</view>
					<view class="item_content">
						<view>西医诊断：<text>{{item.diagnosis}}</text></view>
						<view>助手类型：<text>{{item.chatAssistantName}}</text></view>
						<view>创建时间：<text>{{item.createTime}}</text></view>
					</view>
					
					<!-- 长按弹窗菜单 -->
					<view class="action-menu" v-if="activeIndex === index && showMenu">
						<view class="menu-item" @tap.stop="renameItem(item)">
							<text>重命名</text><uni-icons type="compose" size="18"></uni-icons>
						</view>
						<view class="menu-item" @tap.stop="moveItem(item)">
							<text>移出到</text><uni-icons type="redo" 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="patientName" placeholder="请输入患者名称" placeholder-class="custom-placeholder" />
				</view>
				<button class="edit_folder_btn" @click="update">保存</button>
			</view>
		</uni-popup>
		
		<uni-popup ref="move_folder" class="folder_popup">
			<view class="popup-content">
				<text class="edit_folder_name">移出到病历夹</text>
				<view class="edit_folder_list" style=" margin-top: 20rpx;">
					<scroll-view scroll-y class="popup-scroll">
						<view class="item_select" v-for="(item, index) in folderList" :key="index" @click="handleRadioClick(item)">
							<radio :value="String(item.id)" 
							:checked="selectedItem.id === item.id" color="#5188e5"
							:disabled="item.here === 1"
							:style="item.here === 1 ? 'opacity: 0.8; pointer-events: none;' : ''"
							/>
							<text :style="item.here === 1 ? 'color: #999;' : ''">{{ item.folderName }}</text>
						</view>
					</scroll-view>
				</view>
				<button class="edit_folder_btn" @click="confirm">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
	data() {
		return {
			id: null,
			name: '',
			list: [],
			null_text: '',
			activeIndex: -1,
			showMenu: false,    //是否显示菜单
			showMask: false,   //是否显示遮罩
			patientId: null,
			patientName: '',
			chatAssistantId: '',
			chatId: '',
			folderList: [],  //病历夹列表数据
			selectedItem: {},
			patientData: {},  //患者数据
			isLongPress: false,
			touchStartTime: 0,
		}
	},
	onLoad(e) {
		uni.hideTabBar();
		this.id = e.id;
		this.name = e.name;
	},
	onShow() {
		this.getData();
	},
	methods: {
		//病历夹获取数据
		getFolderList(assistantId,chatId) {
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/getRecordFolders',
				method: "POST",
				data: {
					assistantId: assistantId,
					chatId: chatId,
					folderName: '',
					patientName: ''
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.code==0){
					uni.hideLoading();
					if(res.list&&res.list.length>0){
						this.folderList = res.list;
					}
				}
			});
		},
		//获取数据
		getData() {
			uni.showLoading({
				title: '加载中'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/getRecordFolderChats',
				method: "POST",
				data: {
					folderId: this.id,
					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;
		},
		//重命名
		renameItem(data) {
			this.chatAssistantId = data.chatAssistantId;
			this.chatId = data.chatId;
			this.patientName = data.name;
			this.$refs.edit_folder.open('center');
			this.closeMenu();
		},
		//保存
		update(){
			if(!this.patientName){
				this.$commonJS.showToast("请输入患者名称");
				return
			}
			uni.showLoading({
				title: '正在保存'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/updateRecordFolderChat',
				method: "POST",
				data: {
					chatAssistantId: this.chatAssistantId,
					chatId: this.chatId,
					patientName: this.patientName,
				},
				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.patientName +']？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '正在操作'
						})
						this.$http.request({
							url: 'taihumed/aiRecordFolder/delRecordFolderChat',
							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();
							}
						});
					}
				}
			});
		},
		//移入到其他病历夹
		moveItem(data){
			this.closeMenu();
			this.$refs.move_folder.open('center');
			
			console.log('患者数据：',data)
			this.patientData = data;  //移入需要数据
			this.getFolderList(data.chatAssistantId, data.chatId);
		},
		//radio点击事件
		handleRadioClick(data){
			if (data.here === 1) return;  //在此病历夹的禁止点击
			this.selectedItem = data;
		},
		//移入-确定
		confirm(){
			//先操作移出
			this.$http.request({
				url: 'taihumed/aiRecordFolder/delRecordFolderChat',
				method: "POST",
				data: {
					id: this.patientData.id
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.code==0){
					//再操作移入
					this.joinFolder();
				}
			});
		},
		//移入
		joinFolder(){
			uni.showLoading({
				title: '正在操作中'
			})
			this.$http.request({
				url: 'taihumed/aiRecordFolder/addRecordFolderChat',
				method: "POST",
				data: {
					folderId: this.selectedItem.id,
					patientName: this.patientData.patientName,
					chatAssistantId: this.patientData.chatAssistantId,
					chatId: this.patientData.chatId
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.code==0){
					uni.hideLoading();
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					this.$refs.move_folder.close();
					this.getData();
				}
			});
		},
		
		//点击会话跳转到首页记录
		clickRecord(item, index){
			if (this.isLongPress) {
				this.isLongPress = false;  //重置状态
			}
			uni.setStorageSync('homeParams', { data: item, index: index, type: 'patient' });
			// uni.switchTab({
			// 	url: '/pages/home/index'
			// });
			uni.switchTab({
				url: '/pages/doctors/index'
			});
		},
		//触摸开始（防抖）
		handleTouchStart(index) {
			this.isLongPress = false;
		},
		//触摸结束
		handleTouchEnd() {
			const touchDuration = Date.now() - this.touchStartTime;
			//如果触摸时间超过300ms，认为是长按（不触发点击）
			if (touchDuration > 300) {
				this.isLongPress = true;
			}
		},
		//关闭菜单
		closeMenu() {
			this.showMenu = false;
			this.showMask = false;
			this.activeIndex = -1;
		},
	},
}
</script>

<style lang="scss" scoped>
@import '@/static/mixin.scss';
.content{
	height: 100%;
	overflow: auto;
	background-color: #fff;
}

.list_content{
	margin: 20rpx 30rpx;
	
	.list_item{
		border: 1rpx solid $themeColor;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
		padding: 25rpx;
		position: relative;
		
		.item_img{
			display: flex;
			align-items: center;
			
			image{
				width: 80rpx;
				height: 80rpx;
			}
			
			text{
				font-size: 30rpx;
				color: #333;
				padding-left: 20rpx;
			}
		}
		
		.action-menu{
			padding: 15rpx;
			width: 320rpx;
			position: absolute;
			top: 120rpx;
			left: 25rpx;
			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_content{
	margin-top: 20rpx;
	
	view{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		line-height: 46rpx;
		
		text{
			color: #999;
			width: 78%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.null_text{
	display: block;
	text-align: center;
	font-size: 30rpx;
	color: #999;
	padding-top: 150rpx;
}
.mask{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
}

.folder_popup{
	
	.popup-content{
		padding: 30rpx;
		width: 550rpx;
		background: #fff;
		border-radius: 10rpx;
	}
}
.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;
}

.popup-scroll{
	max-height: 325rpx;
	
	.item_select{
		display: flex;
		align-items: center;
		margin: 10rpx 0;
		
		radio{
			transform: scale(0.6);
			
			/deep/.uni-radio-input{
				
			}
		}
		text{
			font-size: 28rpx;
			margin-left: -8rpx;
		}
	}
}

</style>