<template>
  <div>
    <div class="popup-content" v-show="!show_add">
      <h2 class="title">
        <span class="line"></span>
        <p>{{ title }}</p>
        <span class="line"></span>
      </h2>
      <div class="content">
        <div class="yzNav" style="text-align: left;">
          <span @click="addAction">新增监测</span>
          <!-- <span @click="deleteAction">删除</span> -->
        </div>
        <div style="width:100%;overflow:hildden;overflow-x:auto;">
          <table class="table" style="">
            <tr>
              <th width="124px">时间</th>
              <th width="72px">血压(mmHg)</th>
              <th width="80px">心率(次/分)</th>
              <th width="110px">呼吸（次/分)</th>
              <th width="92px">血流量(ml/min)</th>
              <th width="76px">静脉压(mmHg)</th>
              <th width="76px">跨膜压(mmHg)</th>
              <th width="76px">超滤量(ml/h)</th>
              <th width="92px">钠浓度(mmol/L)</th>
              <th width="92px">透析液温度(℃)</th>
              <th width="92px">置换率(ml/min)</th>
              <th width="92px">置换量(L)</th>
              <th width="92px">病情变化</th>
              <th width="92px">处理</th>
              <th width="92px">结果</th>
            </tr>

            <tr
              v-for="(item, index) in records"
              :key="index"
              :value="item.value"
            >
              <td v-if="item.operate_time > 0">
                {{ parseTime(item.operate_time, "{y}-{m}-{d}") }}
                {{ item.monitoring_time }}
              </td>
              <td v-else></td>
              <td>
                {{
                  item.diastolic_blood_pressure +
                    "/" +
                    item.systolic_blood_pressure
                }}
              </td>
              <td>{{ item.pulse_frequency }}</td>
              <td>{{ item.breathing_rate }}</td>
              <td>{{ item.blood_flow_volume }}</td>
              <td>{{ item.venous_pressure }}</td>
              <td>{{ item.transmembrane_pressure }}</td>
              <td>{{ item.ultrafiltration_volume }}</td>
              <td>{{ item.sodium_concentration }}</td>
              <td>{{ item.dialysate_temperature }}</td>
              <td>{{ item.replacement_rate }}</td>
              <td>{{ item.displacement_quantity }}</td>
              <td style="padding-left: 5px; padding-right: 5px;">
                {{ item.symptom }}
              </td>
              <td style="padding-left: 5px; padding-right: 5px;">
                {{ item.dispose }}
              </td>
              <td style="padding-left: 5px; padding-right: 5px;">
                {{ item.result }}
              </td>
              <!-- <td v-if="item.monitoring_date > 0">{{ parseTime(item.monitoring_date, "{y}-{m}-{d}") }} {{ item.monitoring_time }}</td>
              <td v-else></td>
              <td>{{ item.systolic_blood_pressure > 0 && item.diastolic_blood_pressure > 0 ? item.diastolic_blood_pressure + "/" + item.systolic_blood_pressure : "" }}</td>
              <td>{{ item.pulse_frequency > 0 ? item.pulse_frequency + "" : "" }}</td>
              <td>{{ item.breathing_rate > 0 ? item.breathing_rate + "" : "" }}</td>
              <td>{{ item.blood_flow_volume > 0 ? item.blood_flow_volume + "" : "" }}</td>
              <td>{{ item.venous_pressure > 0 ? item.venous_pressure + "" : "" }}</td>
              <td>{{ item.transmembrane_pressure > 0 ? item.transmembrane_pressure + "" : "" }}</td>
              <td>{{ item.ultrafiltration_volume > 0 ? item.ultrafiltration_volume + "" : "" }}</td>
              <td>{{ item.sodium_concentration > 0 ? item.sodium_concentration + "" : "" }}</td>
              <td>{{ item.dialysate_temperature > 0 ? item.dialysate_temperature + "" : "" }}</td>
              <td>{{ item.replacement_rate > 0 ? item.replacement_rate + "" : "" }}</td>
              <td>{{ item.displacement_quantity > 0 ? item.displacement_quantity + "" : "" }}</td>
              <td style="padding-left: 5px; padding-right: 5px;">{{ item.symptom }}</td>
              <td style="padding-left: 5px; padding-right: 5px;">{{ item.dispose }}</td>
              <td style="padding-left: 5px; padding-right: 5px;">{{ item.result }}</td> -->
            </tr>

            <tr v-if="records.length == 0">
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <add-monitor
      v-show="show_add"
      title="添加监测"
      @cancel_add_action="show_add = false"
      :patient="patient"
      :order="order"
      @did_add_monitor="didAddMonitor"
    ></add-monitor>
  </div>
</template>

<script>
import AddMonitor from "./addMonitor";
import { parseTime } from "@/utils";
export default {
  name: "MonitorSupervise",
  components: {
    AddMonitor
  },
  data() {
    return {
      title: "透析监测 ",
      show_add: false
    };
  },
  props: {
    records: {
      type: Array
    },
    patient: {
      type: Object
    },
    order: {
      type: Object
    }
  },
  methods: {
    parseTime(time, layout) {
      return parseTime(time, layout);
    },
    addAction() {
      this.show_add = true;
    },
    didAddMonitor(monitor) {
      // console.log(monitor)
      this.show_add = false;
      this.records.push(monitor);
      this.$emit("did_add_monitor", monitor);
    }
  }
};
</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.28rem;
    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>
