<template>
	<view class="page">
		<view class="card">
			<view class="title">{{ detail.task_no }}</view>
			<view class="status">{{ statusText(detail.status) }}</view>
			<view class="amount">¥{{ detail.base_amount || '0.00' }}</view>
			<view class="progress">
				<view class="bar"><view :style="{width: progressWidth}"></view></view>
				<text>{{ detail.progress_count || 0 }}/{{ detail.target_count || 4 }}</text>
			</view>
		</view>
		<view class="card">
			<view class="section-title">推荐进度</view>
			<view class="record" v-for="item in records" :key="item.id">
				<text>第 {{ item.step_no }} 单</text>
				<text>{{ item.order_no }}</text>
			</view>
			<view v-if="!records.length" class="empty">暂无推荐订单</view>
		</view>
		<button v-if="canCashout" class="cashout" @tap="cashout">申请提前兑现</button>
	</view>
</template>

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

export default {
	data() {
		return { id: 0, detail: {} };
	},
	computed: {
		records() {
			return this.detail.records || [];
		},
		canCashout() {
			const progress = Number(this.detail.progress_count || 0);
			return Number(this.detail.status) === 0 && progress >= 1 && progress <= 3;
		},
		progressWidth() {
			const total = Number(this.detail.target_count || 4);
			return `${Math.min(100, Number(this.detail.progress_count || 0) / total * 100)}%`;
		}
	},
	onLoad(options) {
		this.id = Number(options.id || 0);
		this.load();
	},
	methods: {
		load() {
			getSyjTaskDetail(this.id).then(res => {
				this.detail = res.data || res;
			});
		},
		cashout() {
			applySyjCashout(this.id).then(() => {
				uni.showToast({ title: '已提交审核' });
				this.load();
			});
		},
		statusText(status) {
			return ['进行中', '已完成', '提前兑现', '已关闭', '异常', '审核中'][Number(status)] || '未知';
		}
	}
};
</script>

<style scoped>
.page{min-height:100vh;background:#f6f7f9;padding:24rpx;}
.card{background:#fff;border-radius:16rpx;padding:30rpx;margin-bottom:20rpx;}
.title{font-size:30rpx;color:#222;font-weight:600;}
.status{font-size:26rpx;color:#0f8f6f;margin-top:12rpx;}
.amount{font-size:52rpx;color:#111;font-weight:600;margin:28rpx 0;}
.progress{display:flex;align-items:center;gap:20rpx;}
.bar{flex:1;height:12rpx;background:#edf0f2;border-radius:12rpx;overflow:hidden;}
.bar view{height:100%;background:#0f8f6f;}
.section-title{font-size:30rpx;font-weight:600;margin-bottom:20rpx;}
.record{display:flex;justify-content:space-between;font-size:26rpx;color:#555;padding:20rpx 0;border-bottom:1px solid #f0f0f0;}
.empty{text-align:center;color:#999;font-size:26rpx;padding:40rpx 0;}
.cashout{height:88rpx;line-height:88rpx;border-radius:44rpx;background:#0f8f6f;color:#fff;font-size:30rpx;}
</style>
