<template>
  <div class="app-container">
    <div class="hospital">{{ tenantName || "- - - -" }}</div>
    <el-form
      v-if="stepNum == 1"
      :rules="rules"
      ref="form"
      :model="form"
      label-width="110px"
    >
      <!-- 姓名、性别（单选）、出生日期、年龄、联系方式 -->
      <div class="card">
        <div class="card-title">基本信息</div>
        <div>
          <!-- <el-upload
            name="file"
            accept=".img,.png,.jpg"
            :action="uploadFileUrl"
            list-type="picture-card"
            class="idcardupd"
            :show-file-list="false"
            :on-success="changeFile"
            :on-change="uploader"
            :on-progress="handleProgress"
          >
            <div slot="trigger" class="idcardupd-but">
              <img
                src="@/assets/images/idcard.png"
                class="img-icon"
                style="margin-right: 5px"
              />
              <span>扫描身份证</span>
            </div>
          </el-upload> -->
          <el-form-item label="姓名" prop="SCWJ-NAME">
            <el-input
              v-model="form['SCWJ-NAME']"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="SCWJ-SEX">
            <el-radio-group v-model="form['SCWJ-SEX']">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期" prop="SCWJ-BIRTH">
            <el-date-picker
              v-model="form['SCWJ-BIRTH']"
              type="date"
              placeholder="选择日期"
              @change="calculateAge"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="年龄" prop="SCWJ-AGE">
            <el-input
              v-model="form['SCWJ-AGE']"
              type="number"
              placeholder="请输入年龄"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="SCWJ-PHONE">
            <el-input
              v-model="form['SCWJ-PHONE']"
              type="number"
              placeholder="请输入联系方式"
            ></el-input>
          </el-form-item>
        </div>
      </div>
      <!-- 身高、体重，BMI -->
      <div class="card">
        <div class="card-title">体重自评</div>
        <el-form-item label="身高cm" prop="SCWJ-HEIGHT">
          <el-input
            @blur="calculateBMI"
            v-model="form['SCWJ-HEIGHT']"
            type="number"
            placeholder="请输入身高"
          ></el-input>
        </el-form-item>
        <el-form-item label="体重kg" prop="SCWJ-WEIGHT">
          <el-input
            @blur="calculateBMI"
            v-model="form['SCWJ-WEIGHT']"
            type="number"
            placeholder="请输入体重"
          ></el-input>
        </el-form-item>
        <el-form-item label="BMI" prop="SCWJ-BMI">
          <el-input
            :disabled="true"
            v-model="form['SCWJ-BMI']"
            type="number"
            placeholder="BMI"
          ></el-input>
        </el-form-item>
        <el-form-item label="结论" prop="SCWJ-JL">
          <span :class="`BIMTips${BMIVerdict[form['SCWJ-JL']]}`">
            {{ form["SCWJ-JL"] || "- - -" }}</span
          >
        </el-form-item>
      </div>
    </el-form>
    <div v-if="stepNum == 2">
      <div class="card">
        <div class="card-title">失眠自评（SRSS）</div>
        <div
          class="item-container"
          v-for="(item, index) in scaleList"
          :key="index"
        >
          <div class="item-title">{{ index + 1 }}. {{ item.question }}</div>
          <div class="item-radio-box">
            <el-radio-group v-model="form[`topic${index + 1}`]">
              <el-radio
                class="item-radio"
                v-for="(criteria, index) in item.options"
                :key="index"
                :label="criteria.score"
                >{{ criteria.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="card-tips">
          SRSS共有10个项目，每个项目分5级评分（1~5），总分为每个项目得分之和。评分愈高，说明睡眠问题愈严重。此量表最低分为10分（基本无睡眠问题），最高分为50分（最严重）
        </div>
      </div>
      <div class="card">
        <div class="card-title">可接受的治疗方式</div>
        <el-checkbox-group v-model="form['SCWJ-ZLFS']">
          <el-checkbox label="饮食治疗" class="item-radio">
            饮食治疗（中药代饮、减脂餐、营养制剂）
          </el-checkbox>
          <el-checkbox label="运动治疗" class="item-radio">
            运动治疗（功率踏车，有氧运动，跑步）
          </el-checkbox>
          <el-checkbox label="中医治疗" class="item-radio">
            中医治疗（针灸、拔罐、埋线）
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="card">
        <div class="card-title">可接受的治疗周期</div>
        <el-radio-group v-model="form['SCWJ-ZLZQ']">
          <el-radio class="item-radio" :label="1">1个月</el-radio>
          <el-radio class="item-radio" :label="2">2个月</el-radio>
          <el-radio class="item-radio" :label="3">3个月</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="submit-box" v-if="stepNum == 1">
      <el-button type="primary" class="submit-box-but" @click="submitForm">
        下一步
      </el-button>
    </div>
    <div class="submit-box" v-if="stepNum == 2">
      <el-button type="primary" class="submit-box-but" @click="scaleSubmitForm">
        提交
      </el-button>
    </div>
    <div class="hospital1">{{ tenantName || "- - - -" }}</div>
  </div>
</template>

<script>
import {
  create,
  screenSave,
  screenSubmit,
  queryHospitalNoToken,
} from "@/api/screening.js";
export default {
  name: "Notice",
  data() {
    return {
      hospitalId: "",
      tenantName: "",
      stepNum: 1, // 步骤数
      uploadFileUrl: process.env.VUE_APP_BASE_URL + "/baidu/ocr/idcardInfo", // 上传的图片服务器地址
      fileList: [],

      BMITips: [
        {
          label: "体重过轻",
          score: 18.5,
        },
        {
          label: "正常",
          score: 23.9,
        },
        {
          label: "超重",
          score: 27.9,
        },
        {
          label: "肥胖",
          score: 28,
        },
      ],

      BMIVerdict: {
        体重过轻: "1",
        正常: "2",
        超重: "3",
        肥胖: "4",
      },
      // 1.您觉得平时睡眠足够吗 ?
      // ①睡眠过多了  ②睡眠正好  ③睡眠欠一些  ④睡眠不够  ⑤睡眠时间远远不够
      // 2.您在睡眠后是否已觉得充分休息过了 ?
      // ①觉得充分休息过了  ②觉得休息过了  ③觉得休息了一点  ④不觉得休息过了  ⑤觉得一点儿也没休息
      // 3.您晚上已睡过觉,白天是否打瞌睡 ?
      // ① 0~5 天  ②很少 （6~12 天）   ③有时 （13~18 天)） ④经常（19~24 天）  ⑤总是（25~31 天）
      // 4.您平均每个晚上大约能睡几小时 ?
      // ①≥9小时  ② 7~8 小时  ③ 5~6 小时  ④ 3~4 小时  ⑤ 1~2 小时
      // 5.您是否有入睡困难 ?
      // ①0~5 天  ②很少 （6~12 天）  ③有时（13~18 天 ）   ④经常（19~24 天）  ⑤总是（25~31 天）
      // 6.您入睡后中间是否易醒 ?
      // ①0~5 天 ②很少（6~12 天）  ③有时（13~18 天） ④经常 （19~24 天）  ⑤总是（25~31 天）
      // 7.您在醒后是否难于再入睡 ?
      // ①0~5天  ②很少（61~2 天）  ③有时 （13~18 天）  ④经常 （19~24 天）  ⑤总是 （25~31 天）
      // 8.您是否多梦或常被恶梦惊醒 ?
      // ①0~5天  ②很少（61~2 天）  ③有时 （13~18 天）  ④经常 （19~24 天）  ⑤总是 （25~31 天）
      // 9.为了睡眠 , 您是否吃安眠药 ?
      // ①0~5天  ②很少（61~2 天）  ③有时 （13~18 天）  ④经常 （19~24 天）  ⑤总是 （25~31 天）
      // 10.您失眠后心情（心境）如何 ?
      // ①无不适  ②无所谓  ③有时心烦、急躁  ④心慌、气短  ⑤乏力、没精神、做事效率低
      scaleList: [
        {
          question: "您觉得平时睡眠足够吗 ?",
          options: [
            { label: "睡眠过多了", score: 1 },
            { label: "睡眠正好", score: 2 },
            { label: "睡眠欠一些", score: 3 },
            { label: "睡眠不够", score: 4 },
            { label: "睡眠时间远远不够", score: 5 },
          ],
        },
        {
          question: "您在睡眠后是否已觉得充分休息过了 ?",
          options: [
            { label: "觉得充分休息过了", score: 1 },
            { label: "觉得休息过了", score: 2 },
            { label: "觉得休息了一点", score: 3 },
            { label: "不觉得休息过了", score: 4 },
            { label: "觉得一点儿也没休息", score: 5 },
          ],
        },
        {
          question: "您晚上已睡过觉,白天是否打瞌睡 ?",
          options: [
            { label: "0~5 天", score: 1 },
            { label: "很少 （6~12 天）", score: 2 },
            { label: "有时 （13~18 天）", score: 3 },
            { label: "经常（19~24 天）", score: 4 },
            { label: "总是（25~31 天）", score: 5 },
          ],
        },
        {
          question: "您平均每个晚上大约能睡几小时 ?",
          options: [
            { label: "≥9小时", score: 1 },
            { label: "7~8 小时", score: 2 },
            { label: "5~6 小时", score: 3 },
            { label: "3~4 小时", score: 4 },
            { label: "1~2 小时", score: 5 },
          ],
        },
        {
          question: "您是否有入睡困难 ?",
          options: [
            { label: "0~5 天", score: 1 },
            { label: "很少 （6~12 天）", score: 2 },
            { label: "有时（13~18 天 ）", score: 3 },
            { label: "经常（19~24 天）", score: 4 },
            { label: "总是（25~31 天）", score: 5 },
          ],
        },
        {
          question: "您入睡后中间是否易醒 ?",
          options: [
            { label: "0~5 天", score: 1 },
            { label: "很少（6~12 天）", score: 2 },
            { label: "有时（13~18 天）", score: 3 },
            { label: "经常 （19~24 天）", score: 4 },
            { label: "总是（25~31 天）", score: 5 },
          ],
        },
        {
          question: "您在醒后是否难于再入睡 ?",
          options: [
            { label: "0~5天", score: 1 },
            { label: "很少（6~12 天）", score: 2 },
            { label: "有时 （13~18 天）", score: 3 },
            { label: "经常 （19~24 天）", score: 4 },
            { label: "总是 （25~31 天）", score: 5 },
          ],
        },
        {
          question: "您是否多梦或常被恶梦惊醒 ?",
          options: [
            { label: "0~5天", score: 1 },
            { label: "很少（6~12 天）", score: 2 },
            { label: "有时 （13~18 天）", score: 3 },
            { label: "经常 （19~24 天）", score: 4 },
            { label: "总是 （25~31 天）", score: 5 },
          ],
        },
        {
          question: "为了睡眠 , 您是否吃安眠药 ?",
          options: [
            { label: "0~5天", score: 1 },
            { label: "很少（6~12 天）", score: 2 },
            { label: "有时 （13~18 天）", score: 3 },
            { label: "经常 （19~24 天）", score: 4 },
            { label: "总是 （25~31 天）", score: 5 },
          ],
        },
        {
          question: "您失眠后心情（心境）如何 ?",
          options: [
            { label: "无不适", score: 1 },
            { label: "无所谓", score: 2 },
            { label: "有时心烦、急躁", score: 3 },
            { label: "心慌、气短", score: 4 },
            { label: "乏力、没精神、做事效率低", score: 5 },
          ],
        },
      ], // 表单参数
      form: {
        "SCWJ-NAME": "",
        "SCWJ-SEX": "",
        "SCWJ-BIRTH": "",
        "SCWJ-AGE": "",
        "SCWJ-PHONE": "",
        "SCWJ-HEIGHT": "",
        "SCWJ-WEIGHT": "",
        "SCWJ-BMI": "",
        "SCWJ-JL": "",
        "SCWJ-ZLFS": [],
      },
      // 表单校验
      rules: {
        "SCWJ-NAME": [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        "SCWJ-SEX": [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change",
          },
        ],
        "SCWJ-BIRTH": [
          {
            required: true,
            message: "出生日期不能为空",
            trigger: "change",
          },
        ],
        "SCWJ-AGE": [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "change",
          },
        ],
        "SCWJ-PHONE": [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: "blur",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "格式不正确",
            trigger: "change",
          },
        ],
        "SCWJ-HEIGHT": [
          {
            required: true,
            message: "身高不能为空",
            trigger: "blur",
          },
        ],
        "SCWJ-WEIGHT": [
          {
            required: true,
            message: "体重不能为空",
            trigger: "blur",
          },
        ],
        "SCWJ-BMI": [
          {
            required: false,
            message: "BMI不能为空",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  created() {
    this.hospitalId = this.$route.query.hospitalId;
    this.getQueryHospitalNoToken(); // 组织id获取组织名称
  },
  methods: {
    // 通过出生日期计算年龄
    calculateAge() {
      const birthDate = new Date(this.form["SCWJ-BIRTH"]);
      const today = new Date();
      let age = today.getFullYear() - birthDate.getFullYear();
      const monthDiff = today.getMonth() - birthDate.getMonth();
      if (
        monthDiff < 0 ||
        (monthDiff === 0 && today.getDate() < birthDate.getDate())
      ) {
        age--;
      }
      this.form["SCWJ-AGE"] = age;
    },

    // 上传身份信息,获取身份信息字段
    async changeFile(e) {
      this.loading = false;
      console.log("上传身份信息: ", e);
      const { code, data } = e;
      console.log("data: ", data);
      if (code === 200) {
        this.spinning = false;
        this.codeValue["SCWJ-NAME"] = data.name;
        this.codeValue["SCWJ-SEX"] = data.sex;
        this.codeValue["SCWJ-idCard"] = data.idcard;
        this.codeValue["SCWJ-AGE"] = data.age;
        await this.setValueByIdCard(data.idcard);
        // await this.saveAnswer(data.name, "SCWJ-NAME");
        // await this.saveAnswer(data.idcard, "SCWJ-idCard");
      }
    },
    handleProgress() {
      this.loading = true;
    },
    uploader(res) {
      this.loading = false;
    },
    // 组织id获取组织名称
    getQueryHospitalNoToken() {
      let params = {
        id: this.$route.query.id,
      };
      queryHospitalNoToken(params).then((response) => {
        this.tenantName = response.data.name || "";
      });
    },
    // 计算BIM
    calculateBMI() {
      if (this.form["SCWJ-WEIGHT"] && this.form["SCWJ-HEIGHT"]) {
        const weight = parseFloat(this.form["SCWJ-WEIGHT"]);
        const height = parseFloat(this.form["SCWJ-HEIGHT"]);
        const bmi = weight / (height / 100) ** 2;
        this.form["SCWJ-BMI"] = bmi.toFixed(2);
        this.getBMITips(bmi);
      }
    },
    // 通过BIM结果显示对于的结论
    // <18.5：体重过轻
    // 18.5~23.9：正常
    // 24~27.9：超重
    // ≥28：肥胖
    getBMITips(bmi) {
      let tips = "";
      if (bmi < 18.5) {
        tips = "体重过轻";
      }
      if (bmi >= 18.5 && bmi < 23.9) {
        tips = "正常";
      }
      if (bmi >= 24 && bmi < 27.9) {
        tips = "超重";
      }
      if (bmi >= 28) {
        tips = "肥胖";
      }
      this.form["SCWJ-JL"] = tips;
    },
    // 上传成功回 - pdg
    handleUploadPdfAdd1(res) {
      if (res.code == 200) {
        this.importOpen = false;
        this.getList();
        this.$modal.msgSuccess("导入成功");
      } else {
        this.$message.error(res.msg || "导入失败");
        this.fileList = [];
      }
    },
    // 上传前校检格式和大小 - 图片
    handleBeforeUpload1(file) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      // 校检文件大小
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      return isLt2M;
    },
    // 上传前校检格式和大小 - 文件
    handleBeforePdfUpload1(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["xlsx", "xls"];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message.error("上传文件只能是.xlsx, .xls");
        return false;
      }
    },
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      queryPatient(this.queryParams).then((res) => {
        this.listDat = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    /** 基本信息 */
    submitForm: function () {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          // 滚动条回到顶部
          window.scrollTo(0, 0);
          this.stepNum++;
        }
      });
    },
    // 量表结果
    async scaleSubmitForm() {
      // ------ 量表分值计算 ------
      let score = 0;
      // 计算总分, topic${i}属性不一定存在，先校验是否存在
      for (let i = 1; i <= 24; i++) {
        if (this.form[`topic${i}`] !== undefined) {
          score += this.form[`topic${i}`];
        }
      }
      // ------ 创建筛查 ------
      const params = {
        param: {
          type: 33,
          hospitalId: this.hospitalId,
          centerId: this.hospitalId,
        },
      };
      create(params).then(async (res) => {
        this.detailId = res.data.detailId;
        this.id = res.data.id;
        // ------ 保存答案 ------
        // 基本信息
        await this.saveAnswer(this.form["SCWJ-NAME"], "SCWJ-NAME");
        await this.saveAnswer(this.form["SCWJ-SEX"], "SCWJ-SEX");
        await this.saveAnswer(this.form["SCWJ-BIRTH"], "SCWJ-BIRTH");
        await this.saveAnswer(this.form["SCWJ-AGE"], "SCWJ-AGE");
        await this.saveAnswer(this.form["SCWJ-PHONE"], "SCWJ-PHONE");
        await this.saveAnswer(this.form["SCWJ-HEIGHT"], "SCWJ-HEIGHT");
        await this.saveAnswer(this.form["SCWJ-WEIGHT"], "SCWJ-WEIGHT");
        await this.saveAnswer(this.form["SCWJ-BMI"], "SCWJ-BMI");
        await this.saveAnswer(this.form["SCWJ-JL"], "SCWJ-JL");
        // 筛查总分
        await this.saveAnswer(score, "SCWJ-RESULT");
        await this.saveAnswer(this.form["SCWJ-ZLFS"].toString(), "SCWJ-ZLFS"); // 治疗方式
        await this.saveAnswer(this.form["SCWJ-ZLZQ"], "SCWJ-ZLZQ"); // 治疗周期
        // ------ 提交筛查 ------
        const submitParams = { param: { detailId: this.detailId } };
        await screenSubmit(submitParams).then((response) => {
          this.$modal.msgSuccess("提交成功");
          // setTimeout(() => {
          //   location.reload();
          // }, 3000);
        });
      });
    },
    // 保存答案
    async saveAnswer(value, str) {
      try {
        const params = {
          param: {
            answer: value,
            code: str,
            detailId: this.detailId,
          },
        };
        await screenSave(params).then((response) => {});
      } catch (error) {
        console.log("error", error);
        this.$message.error("网络异常,请检查您的网络!");
      }
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
.idcardupd {
  height: 44px;
  margin-bottom: 14px;
}
.idcardupd-but {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.idcardupd-but span {
  padding-top: 1px;
}
.idcardupd-but img {
  width: 20px;
  height: 20px;
}
.idcardupd >>> .el-upload {
  height: 44px;
  border: none;
  background: #c6a268;
}
.hospital1 {
  text-align: center;
  font-size: 14px;
  color: #999;
}
.hospital {
  background: #fff;
  font-size: 20px;
  color: #70483e;
  line-height: 50px;
  font-weight: 600;
  margin-bottom: 10px;
  border-radius: 6px;
  text-align: center;
}
.BIMTips1 {
  color: #cccccc;
}
.BIMTips2 {
  color: #66cc00;
}
.BIMTips3 {
  color: #c3c300;
}
.BIMTips4 {
  color: #ff9900;
}
.item-radio {
  display: block;
  margin-bottom: 10px;
}
.item-title {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
  line-height: 26px;
}
.item-radio-box {
  margin: 16px 0px;
}
>>> .el-radio__label {
  font-size: 16px;
  color: #555555;
  line-height: 20px;
}
.submit-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.submit-box .submit-box-but {
  background: #c6a268;
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
}
.card {
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 14px;
}

.card-title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 16px;
}
.card-tips {
  font-size: 14px;
  color: #999999;
}
/*  */
.app-container {
  /* background: linear-gradient(to bottom, #70483e, #f7f8fa); */
  background: #70483e;
  min-height: 100vh;
}
>>> .el-input__inner {
  border: none;
  border-bottom: 1px solid #dcdfe6;
  border-radius: 0;
}
>>> .el-date-editor.el-input {
  width: 100% !important;
}
>>> .el-form-item--medium .el-form-item__label {
  padding-right: 30px;
}

>>> .el-radio input[aria-hidden="true"] {
  display: none !important;
}

>>> .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
  .el-radio__inner {
  box-shadow: none !important;
}
</style>
<!-- >>> .el-input__inner {
  padding: 0 15px !important;
} -->
