<template>
	<view class="date-range-picker">
		<view class="picker-item">
			<text class="label">开始日期</text>
			<picker mode="date" :value="startDate" @change="onStartDateChange">
				<view class="picker-value">{{ startDate || '请选择' }}</view>
			</picker>
		</view>
		<view class="picker-item">
			<text class="label">结束日期</text>
			<picker mode="date" :value="endDate" @change="onEndDateChange">
				<view class="picker-value">{{ endDate || '请选择' }}</view>
			</picker>
		</view>
		<view class="actions">
			<button class="btn apply" @click="applyRange">应用</button>
			<button class="btn clear" @click="clearRange">清空</button>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref, watch } from 'vue'

	const props = defineProps({
		initialStartDate: {
			type: String,
			default: ''
		},
		initialEndDate: {
			type: String,
			default: ''
		}
	})

	const emit = defineEmits(['apply', 'clear'])

	const startDate = ref(props.initialStartDate)
	const endDate = ref(props.initialEndDate)

	watch(() => props.initialStartDate, (val) => {
		startDate.value = val
	})

	watch(() => props.initialEndDate, (val) => {
		endDate.value = val
	})

	function onStartDateChange(e : any) {
		startDate.value = e.detail.value
	}

	function onEndDateChange(e : any) {
		endDate.value = e.detail.value
	}

	function applyRange() {
		if (startDate.value && endDate.value) {
			emit('apply', { start: startDate.value, end: endDate.value })
		} else {
			uni.showToast({ title: '请选择完整的日期范围', icon: 'none' })
		}
	}

	function clearRange() {
		startDate.value = ''
		endDate.value = ''
		emit('clear')
	}
</script>

<style scoped>
	.date-range-picker {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px;
		padding: 12px;
		background-color: #f8f9fa;
		border-radius: 8px;
	}

	.picker-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.label {
		font-size: 14px;
		color: #666;
	}

	.picker-value {
		padding: 8px 12px;
		background-color: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		font-size: 14px;
		color: #333;
	}

	.actions {
		display: flex;
		gap: 8px;
	}

	.btn {
		padding: 8px 16px;
		font-size: 14px;
		border-radius: 4px;
		border: none;
		cursor: pointer;
	}

	.btn.apply {
		background-color: #007bff;
		color: #fff;
	}

	.btn.clear {
		background-color: #6c757d;
		color: #fff;
	}
</style>
