<template>
	<view class="page" :class="{ big: isH5 }">
		<view class="panel">
			<view class="filters">
				<view class="chip" :class="{ active: statusFilter === '0,1' }" @tap="setStatus('0,1')">未完成</view>
				<view class="chip" :class="{ active: statusFilter === '1' }" @tap="setStatus('1')">处理中</view>
				<view class="chip" :class="{ active: statusFilter === '2' }" @tap="setStatus('2')">已完成</view>
			</view>
			<view v-if="errorMsg" class="error">{{ errorMsg }}</view>
		</view>

		<view v-if="loading" class="state">
			<uni-icons type="spinner-cycle" size="28" color="#94A3B8"></uni-icons>
			<view class="state-text">加载中...</view>
		</view>
		<view v-else class="list">
			<view v-if="tasks.length === 0" class="state">
				<uni-icons type="flag" size="34" color="#CBD5E1"></uni-icons>
				<view class="state-text">暂无数据</view>
			</view>
			<view v-else>
				<view class="item" v-for="row in tasks" :key="row.taskId" @tap="goDetail(row)">
					<view class="row">
						<view class="badge" :class="badgeClass(row.status)">{{ statusText(row.status) }}</view>
						<view class="item-title">{{ row.interventionType || '干预任务' }}</view>
					</view>
					<view class="item-desc">预警ID {{ row.warningId || '-' }} · 负责人 {{ row.ownerName || row.ownerId || '-' }}</view>
					<view class="item-foot">截止：{{ formatTime(row.dueTime) }}</view>
				</view>
				<view v-if="hasMore" class="load-more">上拉加载更多…</view>
				<view v-else class="load-more">没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { listInterventionTasks } from '../../api/psychology/interventionTask'
	import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

	export default {
		components: {
			UniIcons
		},
		data() {
			return {
				isH5: false,
				loading: false,
				errorMsg: '',
				tasks: [],
				total: 0,
				statusFilter: '0,1',
				query: {
					pageNum: 1,
					pageSize: 10
				}
			}
		},
		onLoad(options) {
			try {
				const info = uni.getSystemInfoSync()
				this.isH5 = info && info.uniPlatform === 'web'
			} catch (e) {
				this.isH5 = false
			}
			try {
				const st = options && typeof options.status !== 'undefined' ? String(options.status) : ''
				if (st) this.statusFilter = st
			} catch (e) {}
			this.refresh()
		},
		onShow() {
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh().finally(() => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if (this.loading) return
			if (!this.hasMore) return
			this.query.pageNum += 1
			this.fetchList(true)
		},
		computed: {
			hasMore() {
				return this.tasks.length < (this.total || 0)
			}
		},
		methods: {
			formatTime(val) {
				if (!val) return '—'
				try {
					const d = new Date(val)
					const pad = (n) => String(n).padStart(2, '0')
					return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
				} catch (e) {
					return String(val)
				}
			},
			setStatus(v) {
				this.statusFilter = v
				this.refresh()
			},
			refresh() {
				this.query.pageNum = 1
				this.tasks = []
				this.total = 0
				return this.fetchList(false)
			},
			fetchList(append) {
				this.errorMsg = ''
				this.loading = true
				return listInterventionTasks({
					pageNum: this.query.pageNum,
					pageSize: this.query.pageSize,
					status: this.statusFilter
				}).then((res) => {
					this.loading = false
					const data = res && res.data ? res.data : null
					if (!data || data.code !== 200) {
						this.errorMsg = (data && data.msg) ? data.msg : '加载失败'
						return
					}
					const rows = data.rows || []
					this.total = data.total || 0
					this.tasks = append ? this.tasks.concat(rows) : rows
				}).catch((e) => {
					this.loading = false
					this.errorMsg = e && e.message ? e.message : '网络错误'
				})
			},
			statusText(status) {
				const map = { '0': '待分配', '1': '处理中', '2': '已完成' }
				return map[String(status)] || '未知'
			},
			badgeClass(status) {
				const s = String(status)
				if (s === '2') return 'done'
				if (s === '1') return 'doing'
				return 'todo'
			},
			goDetail(row) {
				if (!row || !row.taskId) return
				uni.navigateTo({
					url: '/pages/interventionTask/detail?taskId=' + encodeURIComponent(row.taskId)
				})
			}
		}
	}
</script>

<style>
	.page {
		min-height: 100vh;
		padding: 24rpx 24rpx 120rpx;
		box-sizing: border-box;
		background: #F4F6FB;
	}
	.panel {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 18rpx;
		padding: 24rpx;
		border: 1px solid rgba(15, 23, 42, 0.06);
		box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.05);
		margin-bottom: 18rpx;
	}
	.filters {
		display: flex;
		flex-wrap: wrap;
	}
	.chip {
		padding: 14rpx 22rpx;
		border-radius: 999rpx;
		font-size: 26rpx;
		line-height: 36rpx;
		min-height: 60rpx;
		box-sizing: border-box;
		color: #64748B;
		background: rgba(15, 23, 42, 0.04);
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.chip.active {
		color: #1677ff;
		background: rgba(22, 119, 255, 0.12);
	}
	.list {
		margin-top: 8rpx;
	}
	.item {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 18rpx;
		padding: 18rpx;
		border: 1px solid rgba(15, 23, 42, 0.06);
		margin-bottom: 14rpx;
	}
	.row {
		display: flex;
		align-items: center;
	}
	.badge {
		font-size: 22rpx;
		padding: 6rpx 14rpx;
		border-radius: 999rpx;
		margin-right: 14rpx;
		color: #ffffff;
		background: #8f959e;
	}
	.badge.todo { background: #faad14; }
	.badge.doing { background: #1677ff; }
	.badge.done { background: #52c41a; }
	.item-title {
		font-size: 28rpx;
		font-weight: 700;
		color: #111827;
	}
	.item-desc {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #64748B;
	}
	.item-foot {
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #94A3B8;
	}
	.state {
		height: 360rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.85);
		border: 1px solid rgba(15, 23, 42, 0.06);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
	}
	.state-text {
		font-size: 24rpx;
		color: #94A3B8;
		font-weight: 700;
	}
	.load-more {
		text-align: center;
		color: #94A3B8;
		font-size: 22rpx;
		padding: 20rpx 0 6rpx;
	}
	.error {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #ff4d4f;
		line-height: 36rpx;
	}

	.page.big {
		padding: 14rpx 14rpx 120rpx;
		background-image:
			radial-gradient(1100rpx 520rpx at 50% 14%, rgba(43, 107, 255, 0.30) 0%, rgba(6, 16, 40, 0.0) 65%),
			linear-gradient(180deg, rgba(5, 11, 24, 0.90) 0%, rgba(8, 20, 45, 0.85) 42%, rgba(6, 16, 40, 0.92) 100%),
			url('/static/bg.png');
		background-size: auto, auto, cover;
		background-position: center, center, center;
		background-repeat: no-repeat, no-repeat, no-repeat;
	}
	.page.big .panel,
	.page.big .item {
		border: 1px solid rgba(116, 216, 255, 0.22);
		background: linear-gradient(180deg, rgba(10, 18, 38, 0.75) 0%, rgba(5, 10, 22, 0.55) 100%);
		box-shadow: 0 12rpx 24rpx rgba(0, 0, 0, 0.35);
	}
	.page.big .chip {
		color: rgba(201, 242, 255, 0.70);
		background: rgba(10, 18, 38, 0.65);
		border: 1px solid rgba(116, 216, 255, 0.20);
	}
	.page.big .chip.active {
		color: #0b1226;
		background: linear-gradient(90deg, rgba(116, 216, 255, 0.95) 0%, rgba(43, 107, 255, 0.90) 100%);
		border-color: rgba(116, 216, 255, 0.5);
	}
	.page.big .item-title {
		color: rgba(235, 248, 255, 0.92);
	}
	.page.big .item-desc,
	.page.big .item-foot,
	.page.big .load-more {
		color: rgba(201, 242, 255, 0.65);
	}
	.page.big .state {
		background: rgba(7, 13, 28, 0.30);
		border: 1px dashed rgba(116, 216, 255, 0.22);
	}
	.page.big .state-text {
		color: rgba(201, 242, 255, 0.70);
	}
</style>
