<template>
  <view class="health-form">
    <Navbar title="健康信息" :showRightText="true" :isBack="false" />
    <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
      <u-form-item label="身高" prop="height" borderBottom required labelWidth="200rpx">
        <u--input
          v-model.number="form.height"
          border="none"
          placeholder="请输入身高cm"
          type="number"
        ></u--input>
      </u-form-item>

      <u-form-item label="体重" prop="weight" borderBottom required labelWidth="200rpx">
        <u--input
          v-model.number="form.weight"
          border="none"
          placeholder="请输入体重kg"
          type="number"
        ></u--input>
      </u-form-item>

      <u-form-item label="体型控制" prop="bodyType" borderBottom labelWidth="200rpx" @click="showSelector('bodyType')">
        <u--input
          v-model="displayBodyTypeName"
          disabled
          disabledColor="#ffffff"
          placeholder="请选择"
          border="none"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="BMI" prop="bmi" borderBottom labelWidth="200rpx">
        <u--input
          v-model="form.bmi"
          disabled
          border="none"
          disabledColor="#ffffff"
          placeholder="请输入身高、体重"
        ></u--input>
      </u-form-item>

      <u-form-item label="劳动强度" prop="laborIntensity" borderBottom required labelWidth="200rpx" @click="showSelector('laborIntensity')">
        <u--input
          v-model="displayLaborIntensityName"
          disabled
          border="none"
          disabledColor="#ffffff"
          placeholder="请选择"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="是否住院" prop="housing" borderBottom labelWidth="200rpx" @click="showSelector('housing')">
        <u--input
          v-model="displayHousingName"
          disabled
          border="none"
          disabledColor="#ffffff"
          placeholder="请选择"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="医嘱" borderBottom labelWidth="200rpx">
        <text class="u-content-color">暂无医嘱信息</text>
      </u-form-item>

      <u-form-item label="过敏源" prop="allergies" borderBottom labelWidth="200rpx">
        <u--input
          v-model="form.allergies"
          border="none"
          placeholder="请输入过敏源"
        ></u--input>
      </u-form-item>
    </u--form>

    <view class="chronic-diseases">
      <text class="chronic-diseases__label">慢性病</text>
      <u-checkbox-group v-model="form.chronicDiseases" borderBottom placement="column" iconSize="16">
        <u-checkbox
          v-for="(item, index) in chronicDiseaseOptions"
          :key="index"
          :name="item.value"
          :label="item.label"
          shape="circle"
        ></u-checkbox>
      </u-checkbox-group>
    </view>

    <view class="submit-btn">
      <u-button type="warning" text="保存" @click="handleSubmit"></u-button>
    </view>

    <u-action-sheet
      v-if="currentSelector"
      :show="selectorVisible"
      :actions="getSelectorOptions(currentSelector)"
      :title="getSelectorTitle(currentSelector)"
      description="如果选择保密会报错"
      @close="hideSelector"
      @select="handleSelectorSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        height: null,
        weight: null,
        bodyType: '',
        bmi: '',
        laborIntensity: '',
        housing: '',
        allergies: '',
        chronicDiseases: []
      },
      selectorVisible: false,
      currentSelector: null,
      selectors: {
        bodyType: { options: [{ name: '偏瘦', value: '1' }, { name: '正常', value: '2' }, { name: '偏胖', value: '3' }], title: '请选择体型' },
        laborIntensity: { options: [{ name: '轻度', value: '1' }, { name: '中度', value: '2' }, { name: '重度', value: '3' }], title: '请选择劳动强度' },
        housing: { options: [{ name: '自住', value: '1' }, { name: '租房', value: '2' }], title: '请选择住房类型' }
      },
      chronicDiseaseOptions: [
        { label: '糖尿病', value: 'diabetes' },
        { label: '肾结石', value: 'kidney_stone' },
        { label: '心脏疾病', value: 'heart_disease' },
        { label: '痛风', value: 'gout' }
      ],
      rules: {
        height: { type: 'number', required: true, message: '请输入身高', trigger: ['blur', 'change'] },
        weight: { type: 'number', required: true, message: '请输入体重', trigger: ['blur', 'change'] },
        laborIntensity: { type: 'string', required: true, message: '请选择劳动强度', trigger: ['blur', 'change'] }
      },
      displayBodyTypeName: '',
      displayLaborIntensityName: '',
      displayHousingName: ''
    }
  },
  watch: {
    'form.height': 'calculateBMI',
    'form.weight': 'calculateBMI',
    'form.bodyType': 'updateDisplayBodyTypeName',
    'form.laborIntensity': 'updateDisplayLaborIntensityName',
    'form.housing': 'updateDisplayHousingName'
  },
  methods: {
    calculateBMI() {
      if (this.form.height && this.form.weight) {
        const heightInMeters = this.form.height / 100
        const bmi = (this.form.weight / (heightInMeters * heightInMeters)).toFixed(1)
        this.form.bmi = bmi
      }
    },
    showSelector(selector) {
      this.currentSelector = selector;
      this.selectorVisible = true;
    },
    hideSelector() {
      this.currentSelector = null;
      this.selectorVisible = false;
    },
    getSelectorOptions(selector) {
      return this.selectors[selector]?.options || [];
    },
    getSelectorTitle(selector) {
      return this.selectors[selector]?.title || '';
    },
    handleSelectorSelect(e) {
      this.form[this.currentSelector] = e.value;
      this.hideSelector();
    },
    updateDisplayBodyTypeName() {
      this.displayBodyTypeName = this.getDisplayName('bodyType', this.form.bodyType);
    },
    updateDisplayLaborIntensityName() {
      this.displayLaborIntensityName = this.getDisplayName('laborIntensity', this.form.laborIntensity);
    },
    updateDisplayHousingName() {
      this.displayHousingName = this.getDisplayName('housing', this.form.housing);
    },
    getDisplayName(selector, value) {
      const options = this.selectors[selector]?.options || [];
      const selectedOption = options.find(option => option.value === value);
      return selectedOption ? selectedOption.name : '';
    },
    handleSubmit() {
      this.$refs.uForm.validate().then(valid => {
        if (valid) {
          console.log('Form submitted:', this.form);
          uni.$u.toast('保存成功');
        } else {
          uni.$u.toast('请填写完整信息');
        }
      }).catch(errors => {
        console.error('Validation failed:', errors);
        uni.$u.toast('请检查并修正错误');
      });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    }
  }
}
</script>

<style scoped lang="scss">
.health-form {
  padding: 20rpx;
  background-color: #ffffff;

  .chronic-diseases {
    margin-top: 20rpx;

    &__label {
      font-size: 28rpx;
      color: $u-main-color;
      margin-bottom: 20rpx;
      display: block;
    }
  }

  .submit-btn {
    margin-top: 40rpx;
  }
}

::v-deep .u-form-item {
  min-height: 100rpx;

  &__body__right__content__slot {
    text-align: right;
  }
}

::v-deep .u-checkbox {
  margin-bottom: 16rpx;
}
</style>
