<template>
  <div class="time-picker">
    <div class="time-unit" v-for="(unit, index) in timeUnits" :key="index">
      <label :for="unit.name">{{ unit.label }}</label>
      <select v-model="timeValues[unit.name]" :id="unit.name">
        <option v-for="option in unit.options" :key="option" :value="option">
          {{ option }}
        </option>
      </select>
    </div>
    <button @click="submitTime">设置提醒</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValues: {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0,
      },
      timeUnits: [
        {
          name: "days",
          label: "天",
          options: Array.from({ length: 31 }, (_, i) => i),
        },
        {
          name: "hours",
          label: "小时",
          options: Array.from({ length: 24 }, (_, i) => i),
        },
        {
          name: "minutes",
          label: "分钟",
          options: Array.from({ length: 60 }, (_, i) => i),
        },
        {
          name: "seconds",
          label: "秒",
          options: Array.from({ length: 60 }, (_, i) => i),
        },
      ],
    };
  },
  methods: {
    submitTime() {
      const { days, hours, minutes, seconds } = this.timeValues;
      const totalMilliseconds =
        ((days * 24 + hours) * 60 + minutes) * 60 * 1000 + seconds * 1000;
      alert(`提醒时间设置为 ${totalMilliseconds} 毫秒`);
    },
  },
};
</script>

<style scoped>
.time-picker {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.time-unit {
  display: flex;
  flex-direction: column;
}

label {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

select {
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

select:focus {
  border-color: #007bff;
  outline: none;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
</style>
