<template>
	<view v-if="show" class="dialog-mask" @tap="handleMaskClick">
		<view class="dialog-container" :class="{ 'dialog-show': showAnimation }" @tap.stop>
			<view class="dialog-handle"></view>
			<view class="dialog-header">
				<text class="dialog-title">{{ title }}</text>
				<view class="dialog-close" @tap="close">×</view>
			</view>
			
			<view class="dialog-body">
				<view class="form-row">
					<picker class="picker-card" mode="date" :value="formData.smoke_time" @change="onDateChange">
						<view class="input-card">
							<text class="input-label">日期</text>
							<view class="input-value-row">
								<view class="input-icon input-icon-date"></view>
								<text class="input-value">{{ formData.smoke_time || '选择日期' }}</text>
							</view>
						</view>
					</picker>
					<picker class="picker-card" mode="time" :value="formData.smoke_time_only" @change="onTimeChange">
						<view class="input-card">
							<text class="input-label">时间</text>
							<view class="input-value-row">
								<view class="input-icon input-icon-time"></view>
								<text class="input-value">{{ formData.smoke_time_only || '选择时间' }}</text>
							</view>
						</view>
					</picker>
				</view>
				
				<view class="section-card" v-if="type === 'smoke'">
					<view class="section-left">
						<view class="section-icon"></view>
						<text class="section-title">抽烟数量</text>
					</view>
					<view class="counter">
						<view class="counter-btn" @tap="decreaseNum">-</view>
						<text class="counter-value">{{ formData.num }}</text>
						<view class="counter-btn" @tap="increaseNum">+</view>
					</view>
				</view>
				
				<view class="section-card" v-if="type === 'smoke'">
					<view class="level-header">
						<text class="section-title">烟瘾程度</text>
						<view class="level-badge">Level {{ formData.level }}</view>
					</view>
					<slider
						class="level-slider"
						:value="formData.level"
						:min="1"
						:max="5"
						:step="1"
						activeColor="#22C55E"
						backgroundColor="#E5E7EB"
						block-color="#22C55E"
						:block-size="20"
						@change="onLevelChange"
					/>
					<view class="level-scale">
						<text class="level-scale-text">无感</text>
						<text class="level-scale-text">强烈</text>
					</view>
				</view>
				
				<view class="remark-section">
					<text class="section-title">备注（可选）</text>
					<view class="remark-card">
						<textarea 
							class="form-textarea" 
							v-model="formData.remark"
							:placeholder="type === 'smoke' ? '记录此时的心情或诱因，如压力大、应酬...' : '记录抵抗心得或诱因...'"
							maxlength="200"
						/>
					</view>
				</view>
			</view>
			
			<view class="dialog-footer">
				<view class="dialog-btn-primary" @tap="submit">
					<view class="btn-icon"></view>
					<text class="btn-text">保存记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'SmokeRecordDialog',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		type: {
			type: String,
			default: 'smoke' // 'smoke' 或 'resisted'
		},
		initialData: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			showAnimation: false,
			formData: {
				smoke_time: '',
				smoke_time_only: '',
				smoke_at: '',
				remark: '',
				level: 2,
				num: 1
			}
		}
	},
	computed: {
		title() {
			return '添加记录'
		}
	},
	watch: {
		show(newVal) {
			if (newVal) {
				this.initFormData()
				setTimeout(() => {
					this.showAnimation = true
				}, 50)
			} else {
				this.showAnimation = false
			}
		}
	},
	methods: {
		initFormData() {
			// 如果有初始数据（编辑模式），使用初始数据
			if (this.initialData) {
				this.formData = {
					smoke_time: this.initialData.smoke_time || '',
					smoke_time_only: this.initialData.smoke_time_only || '',
					smoke_at: this.initialData.smoke_at || '',
					remark: this.initialData.remark || '',
					level: this.initialData.level ?? 2,
					num: this.initialData.num ?? 1
				}
			} else {
				// 新建模式，使用当前时间
				const now = new Date()
				const dateStr = now.toISOString().split('T')[0]
				const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
				const datetimeStr = `${dateStr} ${timeStr}:00`
				
				this.formData = {
					smoke_time: dateStr,
					smoke_time_only: timeStr,
					smoke_at: datetimeStr,
					remark: '',
					level: 2,
					num: this.type === 'smoke' ? 1 : 0
				}
			}
		},
		handleMaskClick() {
			this.close()
		},
		close() {
			this.showAnimation = false
			setTimeout(() => {
				this.$emit('update:show', false)
			}, 300)
		},
		onDateChange(e) {
			this.formData.smoke_time = e.detail.value
			this.updateSmokeAt()
		},
		onTimeChange(e) {
			this.formData.smoke_time_only = e.detail.value
			this.updateSmokeAt()
		},
		updateSmokeAt() {
			this.formData.smoke_at = `${this.formData.smoke_time} ${this.formData.smoke_time_only}:00`
		},
		decreaseNum() {
			if (this.formData.num > 1) {
				this.formData.num--
			}
		},
		increaseNum() {
			this.formData.num++
		},
		onLevelChange(e) {
			this.formData.level = e.detail.value
		},
		isTimeValid() {
			const dateStr = this.formData.smoke_time
			const timeStr = this.formData.smoke_time_only

			if (!dateStr || !timeStr) {
				uni.showToast({ title: '请选择日期和时间', icon: 'none' })
				return false
			}

			const selected = new Date(`${dateStr}T${timeStr}:00`)
			if (isNaN(selected.getTime())) {
				uni.showToast({ title: '时间格式有误', icon: 'none' })
				return false
			}

			const now = new Date()
			const maxTime = new Date(now.getTime() + 5 * 60 * 1000)
			if (selected > maxTime) {
				uni.showToast({ title: '时间不能超过当前时间5分钟', icon: 'none' })
				return false
			}

			return true
		},
		submit() {
			if (!this.isTimeValid()) {
				return
			}

			const submitData = {
				smoke_time: this.formData.smoke_time,
				smoke_at: this.formData.smoke_at,
				remark: this.formData.remark,
				level: this.type === 'smoke' ? this.formData.level : 0,
				num: this.type === 'smoke' ? this.formData.num : 0
			}
			
			this.$emit('submit', submitData)
			this.close()
		}
	}
}
</script>

<style scoped>
.dialog-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.35);
	z-index: 9999;
	display: flex;
	align-items: flex-end;
}

.dialog-container {
	width: 100%;
	max-height: 85vh;
	background-color: #FFFFFF;
	border-radius: 36rpx 36rpx 0 0;
	overflow: hidden;
	transform: translateY(100%);
	transition: transform 0.3s ease-out;
	padding-bottom: 16rpx;
}

.dialog-show {
	transform: translateY(0);
}

.dialog-handle {
	width: 80rpx;
	height: 8rpx;
	background-color: #E5E7EB;
	border-radius: 999rpx;
	margin: 16rpx auto 0;
}

.dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 32rpx 16rpx;
}

.dialog-title {
	font-size: 40rpx;
	font-weight: 700;
	color: #111827;
}

.dialog-close {
	width: 56rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 44rpx;
	color: #9CA3AF;
	line-height: 1;
	background-color: #F3F4F6;
	border-radius: 50%;
}

.dialog-body {
	padding: 16rpx 32rpx 24rpx;
	max-height: 62vh;
	overflow-y: auto;
}

.form-row {
	display: flex;
	gap: 20rpx;
	margin-bottom: 24rpx;
}

.picker-card {
	flex: 1;
}

.input-card {
	background-color: #F9FAFB;
	border-radius: 24rpx;
	padding: 20rpx 24rpx;
	border: 2rpx solid #F3F4F6;
	min-height: 120rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.input-label {
	font-size: 22rpx;
	color: #9CA3AF;
	margin-bottom: 12rpx;
	font-weight: 500;
}

.input-value-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.input-icon {
	width: 32rpx;
	height: 32rpx;
	border-radius: 8rpx;
	background-color: #DCFCE7;
	position: relative;
}

.input-icon-date::after {
	content: '';
	position: absolute;
	left: 6rpx;
	top: 8rpx;
	width: 20rpx;
	height: 16rpx;
	border: 2rpx solid #22C55E;
	border-top-width: 6rpx;
	border-radius: 4rpx;
}

.input-icon-time::after {
	content: '';
	position: absolute;
	left: 8rpx;
	top: 8rpx;
	width: 16rpx;
	height: 16rpx;
	border: 2rpx solid #22C55E;
	border-radius: 50%;
}

.input-icon-time::before {
	content: '';
	position: absolute;
	left: 16rpx;
	top: 12rpx;
	width: 2rpx;
	height: 8rpx;
	background-color: #22C55E;
	transform-origin: bottom;
}

.input-value {
	font-size: 30rpx;
	font-weight: 600;
	color: #111827;
}

.section-card {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 24rpx;
	border: 2rpx solid #F3F4F6;
	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
	margin-bottom: 24rpx;
}

.section-left {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.section-icon {
	width: 64rpx;
	height: 64rpx;
	background-color: #DCFCE7;
	border-radius: 16rpx;
	position: relative;
}

.section-icon::after {
	content: '';
	position: absolute;
	left: 18rpx;
	top: 18rpx;
	width: 28rpx;
	height: 28rpx;
	border-radius: 6rpx;
	border: 3rpx solid #22C55E;
	border-top-color: transparent;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #111827;
}

.counter {
	display: flex;
	align-items: center;
	gap: 20rpx;
	background-color: #F8FAFC;
	padding: 12rpx 16rpx;
	border-radius: 999rpx;
	border: 2rpx solid #F1F5F9;
	margin-top: 16rpx;
	justify-content: flex-end;
}

.counter-btn {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background-color: #E8FFF1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	color: #22C55E;
	font-weight: 600;
}

.counter-value {
	min-width: 40rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 700;
	color: #111827;
}

.level-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.level-badge {
	padding: 8rpx 18rpx;
	border-radius: 999rpx;
	background-color: #DCFCE7;
	color: #22C55E;
	font-size: 24rpx;
	font-weight: 600;
}

.level-slider {
	margin: 8rpx 0 4rpx;
}

.level-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 8rpx;
}

.level-scale-text {
	font-size: 22rpx;
	color: #9CA3AF;
}

.remark-section {
	margin-bottom: 24rpx;
}

.remark-card {
	margin-top: 16rpx;
	background-color: #F9FAFB;
	border-radius: 20rpx;
	padding: 8rpx;
	border: 2rpx solid #F3F4F6;
}

.form-textarea {
	width: 100%;
	min-height: 180rpx;
	background-color: #F9FAFB;
	border-radius: 16rpx;
	padding: 24rpx 20rpx;
	font-size: 28rpx;
	color: #111827;
	border: 2rpx solid transparent;
	box-sizing: border-box;
}

.dialog-footer {
	padding: 16rpx 32rpx 32rpx;
}

.dialog-btn-primary {
	height: 96rpx;
	border-radius: 32rpx;
	background-color: #22C55E;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	box-shadow: 0 10rpx 24rpx rgba(34, 197, 94, 0.3);
}

.btn-icon {
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	background-color: #0F172A;
	position: relative;
}

.btn-icon::before {
	content: '';
	position: absolute;
	left: 14rpx;
	top: 18rpx;
	width: 12rpx;
	height: 6rpx;
	border-left: 4rpx solid #FFFFFF;
	border-bottom: 4rpx solid #FFFFFF;
	transform: rotate(-45deg);
}

.btn-text {
	font-size: 30rpx;
	font-weight: 600;
	color: #0F172A;
}
</style>
