<template>
	<view class="page">
		<view class="summary">
			<view class="summary-title">我的推广任务</view>
			<view class="summary-amount">¥{{ overview.pending_amount || '0.00' }}</view>
			<view class="summary-sub">待推广金额 / 满 ¥{{ overview.base_amount || '4333.00' }} 生成 1 个任务</view>
			<view class="summary-grid">
				<view><text>{{ overview.active_task_count || 0 }}</text><text>进行中</text></view>
				<view><text>{{ overview.completed_task_count || 0 }}</text><text>已完成</text></view>
				<view><text>{{ overview.cashout_task_count || 0 }}</text><text>已兑现</text></view>
			</view>
		</view>
		<view class="tabs">
			<view v-for="tab in tabs" :key="tab.value" :class="{active: status === tab.value}" @tap="switchTab(tab.value)">{{ tab.label }}</view>
		</view>
		<view class="task" v-for="item in list" :key="item.id" @tap="goDetail(item.id)">
			<view class="task-head">
				<text>{{ item.task_no }}</text>
				<text>{{ statusText(item.status) }}</text>
			</view>
			<view class="progress">
				<view class="bar"><view :style="{width: progressWidth(item)}"></view></view>
				<text>{{ item.progress_count }}/{{ item.target_count }}</text>
			</view>
			<view class="task-meta">来源订单：{{ item.source_order_no }}</view>
			<view class="task-meta">任务金额：¥{{ item.base_amount }}</view>
		</view>
		<view v-if="!list.length && !loading" class="empty">暂无推广任务</view>
	</view>
</template>

<script>
import { getSyjOverview, getSyjTaskList } from '@/api/syjPromote.js';

export default {
	data() {
		return {
			overview: {},
			list: [],
			loading: false,
			status: '',
			page: 1,
			tabs: [
				{ label: '全部', value: '' },
				{ label: '进行中', value: 0 },
				{ label: '已完成', value: 1 },
				{ label: '已兑现', value: 2 },
				{ label: '异常', value: 4 }
			]
		};
	},
	onShow() {
		this.load();
	},
	methods: {
		load() {
			this.loading = true;
			Promise.all([
				getSyjOverview(),
				getSyjTaskList({ status: this.status, page: this.page, limit: 20 })
			]).then(([overview, tasks]) => {
				this.overview = overview.data || overview;
				const data = tasks.data || tasks;
				this.list = data.list || [];
			}).finally(() => {
				this.loading = false;
			});
		},
		switchTab(value) {
			this.status = value;
			this.page = 1;
			this.load();
		},
		goDetail(id) {
			uni.navigateTo({ url: `/pages/syj/promote_task/detail?id=${id}` });
		},
		progressWidth(item) {
			const total = Number(item.target_count || 4);
			return `${Math.min(100, Number(item.progress_count || 0) / total * 100)}%`;
		},
		statusText(status) {
			return ['进行中', '已完成', '提前兑现', '已关闭', '异常', '审核中'][Number(status)] || '未知';
		}
	}
};
</script>

<style scoped>
.page{min-height:100vh;background:#f6f7f9;padding:24rpx;}
.summary{background:#fff;border-radius:16rpx;padding:32rpx;}
.summary-title{font-size:30rpx;color:#333;}
.summary-amount{font-size:56rpx;font-weight:600;color:#0f8f6f;margin-top:20rpx;}
.summary-sub{font-size:24rpx;color:#777;margin-top:8rpx;}
.summary-grid{display:flex;margin-top:28rpx;border-top:1px solid #eee;padding-top:24rpx;}
.summary-grid view{flex:1;display:flex;flex-direction:column;gap:8rpx;font-size:24rpx;color:#777;}
.summary-grid text:first-child{font-size:34rpx;color:#222;font-weight:600;}
.tabs{display:flex;gap:16rpx;margin:24rpx 0;overflow-x:auto;}
.tabs view{white-space:nowrap;background:#fff;border-radius:999rpx;padding:14rpx 24rpx;font-size:26rpx;color:#555;}
.tabs .active{background:#0f8f6f;color:#fff;}
.task{background:#fff;border-radius:16rpx;padding:28rpx;margin-bottom:20rpx;}
.task-head{display:flex;justify-content:space-between;font-size:28rpx;color:#222;}
.task-head text:last-child{color:#0f8f6f;}
.progress{display:flex;align-items:center;gap:20rpx;margin:24rpx 0;}
.bar{flex:1;height:12rpx;background:#edf0f2;border-radius:12rpx;overflow:hidden;}
.bar view{height:100%;background:#0f8f6f;}
.task-meta{font-size:24rpx;color:#777;line-height:38rpx;}
.empty{text-align:center;color:#999;font-size:28rpx;padding:80rpx 0;}
</style>
