<template>
  <div class="page-current">
    <el-button type="primary" @click="onBack">返回</el-button>
  </div>
  <div class="question-main">
    <!-- 顶部信息区（完全还原图片样式） -->
    <div class="info-card info-card-bee">
      <div class="info-title">
        <span class="bee-title">{{ title }}</span>
      </div>
      <el-row :gutter="20" align="middle" class="info-row">
        <el-col :span="2"><span>性别：</span>{{ form.gender }}</el-col>
        <el-col :span="2"><span>年龄：</span>{{ form.age }}</el-col>
        <el-col :span="2"
          ><span class="required">*</span><span>BMI：{{ form.bmi }}</span></el-col
        >
        <el-col :span="4"
          ><span class="required">*</span><span>身高：</span> <el-input v-model="form.height" style="width: 120px" /> <span>cm</span></el-col
        >
        <el-col :span="4"
          ><span class="required">*</span><span>体力活动：</span>
          <el-select v-model="form.activity" style="width: 150px">
            <el-option v-for="dict in physical_activity" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-col>
        <el-col :span="4" v-if="title === 'BEE'"
          ><span class="required">*</span><span>应激状态：</span>
          <el-select v-model="form.stressType" style="width: 150px">
            <el-option v-for="dict in stress_level" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-col>
        <el-col :span="3" v-if="title === '烧伤公式'"
          ><span>烧伤面积：</span> <el-input v-model="form.burnArea" style="width: 120px" /> <span>%</span>
        </el-col>
        <el-col :span="3"><span>体重：</span> <el-input v-model="form.weight" style="width: 120px" /> <span>kg</span> </el-col>
        <el-col :span="3"><span>上臂围：</span> <el-input v-model="form.armCircumference" style="width: 120px" /> <span>cm</span> </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="3"><span>小腿围：</span> <el-input v-model="form.calfCircumference" style="width: 120px" /> <span>cm</span> </el-col>
        <el-col :span="20" style="text-align: right">
          <el-button
            type="primary"
            class="recalc-btn"
            @click="() => recalculate(form.gender, form.age, form.height, form.weight, form.activity, form.stressType)"
            >重新计算</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 警示提示区 -->
    <div class="tips-box">注:常量元素、微量元素、维生素、氨基酸、脂肪酸、膳食纤维默认为DRIS数据，如有必要请自行修改。</div>
    <div v-show="showFlag == 'true'">
      <el-form ref="NutritionSettingFormRef" :model="form" :rules="rules" label-position="right" label-width="170px">
        <!-- 能量及三大营养素 -->
        <div class="group-card">
          <div class="group-title">能量及三大营养素</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="所需热量：" class="right-label">
                <el-input v-model="form.caloriesKcalPerDay" style="width: 200px" />
                <span class="unit">kcal/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需热量：" class="right-label">
                <span>{{ form.caloriesKcalPerKgDay }}</span>
                <span class="unit">kcal/kg*d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需热量：" class="right-label">
                <span>{{ form.caloriesKjPerDay }}</span>
                <span class="unit">kJ/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="蛋白质热量占比：" class="right-label">
                <el-input v-model="form.proteinCaloriePercentage" style="width: 200px" />
                <span class="unit">%</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需蛋白质：" class="right-label">
                <span>{{ form.proteinGPerKgDay }}</span>
                <span class="unit">g/kg*d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需蛋白质：" class="right-label">
                <span>{{ form.proteinGPerDay }}</span>
                <span class="unit">g/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="脂肪热量占比：" class="right-label">
                <el-input v-model="form.fatCaloriePercentage" style="width: 200px" />
                <span class="unit">%</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需脂肪：" class="right-label">
                <span>{{ form.fatGPerKgDay }}</span>
                <span class="unit">g/kg*d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需脂肪：" class="right-label">
                <span>{{ form.fatGPerDay }}</span>
                <span class="unit">g/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="碳水化合物热量占比：" class="right-label">
                <el-input v-model="form.carbohydrateCaloriePercentage" style="width: 200px" />
                <span class="unit">%</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需碳水化合物：" class="right-label">
                <span>{{ form.carbohydrateGPerKgDay }}</span> <span class="unit">g/kg·d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所需碳水化合物：" class="right-label">
                <span>{{ form.carbohydrateGPerDay }}</span>
                <span class="unit">g/d</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 常量元素 -->
        <div class="group-card">
          <div class="group-title">常量元素</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="钙：" class="right-label">
                <el-input v-model="form.calcium" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="磷：" class="right-label">
                <el-input v-model="form.phosphorus" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="钾：" class="right-label">
                <el-input v-model="form.potassium" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="钠：" class="right-label">
                <el-input v-model="form.sodium" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="镁：" class="right-label">
                <el-input v-model="form.magnesium" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="氯：" class="right-label">
                <el-input v-model="form.chloride" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 微量元素 -->
        <div class="group-card">
          <div class="group-title">微量元素</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="铁：" class="right-label">
                <el-input v-model="form.iron" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="锌：" class="right-label">
                <el-input v-model="form.zinc" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="硒：" class="right-label">
                <el-input v-model="form.selenium" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="铜：" class="right-label">
                <el-input v-model="form.copper" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="锰：" class="right-label">
                <el-input v-model="form.manganese" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="碘：" class="right-label">
                <el-input v-model="form.iodine" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="氟：" class="right-label">
                <el-input v-model="form.fluoride" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="铬：" class="right-label">
                <el-input v-model="form.chromium" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="钼：" class="right-label">
                <el-input v-model="form.molybdenum" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 脂溶性维生素 -->
        <div class="group-card">
          <div class="group-title">脂溶性维生素</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="维生素A：" class="right-label">
                <el-input v-model="form.vitaminA" style="width: 200px" />
                <span class="unit">μgRAE/d</span>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="维生素D：" class="right-label">
                <el-input v-model="form.vitaminD" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维生素E：" class="right-label">
                <el-input v-model="form.vitaminE" style="width: 200px" />
                <span class="unit">mgα-TE/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="维生素K：" class="right-label">
                <el-input v-model="form.vitaminK" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 水溶性维生素 -->
        <div class="group-card">
          <div class="group-title">水溶性维生素</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="维生素B1：" class="right-label">
                <el-input v-model="form.vitaminBOne" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维生素B2：" class="right-label">
                <el-input v-model="form.vitaminBTwo" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维生素B6：" class="right-label">
                <el-input v-model="form.vitaminBSix" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="维生素B12：" class="right-label">
                <el-input v-model="form.vitaminBTwelve" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="烟酸（尼克酸）：" class="right-label">
                <el-input v-model="form.niacin" style="width: 200px" />
                <span class="unit">mgNE/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维生素C：" class="right-label">
                <el-input v-model="form.vitaminC" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="叶酸：" class="right-label">
                <el-input v-model="form.folicAcid" style="width: 200px" />
                <span class="unit">μgDFE/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生物素：" class="right-label">
                <el-input v-model="form.biotin" style="width: 200px" />
                <span class="unit">μg/d</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="胆碱：" class="right-label">
                <el-input v-model="form.choline" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 8px">
            <el-col :span="8">
              <el-form-item label="泛酸：" class="right-label">
                <el-input v-model="form.pantothenicAcid" style="width: 200px" />
                <span class="unit">mg/d</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 其他 -->
        <div class="group-card">
          <div class="group-title">其他</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="膳食纤维：" class="right-label">
                <el-input v-model="form.dietaryFiber" style="width: 200px" />
                <span class="unit">g/d</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div class="flex justify-center gap-2 mt-4">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, toRefs, getCurrentInstance} from 'vue';
import {addSetting, updateSetting, recalculateValue} from '@/api/patients/nutritionSetting';
import type {FormInstance} from 'element-plus';
const {proxy} = getCurrentInstance() as any;
const {physical_activity, stress_level} = toRefs(proxy?.useDict('physical_activity', 'stress_level'));
const emit = defineEmits(['change']);
const props = defineProps({
  form: {type: Object, required: true},
  rules: {type: Object, required: true},
  buttonLoading: {type: Boolean, required: true},
  cancel: {type: Function, required: true},
  handleCancelOne: {type: Function, required: true},
  title: {type: String}
});
const {handleCancelOne, form, rules} = props;
const {title} = toRefs(props);
const showFlag = ref('false');
const buttonLoading = ref(false);
const NutritionSettingFormRef = ref<FormInstance>();

const recalculate = async (gender, age, height, weight, activity, stressType) => {
  const res = await recalculateValue({gender, age, height, weight, activity, stressType});
  if (res) {
    const keepSettingType = form.settingType;
    Object.assign(form, res);
    form.settingType = keepSettingType; // 恢复settingType的值
  }
  showFlag.value = 'true';
};

/** 提交按钮 */
const submitForm = async () => {
  if (!NutritionSettingFormRef.value) return;
  await NutritionSettingFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      try {
        if (form.id) {
          await updateSetting(form);
        } else {
          console.log(form.settingType);
          await addSetting(form);
        }
        proxy?.$modal.msgSuccess('操作成功');
        onBack();
      } catch (error) {
        console.error('提交失败', error);
      } finally {
        buttonLoading.value = false;
      }
    }
  });
};
const close = async () => {};

const onBack = () => {
  showFlag.value = 'false';
  emit('change', 'nutritionSetting');
  handleCancelOne();
};
</script>

<style scoped>
.page-current {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.question-main {
  padding: 20px 0 100px;
}

.info-card-bee {
  margin-bottom: 16px;
  background: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 18px 24px 10px 24px;
  border: none;
}

.info-title {
  font-weight: bold;
  font-size: 16px;
  color: #409eff;
  margin-bottom: 8px;
  padding-left: 2px;
}

.bee-title {
  border-left: 4px solid #409eff;
  padding-left: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #409eff;
}

.info-row {
  background: #f8fafc;
  font-size: 16px;
  padding: 0 0 0 0;
  margin: 0;
}

.required {
  color: #f56c6c;
  margin-right: 2px;
}

.recalc-btn {
  margin-left: 12px;
}

.tips-box {
  color: #ff5e4c;
  margin: 16px 0;
  font-size: 14px;
}

.group-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 16px 24px;
}

.group-title {
  background: #f5f7fa;
  padding: 8px 16px;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 16px;
}

.unit {
  margin-left: 4px;
  color: #888;
}

.right-label .el-form-item__label {
  text-align: right !important;
  justify-content: flex-end;
  display: flex;
}

::v-deep .el-form-item__label {
  text-align: right !important;
  justify-content: flex-end;
  display: flex;
}
</style>
