<template>
	<view class="demo-page">
		<view class="demo-section">
			<view class="section-title">基础日期选择</view>
			<neo-datetime-pro
				v-model="date1"
				placeholder="请选择日期"
				@change="handleChange('基础日期', $event)"
			/>
			<view class="result">选中值: {{ date1 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">日期范围选择</view>
			<neo-datetime-pro
				v-model="dateRange"
				type="daterange"
				placeholder="请选择日期范围"
				:shortcuts="shortcuts"
				@change="handleChange('日期范围', $event)"
			/>
			<view class="result">选中值: {{ dateRange.length ? dateRange.join(' ~ ') : '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">日期时间选择</view>
			<neo-datetime-pro
				v-model="datetime"
				type="datetime"
				format="YYYY-MM-DD HH:mm:ss"
				placeholder="请选择日期时间"
				@change="handleChange('日期时间', $event)"
			/>
			<view class="result">选中值: {{ datetime || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">时间选择（时分秒）</view>
			<neo-datetime-pro
				v-model="time"
				type="time"
				format="HH:mm:ss"
				placeholder="请选择时间"
				@change="handleChange('时间', $event)"
			/>
			<view class="result">选中值: {{ time || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">时间选择（时分）</view>
			<neo-datetime-pro
				v-model="time2"
				type="time"
				format="HH:mm"
				placeholder="请选择时间（时分）"
				@change="handleChange('时分', $event)"
			/>
			<view class="result">选中值: {{ time2 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">时间选择（仅小时）</view>
			<neo-datetime-pro
				v-model="time3"
				type="time"
				format="HH"
				placeholder="请选择小时"
				@change="handleChange('小时', $event)"
			/>
			<view class="result">选中值: {{ time3 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">禁用过去的日期</view>
			<neo-datetime-pro
				v-model="date2"
				:disabled-date="disablePastDates"
				placeholder="只能选择今天及以后"
				@change="handleChange('禁用过去日期', $event)"
			/>
			<view class="result">选中值: {{ date2 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">禁用周末</view>
			<neo-datetime-pro
				v-model="date3"
				:disabled-date="disableWeekends"
				placeholder="周末不可选"
				@change="handleChange('禁用周末', $event)"
			/>
			<view class="result">选中值: {{ date3 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">最小/最大日期限制</view>
			<neo-datetime-pro
				v-model="date4"
				:min-date="minDate"
				:max-date="maxDate"
				placeholder="2025年范围"
				@change="handleChange('日期限制', $event)"
			/>
			<view class="result">选中值: {{ date4 || '未选择' }}</view>
			<view class="tip">限制范围: 2025-01-01 ~ 2025-12-31</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">显示周序号</view>
			<neo-datetime-pro
				v-model="date5"
				:show-week-number="true"
				placeholder="显示周序号"
				@change="handleChange('周序号', $event)"
			/>
			<view class="result">选中值: {{ date5 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">周一作为一周开始</view>
			<neo-datetime-pro
				v-model="date6"
				:start-of-week="1"
				placeholder="周一开始"
				@change="handleChange('周一开始', $event)"
			/>
			<view class="result">选中值: {{ date6 || '未选择' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">英文版</view>
			<neo-datetime-pro
				v-model="date7"
				locale="en"
				placeholder="Select Date"
				@change="handleChange('English', $event)"
			/>
			<view class="result">Selected: {{ date7 || 'None' }}</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">禁用和只读</view>
			<view class="demo-row">
				<view class="demo-col">
					<text class="demo-label">禁用</text>
					<neo-datetime-pro
						v-model="date8"
						disabled
						placeholder="禁用状态"
					/>
				</view>
				<view class="demo-col">
					<text class="demo-label">只读</text>
					<neo-datetime-pro
						v-model="date9"
						readonly
						placeholder="只读状态"
					/>
				</view>
			</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">不可清空</view>
			<neo-datetime-pro
				v-model="date10"
				:clearable="false"
				placeholder="不显示清空按钮"
				@change="handleChange('不可清空', $event)"
			/>
			<view class="result">选中值: {{ date10 || '未选择' }}</view>
		</view>
		
		<view class="footer">
			<text class="footer-text">neo-datetime-pro 日期时间选择器</text>
		</view>
	</view>
</template>

<script>
import NeoDatetimePro from './components/neo-datetime-pro/neo-datetime-pro.vue'

export default {
	components: {
		NeoDatetimePro
	},
	data() {
		return {
			date1: '',
			date2: '',
			date3: '',
			date4: '',
			date5: '',
			date6: '',
			date7: '',
			date8: '2025-10-30',
			date9: '2025-10-30',
			date10: '',
			dateRange: [],
			datetime: '',
			time: '',
			time2: '',
			time3: '',
			minDate: '2025-01-01',
			maxDate: '2025-12-31',
			shortcuts: [
				{ text: '今天', value: 'today' },
				{ text: '昨天', value: 'yesterday' },
				{ text: '最近7天', value: 'last7days' },
				{ text: '最近30天', value: 'last30days' },
				{ text: '本周', value: 'thisweek' },
				{ text: '本月', value: 'thismonth' }
			]
		}
	},
	methods: {
		handleChange(label, value) {
			console.log(`${label} 选择:`, value)
		},
		disablePastDates(date) {
			const today = new Date()
			today.setHours(0, 0, 0, 0)
			return date < today
		},
		disableWeekends(date) {
			const day = date.getDay()
			return day === 0 || day === 6 // 0=周日, 6=周六
		}
	}
}
</script>

<style scoped>
.demo-page {
	min-height: 100vh;
	background: var(--neo-color-bg-base, #f5f7fa);
	padding: 24rpx;
}

.demo-section {
	background: var(--neo-color-bg-elevated, #fff);
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--neo-color-text-primary, #1e293b);
	margin-bottom: 24rpx;
}

.result {
	margin-top: 16rpx;
	padding: 16rpx;
	background: var(--neo-color-bg-base, #f5f7fa);
	border-radius: 8rpx;
	font-size: 24rpx;
	color: var(--neo-color-text-secondary, #64748b);
	word-break: break-all;
}

.tip {
	margin-top: 12rpx;
	font-size: 24rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
}

.demo-row {
	display: flex;
	gap: 24rpx;
}

.demo-col {
	flex: 1;
}

.demo-label {
	display: block;
	font-size: 24rpx;
	color: var(--neo-color-text-secondary, #64748b);
	margin-bottom: 12rpx;
}

.footer {
	padding: 48rpx 0;
	text-align: center;
}

.footer-text {
	font-size: 24rpx;
	color: var(--neo-color-text-tertiary, #94a3b8);
}
</style>

