<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="140px" v-loading="loading">
      <div v-for="(answer, index) in form.answers" :key="index">
        <div style="margin-bottom: 20px; margin-top: 20px;">
          <span style="font-size: 15px; font-weight: bold; margin-left: 31px">
            {{ answer.title }}
          </span>
        </div>
        <div style="margin-left: 31px;">
          <el-checkbox-group v-model="form.answers[index].value" size="mini" :disabled="true">
            <el-checkbox v-for="dict in getSelectedOptions(answer)" :key="dict.value" :label="dict.value">
              {{ dict.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div>
        <el-form-item label="过敏情况" prop="allergy">
          <el-input type="textarea" :rows="2" placeholder="请输入过敏情况" v-model="form.allergy">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark">
          </el-input>
        </el-form-item>
      </div>
      <div v-if="!form.answers || form.answers.length === 0" style="text-align: center; color: #999; padding: 20px;">
        暂无采集信息
      </div>

    </el-form>
  </div>
</template>

<script>
import { getCollectionByUserId } from "@/api/collection";

export default {
  name: "CollectionDetail",
  props: {
    userId: {
      type: [String, Number],
      required: true
    },
    prescribeId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      form: {
        answers: []
      },
      loading: false
    };
  },
  watch: {
    userId: {
      handler(newVal) {
        if (newVal) {
          this.fetchCollectionInfo(newVal);
        }
      },
      immediate: true
    }
  },
  methods: {
    getSelectedOptions(answer) {
      if (!Array.isArray(answer.value) || !Array.isArray(answer.options)) {
        return [];
      }
      const selectedValues = new Set(answer.value);
      return answer.options.filter(option => selectedValues.has(option.value));
    },

    fetchCollectionInfo(userId) {
      this.loading = true;
      getCollectionByUserId(userId)
        .then(res => {
          const data = res.data;
          if (data && Array.isArray(data.answers)) {
            this.form.answers = data.answers;
          } else {
            this.form.answers = [];
          }
        })
        .catch(err => {
          console.error("获取采集信息失败:", err);
          this.$message.warning("暂无采集信息");
          this.form.answers = [];
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.app-container>>>.el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
}

.app-container>>>.el-checkbox.is-disabled .el-checkbox__input.is-checked .el-checkbox__inner::after {
  border-color: #fff !important;
}

/*让已选中禁用状态的文字也高亮为蓝色 */
.app-container>>>.el-checkbox.is-disabled .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #409eff !important;
}
</style>
