<template>
  <div class="events-calendar-page">
    <customDefaultPage>
      <template #content>
        <main class="p-[35px] max-w-[1800px] mx-auto">
          <div class="title mb-[20px]">
            {{ t('events_calendar.title') }}
          </div>
          <div class="search-container">
            <n-date-picker
              v-model:value="state.selectedDateValue"
              type="date"
              class="search-date-picker"
            ></n-date-picker>
            <n-button
              type="primary"
              @click="handleSearch"
              class="search-button"
            >
              {{ t('events_calendar.search.button') }}
            </n-button>
          </div>
        </main>
      </template>
    </customDefaultPage>
  </div>
</template>

<script setup>
import customDefaultPage from '@/components/customDefaultPage/index.vue'
import { reactive } from 'vue'
import { NDatePicker, NButton } from 'naive-ui'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const state = reactive({
  selectedDateValue: null, //选中值
})

const handleSearch = () => {
  // 搜索处理逻辑
  console.log('搜索:', state.selectedDateValue)
}
</script>

<style scoped lang="scss">
.title {
  font-size: 113px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 8px;
}

.search-container {
  margin-bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f6f7f9;
  border-radius: 8px;
  padding: 8px;
  gap: 16px;
}

.search-date-picker {
  width: 100%;
}

:deep(.n-date-picker) {
  width: 100%;
  .n-input__input {
    padding: 4px 0;
    border-radius: 4px;
  }
}

:deep(.n-button) {
  width: 260px;
  padding: 20px 16px;
  border-radius: 4px;
}
</style>
