<template>
	<view class="main">
		<view class="toptitle">
			<view class="toptitle_left" @click="ht">
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
			<view class="toptitle_title">
				反馈列表
			</view>
		</view>
		<view class="" style="padding: 10px;background-color: #fff;border-radius: 5px;margin-bottom: 10px;">
			<u-subsection :list="list" fontSize="14" activeColor="#0052D8" :current="current"
				@change='change'></u-subsection>
		</view>
		<view class="">
			<view v-if="current == 0 && hqsbwkfklist.length === 0" style="text-align: center; padding: 40px 20px; color: #999;">
				<text>暂无设备问题反馈</text>
			</view>
			<view class="" v-if="current == 0">
				<view 
					style="border: 1px solid #e5e5e5;padding: 20rpx;border-radius: 10rpx;background-color: #fff;margin-bottom: 20rpx;cursor: pointer;" 
					class="feedback-item" 
					v-for="item in hqsbwkfklist" 
					:key="item.id" 
					@click.stop="viewDetail(item, 'sbwtfk')"
				>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #e5e5e5;padding: 20rpx;">
						<span>设备名</span>
						<span>{{item.title}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;border-bottom: 1px solid #e5e5e5;">
						<span>故障信息</span>
						<span style="flex: 1; text-align: right; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.nr == null ? "暂无" : item.nr}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;border-bottom: 1px solid #e5e5e5;">
						<span>提交时间</span>
						<span>{{timestampToTime(item.fbsj)}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;border-bottom: 1px solid #e5e5e5;">
						<span>处理状态</span>
						<span :style="{ color: getStatusColor(item.cljg) }">{{item.cljg == null ? '未处理' : item.cljg}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;">
						<span>反馈结果</span>
						<span style="flex: 1; text-align: right; margin-left: 10px;">{{item.fkjg == null ? '暂无反馈' : item.fkjg}}</span>
					</view>
					<view v-if="(item.fj1 && item.fj1.length > 0) || (item.fj2 && item.fj2.length > 0)" style="padding: 10rpx 20rpx; border-top: 1px solid #e5e5e5;">
						<text style="font-size: 12px; color: #999;">点击查看详情（含附件和图片）</text>
					</view>
				</view>
			</view>
			<view v-if="current == 1 && hqxtwtfklist.length === 0" style="text-align: center; padding: 40px 20px; color: #999;">
				<text>暂无系统问题反馈</text>
			</view>
			<view class="" v-if="current == 1">
				<view 
					style="border: 1px solid #e5e5e5;padding: 20rpx;border-radius: 10rpx;background-color: #fff;margin-bottom: 20rpx;cursor: pointer;" 
					class="feedback-item" 
					v-for="item in hqxtwtfklist" 
					:key="item.id" 
					@click.stop="viewDetail(item, 'xtwtfk')"
				>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #e5e5e5;padding: 20rpx;">
						<span>问题分类</span>
						<span>{{item.qxgn || '无'}}</span>
					</view>
					<view class="" style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #e5e5e5;padding: 20rpx;">
						<span>问题描述</span>
						<span style="flex: 1; text-align: right; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.nr}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;border-bottom: 1px solid #e5e5e5;">
						<span>提交时间</span>
						<span>{{timestampToTime(item.fbsj)}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;border-bottom: 1px solid #e5e5e5;">
						<span>处理状态</span>
						<span :style="{ color: getStatusColor(item.cljg) }">{{item.cljg == null ? '未处理' : item.cljg}}</span>
					</view>
					<view class=""  style="display: flex;justify-content: space-between;align-items: center;padding: 20rpx;">
						<span>反馈结果</span>
						<span style="flex: 1; text-align: right; margin-left: 10px;">{{item.fkjg == null ? '暂无反馈' : item.fkjg}}</span>
					</view>
					<view v-if="(item.fj1 && item.fj1.length > 0) || (item.fj2 && item.fj2.length > 0)" style="padding: 10rpx 20rpx; border-top: 1px solid #e5e5e5;">
						<text style="font-size: 12px; color: #999;">点击查看详情（含附件和图片）</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				list: ['设备问题反馈','系统问题反馈'],
				current: 0,
				title: "关键词",
				hqxtwtfklist:[],
				hqsbwkfklist:[],
			}
		},
		onLoad() {
			this.hqxtwtfk();
			this.hqsbwkfk();
		},
		methods: {
			// 查看详情
			viewDetail(item, type) {
				console.log('点击查看详情:', item, type);
				if (!item || !item.id) {
					uni.showToast({
						title: '数据异常，无法查看详情',
						icon: 'none'
					});
					return;
				}
				try {
					// 确保附件数据是数组格式
					const detailData = {
						...item,
						type: type // 'sbwtfk' 或 'xtwtfk'
					};
					
					// 处理附件数据
					if (!Array.isArray(detailData.fj1)) {
						if (typeof detailData.fj1 === 'string' && detailData.fj1) {
							try {
								detailData.fj1 = JSON.parse(detailData.fj1);
							} catch (e) {
								console.warn('解析 fj1 失败:', e);
								detailData.fj1 = [];
							}
						} else {
							detailData.fj1 = [];
						}
					}
					if (!Array.isArray(detailData.fj2)) {
						if (typeof detailData.fj2 === 'string' && detailData.fj2) {
							try {
								detailData.fj2 = JSON.parse(detailData.fj2);
							} catch (e) {
								console.warn('解析 fj2 失败:', e);
								detailData.fj2 = [];
							}
						} else {
							detailData.fj2 = [];
						}
					}
					
					console.log('准备传递的详情数据:', detailData);
					console.log('fj1(视频)数量:', detailData.fj1 ? detailData.fj1.length : 0);
					console.log('fj2(图片)数量:', detailData.fj2 ? detailData.fj2.length : 0);
					
					// 保存详情数据到本地存储
					uni.setStorageSync('fkDetail', JSON.stringify(detailData));
					console.log('数据已保存，准备跳转到详情页');
					uni.navigateTo({
						url: '/pages/new/yhfk/detail',
						success: () => {
							console.log('跳转成功');
						},
						fail: (err) => {
							console.error('跳转失败:', err);
							uni.showToast({
								title: '跳转失败，请检查页面配置',
								icon: 'none'
							});
						}
					});
				} catch (e) {
					console.error('保存数据失败:', e);
					uni.showToast({
						title: '保存数据失败',
						icon: 'none'
					});
				}
			},
			// 获取处理状态颜色
			getStatusColor(cljg) {
				if (!cljg) return '#999';
				if (cljg.includes('已处理')) return '#67C23A';
				if (cljg.includes('进行中')) return '#E6A23C';
				if (cljg.includes('未处理')) return '#F56C6C';
				return '#999';
			},
			// 更新系统问题已读（延迟执行，避免影响列表显示）
			gxxtwtyd(){
				// 延迟更新已读状态，避免影响列表显示
				setTimeout(() => {
					if(this.hqxtwtfklist.length > 0){
						for(let i = 0;i < this.hqxtwtfklist.length;i++){
							this.API.gxxtwtyd(this.hqxtwtfklist[i]).then(res=>{
								console.log('更新系统问题已读',res);
							}).catch(err => {
								console.error('更新系统问题已读失败:', err);
							});
						}
					}
				}, 500);
			},
			// 更新设备问题已读（延迟执行，避免影响列表显示）
			gxsbwtyd(){
				// 延迟更新已读状态，避免影响列表显示
				setTimeout(() => {
					if(this.hqsbwkfklist.length > 0){
						for(let i = 0;i < this.hqsbwkfklist.length;i++){
							this.API.gxsbwtyd(this.hqsbwkfklist[i]).then(res=>{
								console.log('更新设备问题已读',res);
							}).catch(err => {
								console.error('更新设备问题已读失败:', err);
							});
						}
					}
				}, 500);
			},
			ht(){
				uni.navigateBack({
					delta:1
				})
			},
			timestampToTime(timestamp) {
				console.log("timestamp",timestamp);
			    const date = new Date(timestamp); //时间戳为10位需*1000，13位不需乘
			    const Y = date.getFullYear() + '-';
			    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			    const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			    const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			    const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			    
			    return Y + M + D + h + m + s;
			},
			change(e) {
				this.current = e
				console.log('this.current',this.current);
				if(e == 1){
					this.gxxtwtyd();
				}else{
					this.gxsbwtyd();
				}
			},
			// 获取系统问题反馈 
			hqxtwtfk(){
				this.API.hqdqdlrxx().then(res=>{
					console.log("用户信息",res);
					var info = {
						currentPage:1,
						pageSize:100,
						fbr:res.data.userInfo.userId
					}
					this.API.hqxtwtfk(info).then(res1=>{
						console.log("获取系统问题反馈",res1);
						if(res1 && res1.data && res1.data.list){
							this.hqxtwtfklist = res1.data.list || [];
							// 延迟更新已读，避免影响列表显示
							this.gxxtwtyd();
						} else {
							this.hqxtwtfklist = [];
						}
					}).catch(err => {
						console.error("获取系统问题反馈失败:", err);
						this.hqxtwtfklist = [];
					});
				}).catch(err => {
					console.error("获取用户信息失败:", err);
					this.hqxtwtfklist = [];
				});
			},
			// 获取设备问题
			hqsbwkfk(){
				this.API.hqdqdlrxx().then(res=>{
					console.log("用户信息",res);
					var info = {
						currentPage:1,
						pageSize:100,
						fbr:res.data.userInfo.userId
					}
					this.API.hqsbwkfk(info).then(res1=>{
						console.log("获取设备问题反馈",res1);
						if(res1 && res1.data && res1.data.list){
							this.hqsbwkfklist = res1.data.list || [];
							// 延迟更新已读，避免影响列表显示
							this.gxsbwtyd();
						} else {
							this.hqsbwkfklist = [];
						}
					}).catch(err => {
						console.error("获取设备问题反馈失败:", err);
						this.hqsbwkfklist = [];
					});
				}).catch(err => {
					console.error("获取用户信息失败:", err);
					this.hqsbwkfklist = [];
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';

	.u-subsection--button {
		height: 50px;
	}
	
	.feedback-item {
		transition: all 0.3s;
		&:active {
			background-color: #f5f5f5;
			transform: scale(0.98);
		}
	}
</style>