<template>
  <div class="container">
    <div class="header">
      <el-button @click="goBack" type="primary" plain class="back-btn">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <span class="title">平衡膳食</span>
    </div>

    <el-card class="content-card">
      <div class="card-title">基本信息</div>
      <el-row class="form-row">
        <el-col :span="1">
          <div class="label">性别：</div>
        </el-col>
        <el-col :span="2">
          <span>女</span>
        </el-col>
        <el-col :span="1">
          <div class="label">年龄：</div>
        </el-col>
        <el-col :span="2">
          <div class="value">44岁3月</div>
        </el-col>
        <el-col :span="1">
          <div class="label required">身高：</div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="form.height" class="with-unit">
            <template #append>cm</template>
          </el-input>
        </el-col>
        <el-col :span="1" style="margin-left: 20px">
          <div class="label required">体重：</div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="form.weight" class="with-unit">
            <template #append>kg</template>
          </el-input>
        </el-col>
      </el-row>

      <el-row :gutter="20" class="form-row">
        <el-col :span="2">
          <div class="label">禁忌食材：</div>
        </el-col>
        <el-col :span="12">
          <div class="forbidden-food-select" @click="openFoodDialog">
            <div class="selected-foods" v-if="form.forbiddenFoods?.length">
              <el-tag v-for="food in form.forbiddenFoods" :key="food.id" closable size="small" @close="removeFood(food)">
                {{ food.name }}
              </el-tag>
            </div>
            <div class="placeholder" v-else>请选择</div>
            <el-icon class="select-icon"><ArrowDown /></el-icon>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="content-card">
      <div class="card-title">热量计算</div>
      <el-row class="form-row">
        <el-col :span="2">
          <div class="label">理想体重：</div>
        </el-col>
        <el-col :span="2">
          <div class="value">60kg</div>
        </el-col>
        <el-col :span="1" style="margin-left: 20px">
          <div class="label">BMI：</div>
        </el-col>
        <el-col :span="2">
          <div class="value">20.20</div>
        </el-col>
        <el-col :span="3" style="margin-left: 20px">
          <div class="label required">每日所需能量：</div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="form.dailyEnergy" class="with-unit">
            <template #append>kcal/d</template>
          </el-input>
        </el-col>
        <el-col :span="1">
          <el-tooltip class="box-item" effect="dark" content="这里是提示信息" placement="top">
            <el-icon class="info-icon"><QuestionFilled /></el-icon>
          </el-tooltip>
        </el-col>
        <el-col :span="4">
          <el-tag type="success" class="status-tag">营养状况：正常</el-tag>
        </el-col>
      </el-row>

      <el-row class="form-row">
        <el-col :span="2">
          <div class="label">体力活动：</div>
        </el-col>
        <el-col :span="22">
          <el-radio-group :model-value="form.activity">
            <el-radio label="1" @click="(e) => onActivityLevelChange('1', e)">
              <el-icon><CircleCheck /></el-icon>
              静态活动
            </el-radio>
            <el-radio label="2" @click="(e) => onActivityLevelChange('2', e)">
              <el-icon><CircleCheck /></el-icon>
              轻体力活动
            </el-radio>
            <el-radio label="3" @click="(e) => onActivityLevelChange('3', e)">
              <el-icon><CircleCheck /></el-icon>
              中体力活动
            </el-radio>
            <el-radio label="4" @click="(e) => onActivityLevelChange('4', e)">
              <el-icon><CircleCheck /></el-icon>
              重体力活动
            </el-radio>
          </el-radio-group>
        </el-col>
      </el-row>

      <el-row class="form-row">
        <el-col :span="2">
          <div class="label required">应激状态：</div>
        </el-col>
        <el-col :span="4">
          <el-select v-model="form.stressState" placeholder="请选择">
            <el-option label="低度应激" value="low" />
          </el-select>
        </el-col>
        <el-col :span="2" style="margin-left: 20px">
          <div class="label">基础代谢：</div>
        </el-col>
        <el-col :span="4">
          <div class="value">897.30kcal/d</div>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="content-card">
      <div class="card-title">比例设置</div>
      <div class="ratio-section">
        <div class="ratio-row">
          <div class="ratio-item">
            <div class="label">早餐：</div>
            <el-input v-model="form.breakfast" class="ratio-input">
              <template #append>%</template>
            </el-input>
          </div>
          <div class="ratio-item">
            <div class="label">中餐：</div>
            <el-input v-model="form.lunch" class="ratio-input">
              <template #append>%</template>
            </el-input>
          </div>
          <div class="ratio-item">
            <div class="label">晚餐：</div>
            <el-input v-model="form.dinner" class="ratio-input">
              <template #append>%</template>
            </el-input>
          </div>
        </div>

        <div class="ratio-row">
          <div class="ratio-item">
            <div class="label">碳水化合物：</div>
            <el-input v-model="form.carbs" class="ratio-input">
              <template #append>%</template>
            </el-input>
          </div>
          <div class="ratio-item">
            <div class="label">蛋白质：</div>
            <el-input v-model="form.protein" class="ratio-input">
              <template #append>%</template>
            </el-input>
          </div>
          <div class="ratio-item">
            <div class="label">脂肪：</div>
            <el-input v-model="form.fat" class="ratio-input">
              <template #append>%</template>
            </el-input>
          </div>
        </div>
      </div>
    </el-card>

    <div class="bottom-btn-card">
      <div class="btn-wrapper">
        <el-button>取消</el-button>
        <el-button type="primary">生成推荐方案</el-button>
      </div>
    </div>
  </div>

  <!-- 添加弹窗组件 -->
  <CommonDialog ref="foodDialogRef" type="food" title="添加食材" @confirm="handleFoodConfirm" @cancel="handleFoodCancel" />
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {QuestionFilled, CircleCheck, ArrowLeft, ArrowDown} from '@element-plus/icons-vue';
import CommonDialog from './components/CommonDialog.vue';

interface Food {
  id: number;
  name: string;
  ingredients: string;
}

const emit = defineEmits(['goBack']);

const goBack = () => {
  emit('goBack');
};

const form = ref({
  gender: '女',
  height: '165.00',
  weight: '55.00',
  forbiddenFoods: [] as Food[],
  dailyEnergy: '1800.00',
  activity: '2',
  stressState: 'low',
  breakfast: '30',
  lunch: '40',
  dinner: '30',
  carbs: '60',
  protein: '15',
  fat: '25'
});

const dialogRef = ref<InstanceType<typeof CommonDialog> | null>(null);
const foodDialogRef = ref<InstanceType<typeof CommonDialog> | null>(null);

const onActivityLevelChange = (val: string, e: Event) => {
  e.stopPropagation();
  e.preventDefault();
  form.value.activity = val;
};
// 打开食材选择弹窗
const openFoodDialog = () => {
  foodDialogRef.value?.openDialog('food', form.value.forbiddenFoods);
};

// 处理食材确认
const handleFoodConfirm = (selectedFoods: Food[]) => {
  form.value.forbiddenFoods = selectedFoods;
};

// 处理食材取消
const handleFoodCancel = () => {
  // 可以不做任何处理
};

// 移除食材
const removeFood = (food: Food) => {
  form.value.forbiddenFoods = form.value.forbiddenFoods.filter((f) => f.id !== food.id);
};
</script>

<style lang="scss" scoped>
.container {
  padding: 16px;
  min-height: 100vh;
  position: relative;
  padding-bottom: 76px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .back-btn {
    margin-right: 16px;
    padding: 8px 16px;
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 4px;
    }
  }

  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
}

.content-card {
  margin-bottom: 16px;

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 12px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background: #409eff;
    border-radius: 2px;
  }
}

.form-row {
  margin-bottom: 20px;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }

  .label {
    color: #606266;
    line-height: 32px;
    white-space: nowrap;

    &.required::before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }

  .value {
    line-height: 32px;
  }

  .unit {
    margin-left: 8px;
    color: #606266;
  }

  :deep(.el-input-number) {
    width: 120px;
  }
}

.with-unit {
  :deep(.el-input__wrapper) {
    width: 120px;
  }
  :deep(.el-input-group__append) {
    padding: 0 12px;
    color: #606266;
  }
}

.bottom-btn-card {
  position: fixed;
  left: 228px;
  right: 0;
  bottom: 50px;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(64, 158, 255, 0.08);
  z-index: 2000;

  .btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

    .el-button {
      margin-top: 30px;
      min-width: 120px;
      height: 44px;
      padding: 0 24px;
    }
  }
}

.info-icon {
  color: #909399;
  font-size: 16px;
  cursor: pointer;
  margin-left: 4px;
  margin-top: 8px;
}

.status-tag {
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

:deep(.el-radio) {
  margin-right: 32px;
  .el-icon {
    margin-right: 4px;
    font-size: 16px;
  }
}

:deep(.el-select) {
  width: 100%;
}

.ratio-section {
  .ratio-row {
    display: flex;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    .ratio-item {
      margin-right: 80px;

      &:last-child {
        margin-right: 0;
      }

      .label {
        color: #606266;
        margin-bottom: 8px;
      }

      .ratio-input {
        width: 200px;

        :deep(.el-input__wrapper) {
          padding-right: 0;
        }

        :deep(.el-input-group__append) {
          padding: 0 12px;
          color: #606266;
          background-color: #f5f7fa;
        }
      }
    }
  }
}

.forbidden-food-select {
  width: 100%;
  min-height: 32px;
  padding: 4px 30px 4px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;

  &:hover {
    border-color: #409eff;
  }

  .selected-foods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .placeholder {
    color: #909399;
  }

  .select-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #c0c4cc;
  }
}
</style>
