<template>
	<view class="container">
		<view class="header">
			<view class="title">{{ pageTitle }}</view>
		</view>
		<scroll-view class="list" scroll-y="true">
			<view v-if="historyList.length === 0" class="empty">
				<text>暂无历史视频</text>
			</view>
			<view v-else>
				<view class="item" v-for="(item, index) in historyList" :key="index">
					<view class="item-info">
						<text class="item-title">{{ itemTitle(item) }}</text>
						<text class="item-date">{{ formatDate(item.created_at) }}</text>
					</view>
					<video v-if="item.video_url" class="video" :src="item.video_url" controls></video>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { baseURLPy } from '@/utils/request.js'

export default {
	data() {
		return {
			type: 'sing',
			historyList: []
		}
	},
	computed: {
		pageTitle() {
			return this.type === 'dance' ? '跳舞历史视频' : '唱歌历史视频';
		}
	},
	onLoad(options) {
		if (options && options.type) {
			this.type = options.type;
		}
	},
	onShow() {
		this.fetchHistory();
	},
	methods: {
		fetchHistory() {
			const endpoint = this.type === 'dance' ? 'dance/history' : 'sing/history';
			uni.request({
				url: baseURLPy + '/' + endpoint,
				method: 'GET',
				header: {
					'Authorization': 'Bearer ' + uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.data && res.data.code === 1 && res.data.data) {
						this.historyList = res.data.data;
					}
				},
				fail: () => {}
			});
		},
		itemTitle(item) {
			if (this.type === 'dance') {
				return item.prompt || '跳舞视频';
			}
			return item.song_title || '唱歌视频';
		},
		formatDate(dateStr) {
			if (!dateStr) return '';
			const date = new Date(dateStr);
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			return `${month}-${day} ${hour}:${minute}`;
		}
	}
}
</script>

<style scoped>
.container {
	flex: 1;
	background: #0b0f1a;
	padding: 24rpx;
	box-sizing: border-box;
}
.header {
	padding: 12rpx 0 24rpx;
}
.title {
	font-size: 34rpx;
	color: #ffffff;
	font-weight: 600;
}
.list {
	height: calc(100vh - 120rpx);
}
.empty {
	padding: 40rpx 0;
	text-align: center;
	color: rgba(255,255,255,0.7);
}
.item {
	margin-bottom: 24rpx;
	padding: 18rpx;
	background: rgba(255,255,255,0.06);
	border-radius: 16rpx;
}
.item-info {
	display: flex;
	flex-direction: column;
	margin-bottom: 12rpx;
}
.item-title {
	color: #ffffff;
	font-size: 28rpx;
	margin-bottom: 6rpx;
}
.item-date {
	color: rgba(255,255,255,0.6);
	font-size: 22rpx;
}
.video {
	width: 100%;
	border-radius: 12rpx;
}
</style>
