<template>
  <div>
    <div>
      <!--
      1、肩部
        肩膀的不对称性，轻微差异1分，2分有差异，3分差异性很大
      2、肩胛骨
        肩胛骨的对称性，轻微差异1分，差异较大2分
      3、腰部
        腰部的对称性，轻微差异1分，2分有差异，3分差异性很大，4分差异性很大
      4、半胸
      上半身不对称的状况，以上胸椎的区域为主，主要看譬如肩胛骨的凸侧，以及肋骨的变化，轻微差异1分，差异较大2分
      -->
      <div
        class="item-container"
        v-for="(item, index) in questions"
        :key="index"
      >
        <div class="item-title">{{ item.index }}. {{ item.question }}</div>
        <div class="item-radio-box">
          <el-radio-group v-model="form[`topic${item.index}`]">
            <el-radio
              v-for="(criteria, index) in item.criteria"
              :key="index"
              :label="criteria.value"
              >{{ criteria.label }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="submit-box">
        <el-button class="submit-box-but" type="primary" @click="submitForm"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PHQ9",
  props: ["scaleCode"],
  data() {
    return {
      form: {},
      questions: [
        {
          index: 1,
          question: "肩部-肩膀的不对称性",
          criteria: [
            { label: "轻微差异", value: 1 },
            { label: "有差异", value: 2 },
            { label: "差异性很大", value: 3 },
          ],
        },
        {
          index: 2,
          question: "肩胛骨-肩胛骨的对称性",
          criteria: [
            { label: "轻微差异", value: 1 },
            { label: "差异较大", value: 2 },
          ],
        },
        {
          index: 3,
          question: "腰部-腰部的对称性",
          criteria: [
            { label: "轻微差异", value: 1 },
            { label: "有差异", value: 2 },
            { label: "差异性很大", value: 3 },
            { label: "差异性很大", value: 4 },
          ],
        },
        {
          index: 4,
          question: "半胸-上半身不对称的状况",
          criteria: [
            { label: "轻微差异", value: 1 },
            { label: "差异较大", value: 2 },
          ],
        },
      ],
      scaleData: {},
    };
  },
  created() {
    this.treatmentId = this.$route.query.treatmentId; // 诊疗id
    let scaleData = localStorage.getItem("scaleData"); // 获取上次填写的数据
    // 如果scaleData存在，则解析成对象，否则创建一个空对象
    this.scaleData = scaleData
      ? JSON.parse(scaleData)
      : {
          [this.treatmentId]: {},
        };

    // 如果scaleData[this.treatmentId]不存在，则创建一个空对象
    if (!this.scaleData[this.treatmentId]) {
      this.scaleData[this.treatmentId] = {};
    }
    this.form = this.scaleData[this.treatmentId][this.scaleCode] || {}; // 将上次填写的数据赋值给form
  },
  methods: {
    submitForm() {
      let score = 0;
      // 计算总分, topic${i}属性不一定存在，先校验是否存在
      for (let i = 1; i <= 7; i++) {
        if (this.form[`topic${i}`] !== undefined) {
          score += this.form[`topic${i}`];
        }
      }
      // 存储数据
      this.scaleData[this.treatmentId][this.scaleCode] = this.form;
      localStorage.setItem("scaleData", JSON.stringify(this.scaleData));
      // 将数据传递给父组件
      this.$emit("getScaleResult", score, this.scaleCode);
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>

<style scoped>
.item-title {
  font-size: 20px;
  font-weight: bold;
  color: #3d3d3d;
  line-height: 26px;
}
.item-radio-box {
  margin: 16px 0px;
}
>>> .el-radio__label {
  font-size: 18px;
  color: #555555;
  line-height: 20px;
}
.submit-box {
  display: flex;
  justify-content: center;
  align-items: center;
  .submit-box-but {
    width: 200px;
  }
}
</style>
