<template>
  <div class="box">
    <switchingSlip @handleLeft="handleLeft" @handleRight="handleRight">
      <!-- 现病史 -->
      <div style="padding-bottom: 40px" v-if="bodyArray.length">
        <div
          style="
            padding-bottom: 20px;
            text-align: left;
            font-size: 16px;
            line-height: 40px;
          "
          :key="index"
          v-for="(people, index) in bodyArray"
        >
          <div class="div-car">
            <div class="title">就诊信息</div>
            <div class="div-ul">
              <div class="div-li" style="text-align: left">
                <span>就诊类型</span>
                <a-select class="w-full" v-model="people.visitType">
                  <a-select-option value="0"> 就诊 </a-select-option>
                  <a-select-option value="1"> 住院号 </a-select-option>
                </a-select>
                <span class="required" style="color: red">*</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>就诊号</span>
                <a-input v-model="people.outpatientNo" type="number" />
                <span class="required" style="color: red">*</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>年龄</span>
                <a-input v-model="people.age" type="number" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>就诊科室</span>
                <a-input v-model="people.department" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>就诊/主治医生</span>
                <a-input v-model="people.doctor" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>就诊/入院日期</span>
                <el-date-picker
                  v-model="people.admissionDate"
                  type="date"
                  placeholder="仅住院填写"
                >
                </el-date-picker>
              </div>
              <div class="div-li" style="text-align: left">
                <span>住院次数</span>
                <a-input v-model="people.admissionCount" type="number" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>入院途径</span>
                <a-select
                  :class="{
                    'w-full1': people.admissionMethod,
                    'w-full': !people.admissionMethod,
                  }"
                  v-model="people.admissionMethod"
                  placeholder="仅住院填写"
                >
                  <a-select-option
                    :key="index"
                    :value="status.id"
                    v-for="(status, index) in admissionMethods"
                  >
                    {{ status.name }}
                  </a-select-option>
                </a-select>
              </div>
              <div
                class="div-li"
                style="text-align: left"
                v-if="people.admissionMethod == 4"
              >
                <span>入院途径（其他）</span>
                <a-input v-model="people.admissionMethodOther" />
              </div>

              <div class="div-li" style="text-align: left">
                <span>床位号</span>
                <a-input
                  v-model="people.bedNumber"
                  placeholder="仅住院填写"
                  type="number"
                />
              </div>
              <div class="div-li" style="text-align: left">
                <span>出院日期</span>
                <el-date-picker
                  v-model="people.dischargeDate"
                  type="date"
                  placeholder="仅住院填写"
                >
                </el-date-picker>
              </div>
              <div class="div-li" style="text-align: left">
                <span>离院方式</span>
                <a-select
                  :class="{
                    'w-full1': people.admissionMethod,
                    'w-full': !people.admissionMethod,
                  }"
                  v-model="people.dischargeMethod"
                  placeholder="仅住院填写"
                >
                  <a-select-option
                    :key="index"
                    :value="status.id"
                    v-for="(status, index) in dischargeMethods"
                  >
                    {{ status.name }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>
          <!-- 检查信息 -->
          <div class="div-car">
            <div class="title">检查信息</div>
            <div class="div-ul">
              <div class="div-li" style="text-align: left">
                <span>身高</span>
                <a-input
                  v-model="people.height"
                  type="number"
                  @blur="calcBmi(people)"
                />
                <span>cm</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>体重</span>
                <a-input
                  v-model="people.weight"
                  type="number"
                  @blur="calcBmi(people)"
                />
                <span>kg</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>BMI</span>
                <a-input v-model="people.bmi" :disabled="true" />
              </div>
            </div>

            <div class="div-ul">
              <div class="div-li" style="text-align: left">
                <span>T值</span>
                <a-input v-model="people.tz" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>体温</span>
                <a-input v-model="people.temperature" type="number" />
                <span>℃</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>收缩压</span>
                <a-input v-model="people.systolicPressure" type="number" />
                <span>mmHg</span>
              </div>
            </div>

            <div class="div-ul">
              <div class="div-li" style="text-align: left">
                <span>舒张压</span>
                <a-input v-model="people.diastolicPressure" />
                <span>mmHg</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>脉搏</span>
                <a-input v-model="people.pulse" type="number" />
                <span>次</span>
              </div>

              <div class="div-li" style="text-align: left">
                <span>肌酐</span>
                <a-input v-model="people.creatinine" type="number" />
                <span>umol/L</span>
              </div>
            </div>

            <div class="div-ul">
              <div class="div-li" style="text-align: left">
                <span>血氧饱和度</span>
                <a-input v-model="people.oxygenSaturation" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>白蛋白</span>
                <a-input v-model="people.albumin" type="number" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>总蛋白</span>
                <a-input v-model="people.totalProtein" type="number" />
              </div>
            </div>

            <div class="div-ul">
              <div class="div-li" style="text-align: left">
                <span>维生素D3测定</span>
                <a-input v-model="people.vitaminD3" />
              </div>
              <div class="div-li" style="text-align: left">
                <span>凝血酶原时间</span>
                <a-input v-model="people.hematocrit" type="number" />
                <span>秒</span>
              </div>
              <div class="div-li" style="text-align: left">
                <span>D-二聚体</span>
                <a-input v-model="people.dimer" type="number" />
              </div>
            </div>
          </div>
          <div class="div-car">
            <div class="title">诊断信息</div>
            <Assist ref="Assist"> </Assist>
          </div>
          <div class="div-car">
            <div class="title">用药信息</div>
            <pastNowHistory ref="pastNowHistory"> </pastNowHistory>
          </div>
          <div class="div-car">
            <div class="title">病史信息</div>
            <personalHistory ref="personalHistory"> </personalHistory>
          </div>
        </div>
      </div>

      <div>
        <p @click="handleEvaluation()" class="div-step">下一步</p>
      </div>
    </switchingSlip>

    <el-dialog
      title="选择评估版本"
      :visible.sync="open"
      width="80%"
      append-to-body
      class="popup"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div>
        <a-radio-group class="w-full text-left" v-model="version">
          <a-radio :value="item.id" v-for="item in dictList" :key="item.id">
            <span>{{ item.version }}</span>
          </a-radio>
        </a-radio-group>
      </div>

      <div style="text-align: right; margin-top: 16px">
        <el-button type="primary" @click="handleStep">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import personalHistory from "views/Patient/personalHistory";
import pastNowHistory from "views/Patient/pastNowHistory";
import Assist from "views/Patient/Assist";
import {
  patientParentIllness,
  body,
  dischargeMethods,
  admissionMethods,
} from "@/views/Patient/config";
import {
  illnessHistory,
  queryPatientIllnessHistory,
  editPatientOtherMsg,
  bindPatient,
  dictList,
  icdQuery,
} from "api/ams";
import switchingSlip from "components/switchingSlip";
export default {
  name: "Family",
  props: {
    isEvaluation: {
      type: Boolean,
      default: false,
    },
    base: {
      type: Object,
      default: () => body,
    },
    source: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      open: false,
      collapse: true,
      name: "PmsPatientBody",
      dischargeMethods, // 离院方式
      admissionMethods, // 入院途径
      visible: false, // 弹框
      flat: false,
      dictList: [],
      version: "0",
    };
  },
  components: {
    switchingSlip,
    personalHistory,
    pastNowHistory,
    Assist,
  },
  computed: {
    ...mapState("user", ["route", "query", "userInfo"]),
    ...mapState("ht", [
      "createId",
      "patientData",
      "doctorName",
      "reportId",
      "bodyArray",
      "recordPatientData",
    ]),
  },

  created() {
    this.getDictList();

    if (!this.bodyArray.length) {
      this.handleNewly();
    } else {
      this.bodyArray.forEach((item) => {
        if (!item.department) {
          item.department = this.userInfo.deptName || "";
        }
      });
    }
    this.setEvaluationPath({
      name: "evaluation",
      createId: this.createId,
      code: "",
      num: "",
      patientData: this.patientData,
      status: 1,
    });
  },
  methods: {
    ...mapMutations("ht", ["addBodyArray", "setEvaluationPath"]),
    // 左滑
    handleLeft() {
      this.$router.push({
        path: "evaPatientInfo",
      });
    },
    // 右滑
    handleRight() {
      this.handleRules(); // 校验表单
    },
    // 计算bmi
    calcBmi(_people) {
      if (_people.height && _people.weight) {
        _people.bmi = (_people.weight / (_people.height / 100) ** 2).toFixed(2);
        this.$forceUpdate();
      }
    },

    // 查字典表数据
    async getDictList() {
      const res = await dictList({
        pageNum: -1,
        param: {},
      });
      const { code, msg, data } = res;
      if (code === 200) {
        this.dictList = data;
        this.version = "1982749726432432128";
      }
    },
    // 开始评估
    async handleEvaluation() {
      await this.handleRules(); // 校验表单
    },
    // 选择评估版本
    async handleStep() {
      const res = await bindPatient({
        evaluationId: this.createId,
        patientId: this.patientData.patientId,
        version: this.version,
      });
      const { code, msg, data } = res;
      if (code === 200) {
        localStorage.setItem("version", this.version);
        this.$router.push({
          path: "chooseSetMeal",
          query: {
            patientId: this.patientData.patientId,
          },
        });
      } else {
        this.$message.error(msg);
      }
      console.log("下一步");
    },
    handleNewly() {
      this.addBodyArray({
        id: "",
        visitType: "0", // 就诊类型（0：就诊1：住院）
        outpatientNo: "", // 门诊号
        age: "", // 年龄
        department: "", // 科室
        doctor: "", // 医生
        admissionDate: "", // 入院日期
        admissionCount: "", // 入院次数
        admissionMethod: "", // 入院途径
        admissionMethodOther: "", // 入院途径其他
        bedNumber: "", // 床位号
        dischargeDate: "", // 出院日期
        dischargeMethod: "", // 离院方式

        height: "", // 身高
        weight: "", // 体重
        tz: "", // T值
        temperature: "", // 体温
        systolicPressure: "", // 收缩压
        diastolicPressure: "", // 舒张压
        pulse: "", // 脉搏
        creatinine: "", // 肌酐（umol/L）
        oxygenSaturation: "", // 血氧饱和度
        albumin: "", // 白蛋白
        totalProtein: "", // 总蛋白
        vitaminD3: "", // 维生素D3测定
        hematocrit: "", // 凝血酶原时间
        dimer: "", // D-二聚体
      });
    },
    // 必填校验
    async handleRules() {
      if (!this.recordPatientData?.patientId) {
        this.$message.error("请先填写基本信息并提交");
        return;
      }
      if (!this.bodyArray[0].visitType) {
        this.$message.error("就诊类型不能为空");
        return;
      }
      // 判断是否填写就诊号
      if (!this.bodyArray[0].outpatientNo) {
        this.$message.error("就诊号不能为空");
        return;
      }
      let personalHistory = await this.$refs.personalHistory[0].handleSubmit(); // 病史信息
      let pastNowHistory = await this.$refs.pastNowHistory[0].handleSubmit(); // 用药信息
      let Assist = await this.$refs.Assist[0].handleSubmit(); // 诊断信息
      let diagnosis = await this.handleSubmit(); // 就诊信息
      // 全部提交完成后，选择评估版本
      if (personalHistory && pastNowHistory && Assist && diagnosis) {
        this.open = true;
      }
    },

    async handleSubmit(_type) {
      return new Promise(async (resolve, reject) => {
        try {
          let data = JSON.parse(JSON.stringify(this.bodyArray));
          for (const item of data) {
            if (!item.patientId) {
              item.patientId = this.recordPatientData.patientId;
            }
          }
          let params = {
            param: {
              editType: "PmsPatientBody",
              model: data[0],
            },
          };
          const res = await editPatientOtherMsg(params);
          const { code, msg } = res;
          if (code === 200) {
            this.bodyArray.forEach((item, index) => {
              item.patientId = this.recordPatientData.patientId;
            });
          } else {
            this.$message.error(msg);
            resolve(false);
            return;
          }
          resolve(true);
        } catch (err) {
          reject(false);
        }
      });
    },
  },
  beforeDestroy() {
    this.body = Object.assign({}, body);
  },
};
</script>
<style scoped>
.w-full,
.w-full1 {
  width: 100%;
}
>>> .w-full .ant-select-selection__placeholder,
>>> .w-full .ant-select-search__field__placeholder {
  display: block !important;
}
>>> .ant-select-selection {
  border: none;
  border-bottom: 1px solid #888888;
}
>>> .ant-select-disabled {
  background-color: #ffffff !important;
}
>>> .ant-select-disabled .ant-select-selection {
  border-bottom: 1px dashed #888888;
}
.ant-radio-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
>>> .ant-radio-wrapper {
  display: flex;
  align-items: center;
  font-size: 18px !important;
}
>>> .el-dialog__body {
  padding: 20px 20px 20px 20px !important;
}

.popup-p-icon {
  color: #e6a23c;
  font-size: 24px;
  margin-right: 10px;
}
>>> .el-button {
  padding: 8px 11px !important;
}
.popup-p {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 0;
}
.div-step {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  z-index: 999;
  font-size: 18px;
  width: 300px;
  line-height: 48px;
  background: #5cc0be;
  border-radius: 6px 6px 6px 6px;
  text-align: center;
  color: #fff;
}
.div-car {
  padding: 16px 16px 0 16px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
}
.lighten-5 {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.lighten-5:last-child {
  border-bottom: none !important;
}
.title {
  font-size: 16px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 16px;
  line-height: 20px;
  padding-bottom: 14px;
}
>>> .el-input__icon {
  display: none;
}
>>> .el-date-editor.el-input {
  height: 32px;
  line-height: 32px;
  width: 74%;
}
>>> .el-input--prefix .el-input__inner {
  padding: 4px 11px;
}
>>> .el-input__inner {
  font-size: 16px;
  color: #222222;
  height: 32px !important;
  line-height: 32px !important;
  border: none;
  color: rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid #888888;
  border-radius: 4px;
  font-size: 14px;
}
>>> .el-input__inner::placeholder {
  color: #bfbfbf;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
}

.div-title {
  flex-shrink: 0;
}
.div-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userInfo {
  display: flex;
}
/deep/.ant-btn-success {
  color: #fff;
  background-color: #00825a;
  border-color: #00825a;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

.btn {
  width: 120px;
  height: 42px;
  font-size: 16px;
  margin: 10px 0;
}

.box-width {
  min-width: 84px;
  width: 84px;
  text-align: right;
  line-height: 32px;
}

.add-new-box {
  width: 100%;
  position: relative;
  height: 0px;
}

.add-new {
  position: absolute;
  right: 0;
  top: -8px;
}

.red--text-box {
  text-align: left;
  margin-bottom: 4px;
  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}

.w-full,
.w-full1 {
  width: 100%;
}
</style>
<style lang="less" scoped>
/deep/.ant-input[disabled] {
  background-color: #ffffff !important;
}
/deep/.w-full .ant-select-selection__placeholder,
/deep/ .w-full .ant-select-search__field__placeholder {
  display: block !important;
}
/deep/.ant-select-selection {
  border: none;
  border-bottom: 1px solid #888888;
}
/deep/ .ant-card-body {
  padding-bottom: 0 !important;
}
.div-ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .div-li {
    font-size: 16px;
    width: 32.33%;
    display: flex;
    align-items: center;
    margin-right: 1%;
    position: relative;
    margin-bottom: 24px;
    span {
      line-height: 32px;
      flex-shrink: 0;
    }
    .required {
      color: red;
      position: absolute;
      top: -5px;
      left: -5px;
    }
  }
  .div-li:nth-child(3n) {
    margin-right: 0;
  }
}

/deep/.ant-input {
  border: none;
  border-bottom: 1px solid #888888;
}
/deep/.ant-input:focus {
  box-shadow: none !important;
}
</style>
