<template>
	<view class="ai-container">
		<!-- 自定义导航栏 -->
		<CustomNavbar
			title="AI调优"
			type="center"
			:isLeft="true"
			@handleLeft="handleLeft"
			bgColor="rgba(0,0,0,0)"
		/>
		<view class="bg">
			<image
				src="@/static/images/ai_bg.png"
				mode="aspectFill"
			/>
		</view>
		<view class="ai-content-container">
		<!-- 顶部搜索和日期选择 -->
		<view class="hearder">
			<!-- 日期选择框 -->
			<view class="time-box">
				<view @click="openDatePicker('start')">
					<text class="text-time" v-if="!paramsData.startDate">开始日期</text>
					<text v-else>{{ paramsData.startDate}}</text>
					<text :class="isOpenStartPicker ? 'up-picker' : 'down-picker'"></text>
				</view>
				<view>至</view>
				<view @click="openDatePicker('end')">
					<text class="text-time" v-if="!paramsData.endDate">结束日期</text>
					<text v-else>{{ paramsData.endDate}}</text>
					<text :class="isOpenEndPicker ? 'up-picker' : 'down-picker'"></text>
				</view>
				<view class="search" 	@click="search"> 查询 </view>
			</view>
		</view>

		<!-- 顶部导航 -->
		<view class="flex-r-b challenge-top" @click="handleMenuSelect">
			<view class="flex-r-c" :class="{ 'challenge-active': currentIndex }"
				>问答记录</view
			>
			<view class="flex-r-c" :class="{ 'challenge-active': !currentIndex }"
				>调优记录</view
			>
			<view
				class="challenge-top-bg"
				:style="{ left: currentIndex ? '7%' : '34%' }"
			></view>
		</view>

		<!-- 内容区域 -->
		<view class="content pd-12">
			<view class="list">
				<view
					class="item"
					v-for="(item, index) in dateList"
					v-if="currentIndex"
					:key="index"
					@click="toPage(`/subpackages/my/chatHistory/index?userId=${item.userId}`)"
				>
					<view class="left">
						<view>
							<image
								src="@/static/images/default_avatar.png"
								mode="scaleToFill"
							/>
						</view>
						<view class="right">
							<view class="top">
								<text>{{ item.userName }}</text>
								<view
									>查看详情<uv-icon
										name="arrow-right"
										color="#00BCA6"
										size="12"
									></uv-icon>
								</view>
							</view>
							<view class="center">
								<view>
									<CustomIcon iconName="clock-circle" color="#848D99" size="28rpx" />
									<text class="title">对话发起时间</text>
									<text>{{ item.createTime }}</text>
								</view>
								<view>
									<CustomIcon iconName="clock-circle" color="#848D99" size="28rpx" />
									<text class="title">最后回复时间</text>
									<text>{{ item.latestReplyTime }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view
					class="item"
					v-for="(item, index) in dateList"
					v-if="!currentIndex"
					:key="index"
				>
					<view class="ai-top">
						<view class="flex-r-b">
							<image
								src="@/static/images/default_avatar.png"
								mode="scaleToFill"
							/>
							<text>{{item.userName}}</text>
						</view>
						<view class="flex-r-b">
							<CustomIcon iconName="clock-circle" color="#848D99" size="32rpx" />
							<text>{{item.updateTime}}</text>
						</view>
					</view>
					<view class="ai-center">
						<view>
							<view class="title">
								<view class="image">
									<image
										src="@/static/images/ai_icon_1.png"
										mode="aspectFill"
									/>
								</view>

								提出内容</view
							>
							<text>{{item.questionContent}}</text>
						</view>
						<view>
							<view class="title before">调整前回复</view>
							<text class="context-text">{{item.rawContent}}</text>
						</view>
						<view class="after">
							<view class="after-con">
								<view class="title">
									<view class="image">
										<image
											src="@/static/images/ai_icon_2.png"
											mode="aspectFill"
										/> </view
									>调整后回复</view
								>
								<text class="context-text">{{item.tuningContent}}</text>
							</view>

							<view class="bottom">
								<view class="edit" @click="openTuningPopup(item.id,item.msgId,item.tuningContent)">
									<CustomIcon iconName="sync" color="#848D99" size="32rpx" />
									<text>修改回复</text>
								</view>
								<view class="edit" @click="openDeleteModal(item.id)">
									<CustomIcon iconName="delete1" color="#848D99" size="32rpx" />
									<text>删除</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<CustomLoadMore :status="loadStatus" />
			</view>
		</view>
		</view>

		<!-- 日期选择器 -->
		<uv-datetime-picker
			ref="datetimePicker"
			v-model="dateValue"
			mode="date"
			@confirm="dateTimePickerConfirm"
			@close="closePicker"
			@cancel="closePicker"
			cancelColor="#11C3AE"
			confirmColor="#11C3AE"
		/>
	</view>
		<!-- 弹出窗 -->
		<uv-popup ref="popup" mode="bottom" round="5">
		<view class="popup-content">
			<view class="header">
				<text @click="handlePopupCancel">取消</text>
				<text @click="handlePopupConfirm">确定</text>
			</view>
			<uv-textarea
				v-model="tungData.tuningContent"
				count
				@confirm = "handlePopupConfirm"
				placeholder="请输入调优方案"
				customStyle="height: 300rpx;
					background: #F5F7FA;
					border: unset;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				"
				:focus="true"
				countStyle="background: #F5F7FA;
						font-weight: 400;
						padding: 30rpx;
						font-size: 28rpx;
						color: #86909C;"
				maxlength="50"
			></uv-textarea>
		</view>
	</uv-popup>
	<!-- 删除模态框 -->
	<uv-modal ref="modal" title="提示" content='是否删除该调优' 
      confirmText="确定"
      confirmColor="#11C3AE"
      :showCancelButton="true"
      @confirm="modalConfirm" align="center"></uv-modal>
</template>

<script lang="ts" setup>
import { ref, inject, onMounted } from "vue";
import baseApi from "@/api/base";
import { onDateChange } from "@/utils/common";
import { onReachBottom } from "@dcloudio/uni-app";
import aichat from "@/api/aichat";

const $showToast: any = inject("$showToast");
const currentIndex = ref(true);
const dateValue = ref(new Date().toDateString());
const datetimePicker = ref<any>(null);
const dateList = ref<any>([]); // 患者列表
const loadStatus = ref("nomore");
const popup = ref<any>(null)
const modal = ref<any>(null)
const deleteTuningId = ref(0)
const tungData = ref({
	tuningContent:" ",
	msgId:0,
	tuningId:0
})
const paramsData = ref({
	startDate: "",
	pageSize: 10,
	pageNum: 1,
	endDate: "",
});
const pageTotal = ref(0);
const dateType = ref("start");
const isOpenStartPicker = ref(false);
const isOpenEndPicker = ref(false);

/**
 * 删除模态框
 */
const modalConfirm = async () => {
	await aichat.deleteTuning({tuningId:deleteTuningId.value})
	$showToast("删除成功！")
	dateList.value = []
	getData()

}
const openDeleteModal = (id :number) => {
	deleteTuningId.value = id
	modal.value.open()

}
/**
 * 打开调优弹窗
 */
 const openTuningPopup = (tId:number,mId:number,questionContent:string) => {
	tungData.value.msgId = mId
	tungData.value.tuningId = tId
	tungData.value.tuningContent = questionContent
	popup.value.open();
};
const search = () => {
	dateList.value = []
	getData()
} 
/**
 * 关闭调优弹窗，清空内容
 */
const handlePopupCancel = () => {
	popup.value.close();

	tungData.value.tuningContent = "";
};
/**
 * 关闭调优弹窗，提交内容
 */
 const handlePopupConfirm = () => {
	popup.value.close();
	sendTung()
	tungData.value.tuningContent = "";
};
/**
 * 发起调优
 */
const sendTung = async () => {
	await aichat.tuneMsg(tungData.value)
	dateList.value = []
	getData()
}

/**
 * 菜单选择
 */
const handleMenuSelect = () => {
	dateList.value = []
	currentIndex.value = !currentIndex.value;
	getData()
};
/**
 * 打开日期选择器
 * @param type - 日期类型（开始日期或结束日期）
 */
const openDatePicker = (type: "start" | "end") => {
	datetimePicker.value.open(); // 打开日期选择器
	dateType.value = type; // 设置当前选择的日期类型
	isOpenStartPicker.value = type === "start";
	isOpenEndPicker.value = type === "end";
};

/**
 * 选择器确认回调
 * @param e - 选择器返回的数据
 */
const dateTimePickerConfirm = (e: any) => {
	const formattedDate = onDateChange(e.value); // 格式化选择的日期
	
	
	if (dateType.value === "start") {
		paramsData.value.startDate = formattedDate.split(" ")[0]; // 设置开始日期
		// 如果结束日期存在且早于开始日期，则重置开始日期并提示用户
		if (
			paramsData.value.endDate &&
			new Date(paramsData.value.endDate) < new Date(formattedDate)
		) {
			console.log("1111111",new Date(paramsData.value.endDate) < new Date(formattedDate));
			paramsData.value.startDate = "";
			return $showToast("开始日期不能晚于结束日期");
		}
	} else {
		paramsData.value.endDate = formattedDate.split(" ")[0]; // 设置结束日期
		// 如果开始日期存在且结束日期早于开始日期，则重置结束日期并提示用户
		if (
			paramsData.value.startDate &&
			new Date(formattedDate) < new Date(paramsData.value.startDate)
		) {
			paramsData.value.endDate = "";
			return $showToast("结束日期不能早于开始日期");
		}
	}

	// 关闭选择器
	isOpenStartPicker.value = false;
	isOpenEndPicker.value = false;

	// // 获取数据
	// getData();
};

/**
 * 选择器关闭回调
 */
const closePicker = () => {
	isOpenStartPicker.value = false;
	isOpenEndPicker.value = false;
	dateValue.value = new Date().toDateString();
};

/**
 * 返回上一页
 */
const handleLeft = () => {
	uni.navigateBack({ delta: 1 });
};

/**
 * 跳转到指定页面
 * @param url - 目标页面的 URL
 */
const toPage = (url: string) => {
	uni.navigateTo({ url });
};

/**
 * 获取页面数据
 */
const getData = async () => {
	loadStatus.value = "loading";
	if(currentIndex.value) {
		const {data:{records,total}} = await aichat.sessionList(paramsData.value)
		dateList.value.push(...records)
		pageTotal.value = total
	}else{
		const {data:{records,total}} = await aichat.getTuningList(paramsData.value
		)
		dateList.value.push(...records)
		pageTotal.value = total
	}

	// dateList.value = data

	if (dateList.value.length < pageTotal.value) {
		loadStatus.value = "loadmore";
	} else {
		loadStatus.value = "nomore";
	}
};

onReachBottom(() => {
	loadStatus.value = "loading";
	if (dateList.value.length < pageTotal.value) {
		++paramsData.value.pageNum;
		getData();
	} else {
		loadStatus.value = "nomore";
	}
});

onMounted(() => {
	getData(); // 组件挂载后获取数据
});
</script>

<style lang="scss">
@import "./index.scss";
page {
	background-color: #f5f7fa;
}
</style>
