<template>
  <view class="recipe-plan">
    <image class="go_back_button" @click="go_back_to_home" src="@/static/homepages/homes/my_recipe_plan/pictures/button.png"></image>
    <view class="date">{{ currentDate }}</view>
    <text class ="today_recipe_and_calories">今日饮食和热量</text>
    <view class="divider_line"></view>
    <image class="time_line" src="@/static/homepages/homes/my_recipe_plan/pictures/time_line.png"></image>
    <view class="input_box_breakfast">
      <input
          v-model="meals[0].food"
          class="food_input"
          placeholder="请输入食物名称"
          @input="calculateCalories(0)"
      />
      <view class="calories_text">
        <text class="icon">⏱</text>
        <text>热量：{{ meals[0].calories }}J</text>
      </view>
      <view
          class="check_button"
          :class="{ active: meals[0].checked }"
          @click="toggleCheck(0)"
      >✓</view>
    </view>

    <view class="input_box_lunch">
      <input
          v-model="meals[1].food"
          class="food_input"
          placeholder="请输入食物名称"
          @input="calculateCalories(1)"
      />
      <view class="calories_text">
        <text class="icon">⏱</text>
        <text>热量：{{ meals[1].calories }}J</text>
      </view>
      <view
          class="check_button"
          :class="{ active: meals[1].checked }"
          @click="toggleCheck(1)"
      >✓</view>
    </view>

    <view class="input_box_dinner">
      <input
          v-model="meals[2].food"
          class="food_input"
          placeholder="请输入食物名称"
          @input="calculateCalories(2)"
      />
      <view class="calories_text">
        <text class="icon">⏱</text>
        <text>热量：{{ meals[2].calories }}J</text>
      </view>
      <view
          class="check_button"
          :class="{ active: meals[2].checked }"
          @click="toggleCheck(2)"
      >✓</view>
    </view>

    <view class="input_box_midnight_snack">
      <input
          v-model="meals[3].food"
          class="food_input"
          placeholder="请输入食物名称"
          @input="calculateCalories(3)"
      />
      <view class="calories_text">
        <text class="icon">⏱</text>
        <text>热量：{{ meals[3].calories }}J</text>
      </view>
      <view
          class="check_button"
          :class="{ active: meals[3].checked }"
          @click="toggleCheck(3)"
      >✓</view>
    </view>
  </view>
</template>

<script>

import { getFoodCalories } from '@/static/homepages/homes/my_recipe_plan/js/database.js'
export default {
  data() {
    return {
      meals: [
        { time: '早餐', food: '', calories: 0, dotColor: 'yellow', checked: false },
        { time: '午餐', food: '', calories: 0, dotColor: 'yellow', checked: false },
        { time: '晚餐', food: '', calories: 0, dotColor: 'red', checked: false },
        { time: '夜宵', food: '', calories: 0, dotColor: 'blue', checked: false }
      ]
    }
  },
  computed: {
    currentDate() {
      const date = new Date()
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
    }
  },
  methods: {
    go_back_to_home(){
      uni.navigateTo({
        url:"/pages/homepages/homes/home/home"
      })
    },
    calculateCalories(index) {
      // 如果输入为空，不进行计算
      if (!this.meals[index].food.trim()) {
        return
      }

      // 设置loading状态
      this.meals[index].loading = true
      this.meals[index].calories = 0

      // 延迟2秒显示结果
      setTimeout(() => {
        const calories = getFoodCalories(this.meals[index].food)
        if (calories) {
          uni.showToast({
            title: '计算食物卡路里成功！！',
            icon: 'none',
            duration: 2000
          })
          this.meals[index].calories = calories
          this.meals[index].recordTime = this.getCurrentTime()
          this.saveMealsData()

        } else {
          uni.showToast({
            title: '未找到该食物的卡路里信息',
            icon: 'none',
            duration: 2000
          })
        }
        this.meals[index].loading = false
      }, 2000)
    },
    toggleCheck(index) {
      this.meals[index].checked = !this.meals[index].checked
    }
  }
}
</script>

<style lang="scss">
.recipe-plan {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #B6D1E0;
  .go_back_button{
    position:absolute;
    width: 20%;
    height: 8%;
    left: 2%;
    top: 3%;

  }
  .date {
    position: absolute;
    width: 50%;
    height: 2%;
    left: 6%;
    top: 11%;
    font-size: 1.4em;        // 加大字体
    font-weight: 700;        // 加粗字体
    display: flex;           // 使用flex布局来居中文字
    align-items: center;     // 垂直居中
    justify-content: center; // 水平居中
    padding: 2% 0;
  }
  .today_recipe_and_calories{
    position: absolute;
    width: 75%;
    height: 4%;
    left: 6%;
    top: 16%;
    font-size: 2.5em;        // 加大字体
    font-weight: 700;        // 加粗字体
    display: flex;           // 使用flex布局来居中文字
    align-items: center;     // 垂直居中
    justify-content: center; // 水平居中
    padding: 2% 0;
  }
  .divider_line {
    position: absolute;
    width: 88%;  // 线的宽度
    height: 2px; // 线的高度
    background-color: #0c0b0b;
    left: 6%;
    top: 24%;    // 位置在today_recipe_and_calories下方
  }
  .time_line{
    position: absolute;
    width: 15%;
    height: 61%;
    top: 27%;
    left: 5%;
  }
  .input_box_breakfast{
    position: absolute;
    width: 70%;
    height: 15%;
    top: 27%;
    left: 25%;
    background-color: #ffffff;
    border-radius: 30px;

  }
  .input_box_lunch{
    position: absolute;
    width: 70%;
    height: 15%;
    top: 45%;
    left: 25%;
    background-color: #ffffff;
    border-radius: 30px;
  }
  .input_box_dinner{
    position: absolute;
    width: 70%;
    height: 15%;
    top: 63%;
    left: 25%;
    background-color: #ffffff;
    border-radius: 30px;
  }
  .input_box_midnight_snack{
    position: absolute;
    width: 70%;
    height: 15%;
    top: 81%;
    left: 25%;
    background-color: #ffffff;
    border-radius: 30px;

  }

  .input_box_breakfast,
  .input_box_lunch,
  .input_box_dinner,
  .input_box_midnight_snack {
    .food_input {
      position: absolute;
      left: 5%;
      top: 20%;
      width: 70%;
      height: 30%;
      border: none;
      font-size: 1.2em;
    }

    .calories_text {
      position: absolute;
      left: 5%;
      bottom: 20%;
      color: #666;
      font-size: 1em;

      .icon {
        margin-right: 8px;
      }
    }

    .check_button {
      position: absolute;
      right: 5%;
      top: 30%;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #e0e0e0;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s;
      &.active {
        background-color: #4285f4;  // 激活时变成蓝色
      }
    }
  }
}
</style>
