<template>
  <div class="popup-content">
    <h2 class="title">
      <span class="line"></span>
      <p>{{title}}</p>
      <span class="line"></span>
    </h2>
    <div class="content">
      <div class="cell">
        <label>监测时间</label>
        <input type="text" class="inputBox" readonly @click="selectMonitorTimeAction" v-model="monitor_time_str">
      </div>
      <div class="cell">
        <label>舒张压(mmHg)</label>
        <input type="text" class="inputBox" v-model="form.diastolic_bp">
      </div>
      <div class="cell">
        <label>收缩压(mmHg)</label>
        <input type="text" class="inputBox" v-model="form.systolic_bp">
      </div>
      <div class="cell">
        <label>心率(次/分)</label>
        <input type="text" class="inputBox" v-model="form.pulse_frequency">
      </div>
      <div class="cell">
        <label>呼吸频率(次/分)</label>
        <input type="text" class="inputBox" v-model="form.breathing_rated">
      </div>
      <div class="cell">
        <label>血流量(ml/min)</label>
        <input type="text" class="inputBox" v-model="form.blood_flow_volume">
      </div>
      <div class="cell">
        <label>静脉压(mmHg)</label>
        <input type="text" class="inputBox" v-model="form.venous_pressure">
      </div>
      <div class="cell">
        <label>动脉压(mmHg)</label>
        <input type="text" class="inputBox" v-model="form.arterial_pressure">
      </div>
      <div class="cell">
        <label>跨膜压(mmHg)</label>
        <input type="text" class="inputBox" v-model="form.transmembrane_pressure">
      </div>
      <div class="cell">
        <label>超滤率(ml/h)</label>
        <input type="text" class="inputBox" v-model="form.ultrafiltration_rate">
      </div>
      <div class="cell">
        <label>超滤量(ml/h)</label>
        <input type="text" class="inputBox" v-model="form.ultrafiltration_volume">
      </div>
      <div class="cell">
        <label>钠浓度(mmol/L)</label>
        <input type="text" class="inputBox" v-model="form.sodium_concentration">
      </div>
      <div class="cell">
        <label>透析液温度(℃)</label>
        <input type="text" class="inputBox" v-model="form.dialysate_temperature">
      </div>
      <div class="cell">
        <label>置换率(ml/min)</label>
        <input type="text" class="inputBox" v-model="form.replacement_rate">
      </div>
      <div class="cell">
        <label>置换量(L)</label>
        <input type="text" class="inputBox" v-model="form.displacement_quantity">
      </div>
      <div class="cell width" style="padding-right: 15px;">
        <label>KT/V(在线)</label>
        <!-- <input type="text" class="inputBox" v-model="form.ktv"> -->
        <textarea class="inputBox" style="width: 100%;" v-model="form.ktv"></textarea>
      </div>
      <div class="cell width" style="padding-right: 15px;">
        <label>病情变化</label>
        <!-- <input type="text" class="inputBox" v-model="form.symptom"> -->
        <textarea class="inputBox" style="width: 100%;" v-model="form.symptom"></textarea>
      </div>
      <div class="cell width" style="padding-right: 15px;">
        <label>处理</label>
        <!-- <input type="text" class="inputBox" v-model="form.dispose"> -->
        <textarea class="inputBox" style="width: 100%;" v-model="form.dispose"></textarea>
      </div>
      <div class="cell width" style="padding-right: 15px;">
        <label>结果</label>
        <!-- <input type="text" class="inputBox" v-model="form.result"> -->
        <textarea class="inputBox" style="width: 100%;" v-model="form.result"></textarea>
      </div>
      
      <div class="cell width">
        <label>监测人：</label>
        <span>{{doctor}}</span>                       
      </div>

      <div class="cell width center">
        <button @click="submitAction">提交</button>
        <button @click="cancelAction" style="background-color: white; color: gray; border-color: #c0c4cc; border-width: 0.5px;border-style: solid;">取消</button>
      </div>
    </div>
    
    <mt-datetime-picker ref="time_picker" type="time" v-model="form.monitor_time" yearFormat="{value} 年" monthFormat="{value} 月" dateFormat="{value} 日" hourFormat="{value} 时" minuteFormat="{value} 分"></mt-datetime-picker>
  </div>
</template>

<script>
import {parseTime} from "@/utils"
import {addMonitorRecord} from "@/api/dialysis"

export default {
  name: "AddMonitor",
  data() {
    return {
      title: "透析监测 ",
      form: {
        // patient_id: 0,
        // order_id: 0,
        monitor_date: 0,
        monitor_time: "00:00",
        pulse_frequency: "", // 脉率
        breathing_rated: "", // 呼吸频率
        systolic_bp: "", // 收缩压
        diastolic_bp: "", // 舒张压
        blood_flow_volume: "", // 血流量
        venous_pressure: "", // 静脉压
        arterial_pressure: "", // 动脉压
        transmembrane_pressure: "", // 跨膜压
        ultrafiltration_rate: "", // 超滤率
        ultrafiltration_volume: "", // 超滤量
        sodium_concentration: "", // 钠浓度
        dialysate_temperature: "", // 透析液温度
        replacement_rate: "", // 置换率
        displacement_quantity: "", // 置换量
        ktv: "", // KT/V(在线)
        symptom: "", // 症状
        dispose: "", // 处理
        result: "", // 结果
        monitoring_nurse: this.$store.getters.user.user.id, // 监测人
      },
      doctor: this.$store.getters.user.user.user_name,
    };
  },
  computed: {
    monitor_time_str: function() {
      if (this.form.monitor_date == 0) {
        return ""
      } else {
        return parseTime(this.form.monitor_date, "{y}-{m}-{d}") + " " + this.form.monitor_time
      }
    }
  },
  props: {
    patient: {
      type: Object,
    },
    order: {
      type: Object,
    }
  },
  created() {
    this.form.monitor_date = parseInt(this.$route.query.date)
    this.form.monitor_time = parseTime(new Date(), "{h}:{i}")
  },
  methods: {
    selectMonitorTimeAction: function() {
      this.$refs.time_picker.open()
    },
    submitAction: function() {
      var params = {}
      params.patient_id = this.patient.id
      params.order_id = this.order == null ? 0 : this.order.id
      params.date = this.form.monitor_date
      params.time = this.form.monitor_time
      params.pulse_frequency = this.form.pulse_frequency
      params.breathing_rated = this.form.breathing_rated
      params.systolic_bp = this.form.systolic_bp
      params.diastolic_bp = this.form.diastolic_bp
      params.blood_flow_volume = this.form.blood_flow_volume
      params.venous_pressure = this.form.venous_pressure
      params.arterial_pressure = this.form.arterial_pressure
      params.transmembrane_pressure = this.form.transmembrane_pressure
      params.ultrafiltration_rate = this.form.ultrafiltration_rate
      params.ultrafiltration_volume = this.form.ultrafiltration_volume
      params.sodium_concentration = this.form.sodium_concentration
      params.dialysate_temperature = this.form.dialysate_temperature
      params.replacement_rate = this.form.replacement_rate
      params.displacement_quantity = this.form.displacement_quantity
      params.ktv = this.form.ktv
      params.symptom = this.form.symptom
      params.dispose = this.form.dispose
      params.result = this.form.result
      params.monitoring_nurse = this.form.monitoring_nurse
      // console.log(params)
      addMonitorRecord(params).then(rs => {
        var resp = rs.data
        // console.log(resp)
        if (resp.state == 1) {
          var monitor = resp.data.monitor
          this.$emit("did_add_monitor", monitor)

          this.form.monitor_time = parseTime(new Date(), "{h}:{i}")
          this.form.pulse_frequency = ""
          this.form.breathing_rated = ""
          this.form.systolic_bp = ""
          this.form.diastolic_bp = ""
          this.form.blood_flow_volume = ""
          this.form.venous_pressure = ""
          this.form.arterial_pressure = ""
          this.form.transmembrane_pressure = ""
          this.form.ultrafiltration_rate = ""
          this.form.ultrafiltration_volume = ""
          this.form.sodium_concentration = ""
          this.form.dialysate_temperature = ""
          this.form.replacement_rate = ""
          this.form.displacement_quantity = ""
          this.form.ktv = ""
          this.form.symptom = ""
          this.form.dispose = ""
          this.form.result = ""

        } else {
          this.$toast({message: resp.msg})
        }
      })
    },
    cancelAction: function() {
      this.$emit("cancel_add_action")
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped >
.popup-content .content {
  padding:0 0.26rem 0.3rem 0.26rem ;
  .yzNav {
    width: 40%;
    margin: 0 auto;
    @include display-flex;
    @include text-align;
    @include align-items-center;
    @include justify-content-around;
    span {
      width: 1.84rem;
      height: 0.66rem;
      line-height: 0.66rem;
      background: #fff;
      border-radius: 50px;
      border: 1px $border-color solid;
      display: inline-block;
      color:$pgh-color;
      @include text-align;
      margin: 0.45rem 0;
    }
  }
  .table {
    width: 1500px;
    overflow: auto;
    font-size: 0.34rem;
    text-align: center;
    border: $border-color;
    padding-bottom: 0.02rem;
    tr {
      padding: 0;
      margin: 0;
      padding: 0.1rem 0;
      th {
        background: $main-color;
        border: none;
        color: #fff;
        padding: 0;
        margin: 0;
        height: 0.88rem;
        font-weight: normal;
        padding: 0.18rem 0;
      }
      
    }
  }
}
</style>
