王明 / Food-Labeling-Management-Platform

<template>
  <view class="app-date-picker">
    <view class="app-date-trigger" @click="openDialog">
      <text class="app-date-trigger-text">{{ displayText }}</text>
    </view>

    <view v-if="dialogVisible" class="app-date-mask" @click="cancelDialog">
      <view class="app-date-dialog" @click.stop>
        <text class="app-date-dialog-title">{{ dialogTitle }}</text>
        <picker-view
          class="app-date-picker-view"
          :indicator-style="indicatorStyle"
          :value="selection"
          @change="onPickerChange"
        >
          <picker-view-column>
            <view v-for="y in years" :key="'y-' + y" class="app-date-picker-item">{{ y }}</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="(m, idx) in monthLabels" :key="'m-' + idx" class="app-date-picker-item">{{ m }}</view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="d in daysInMonth" :key="'d-' + d" class="app-date-picker-item">{{ d }}</view>
          </picker-view-column>
        </picker-view>
        <view class="app-date-actions">
          <view class="app-date-btn app-date-btn-cancel" @click="cancelDialog">
            <text>Cancel</text>
          </view>
          <view class="app-date-btn app-date-btn-confirm" @click="confirmDialog">
            <text>Confirm</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const MONTH_LABELS = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
] as const

const props = withDefaults(
  defineProps<{
    modelValue: string
    /** yyyy-MM-dd */
    min?: string
    max?: string
    placeholder?: string
    dialogTitle?: string
  }>(),
  {
    modelValue: '',
    min: '2000-01-01',
    max: '2099-12-31',
    placeholder: 'Select',
    dialogTitle: 'Select date',
  },
)

const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()

const dialogVisible = ref(false)
const selection = ref<[number, number, number]>([0, 0, 0])
const draftY = ref(2026)
const draftM = ref(1)
const draftD = ref(1)

const indicatorStyle = 'height: 44px;'

const years = computed(() => {
  const minY = parseYmd(props.min).year
  const maxY = parseYmd(props.max).year
  const out: number[] = []
  for (let y = minY; y <= maxY; y++) out.push(y)
  return out.length ? out : [new Date().getFullYear()]
})

const monthLabels = MONTH_LABELS

const daysInMonth = computed(() => {
  const max = daysInMonthCount(draftY.value, draftM.value)
  return Array.from({ length: max }, (_, i) => String(i + 1).padStart(2, '0'))
})

const displayText = computed(() => {
  const v = (props.modelValue || '').trim()
  if (!v) return props.placeholder
  const p = parseYmd(v)
  if (!p.valid) return v
  return `${String(p.month).padStart(2, '0')}/${String(p.day).padStart(2, '0')}/${p.year}`
})

function parseYmd(raw: string | undefined): { year: number; month: number; day: number; valid: boolean } {
  const s = (raw || '').trim()
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s)
  if (!m) {
    const d = new Date()
    return { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate(), valid: false }
  }
  return {
    year: Number(m[1]),
    month: Number(m[2]),
    day: Number(m[3]),
    valid: true,
  }
}

function daysInMonthCount(year: number, month: number): number {
  return new Date(year, month, 0).getDate()
}

function clampDate(y: number, mo: number, d: number): { y: number; mo: number; d: number } {
  const minP = parseYmd(props.min)
  const maxP = parseYmd(props.max)
  let year = y
  let month = mo
  let day = d
  const maxDay = daysInMonthCount(year, month)
  if (day > maxDay) day = maxDay

  const cur = new Date(year, month - 1, day)
  const minD = new Date(minP.year, minP.month - 1, minP.day)
  const maxD = new Date(maxP.year, maxP.month - 1, maxP.day)
  let clamped = cur
  if (cur < minD) clamped = minD
  if (cur > maxD) clamped = maxD

  return {
    y: clamped.getFullYear(),
    mo: clamped.getMonth() + 1,
    d: clamped.getDate(),
  }
}

function toYmd(y: number, mo: number, d: number): string {
  return `${y}-${String(mo).padStart(2, '0')}-${String(d).padStart(2, '0')}`
}

function syncSelectionFromDate(y: number, mo: number, d: number) {
  const yi = Math.max(0, years.value.indexOf(y))
  const mi = Math.max(0, Math.min(11, mo - 1))
  const maxD = daysInMonthCount(y, mo)
  const day = Math.min(d, maxD)
  const di = Math.max(0, day - 1)
  draftY.value = y
  draftM.value = mo
  draftD.value = day
  selection.value = [yi, mi, di]
}

function openDialog() {
  const base = parseYmd(props.modelValue)
  const clamped = clampDate(base.year, base.month, base.day)
  syncSelectionFromDate(clamped.y, clamped.mo, clamped.d)
  dialogVisible.value = true
}

function onPickerChange(e: { detail: { value: number[] } }) {
  const arr = e.detail.value || [0, 0, 0]
  const y = years.value[arr[0]] ?? draftY.value
  const mo = (arr[1] ?? 0) + 1
  let d = (arr[2] ?? 0) + 1
  const clamped = clampDate(y, mo, d)
  syncSelectionFromDate(clamped.y, clamped.mo, clamped.d)
}

function cancelDialog() {
  dialogVisible.value = false
}

function confirmDialog() {
  const v = toYmd(draftY.value, draftM.value, draftD.value)
  emit('update:modelValue', v)
  dialogVisible.value = false
}

watch(
  () => props.modelValue,
  (v) => {
    if (dialogVisible.value) return
    const p = parseYmd(v)
    if (p.valid) {
      const c = clampDate(p.year, p.month, p.day)
      draftY.value = c.y
      draftM.value = c.mo
      draftD.value = c.d
    }
  },
)
</script>

<style scoped>
.app-date-trigger {
  height: 72rpx;
  padding: 0 24rpx;
  background: #fff;
  border: 2rpx solid #e5e7eb;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.app-date-trigger-text {
  font-size: 28rpx;
  color: #111827;
}

.app-date-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.app-date-dialog {
  width: 100%;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 28rpx 32rpx calc(28rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.app-date-dialog-title {
  display: block;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16rpx;
}

.app-date-picker-view {
  width: 100%;
  height: 440rpx;
}

.app-date-picker-item {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 30rpx;
  color: #111827;
}

.app-date-actions {
  display: flex;
  gap: 24rpx;
  margin-top: 20rpx;
}

.app-date-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: 600;
}

.app-date-btn-cancel {
  border: 2rpx solid #d1d5db;
  color: #374151;
  background: #fff;
}

.app-date-btn-confirm {
  background: var(--theme-primary, #4f46e5);
  color: #fff;
}
</style>