<template>
	<view class="fe-bottom-sheet" :class="{ 'fe-bottom-sheet--active': active }">
		<view class="fe-sheet-handle" />
		<view class="fe-sheet-header">
			<view class="fe-sheet-title">📊 今日汇报</view>
		</view>
		<view class="fe-sheet-source">{{ report.date }} · AI 自动汇总</view>
		<scroll-view scroll-y class="fe-sheet-body" :show-scrollbar="false">
			<view class="fe-sheet-body__inner">
				<view
					v-for="(item, i) in report.items"
					:key="i"
					class="fe-report-item"
					:class="'fe-report-item--' + item.status"
				>
					<view class="fe-report-item__index">{{ i + 1 }}</view>
					<view class="fe-report-item__body">
						<view class="fe-report-item__title">{{ item.title }}</view>
						<view v-if="item.desc" class="fe-report-item__desc">{{ item.desc }}</view>
					</view>
					<text class="fe-report-item__val" :class="{ 'fe-report-item__val--danger': item.status === 'danger' }">
						{{ item.value }}
					</text>
				</view>
			</view>
		</scroll-view>
		<view class="fe-sheet-footer">
			<view class="fe-btn fe-btn--primary fe-btn--lg fe-btn--full" @tap="toast('已发送催办')">一键催办</view>
		</view>
	</view>
</template>

<script>
import { DAILY_REPORT, showToast } from '@/common/chat-data.js'

export default {
	name: 'FeReportSheet',
	props: {
		active: { type: Boolean, default: false }
	},
	data() {
		return { report: DAILY_REPORT }
	},
	methods: {
		toast: showToast
	}
}
</script>

<style lang="scss" scoped>
.fe-report-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
	background: #F8FAFC;
	border-radius: $fe-radius-md;
	border-left: 6rpx solid $fe-primary;
}

.fe-report-item--danger {
	border-left-color: $fe-danger;
	background: #FEF2F2;
}

.fe-report-item--pending {
	border-left-color: $fe-warning;
}

.fe-report-item__index {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	background: $fe-primary;
	color: #fff;
	font-size: 24rpx;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fe-report-item--danger .fe-report-item__index {
	background: $fe-danger;
}

.fe-report-item--pending .fe-report-item__index {
	background: $fe-warning;
}

.fe-report-item__body {
	flex: 1;
	min-width: 0;
}

.fe-report-item__title {
	font-size: 28rpx;
	font-weight: 600;
	color: $fe-foreground;
}

.fe-report-item__desc {
	font-size: 24rpx;
	color: $fe-muted;
	margin-top: 6rpx;
}

.fe-report-item__val {
	font-size: 26rpx;
	font-weight: 600;
	color: $fe-foreground;
	flex-shrink: 0;
	text-align: right;
}

.fe-report-item__val--danger {
	color: $fe-danger;
}
</style>
